Configure the Element Visibility Trigger

The Element Visibility Trigger fires tags when a specific element enters the viewport, the visible area of a webpage. This lets you monitor when visitors scroll or dynamically load content such as popups, text nodes, forms, or other HTML elements.

A configured trigger will detect when a target element enters the viewport and then fire the associated tags. You can target elements using CSS selectors or unique element IDs, ensuring precise tracking of when key content appears on the screen.

Common use cases

• Tracking popup engagement: Fire tags when a modal, banner, or popup appears on the screen to measure visibility and interaction rates.
• Monitoring element visibility beyond scroll depth: Unlike the Scroll Reach Trigger, which tracks how far a user scrolls on a page, the Element Visibility Trigger precisely tracks when a specific element (e.g., a pricing table, CTA, or testimonial section) actually enters the viewport.
• Content tracking: Capture when dynamically loaded images, videos, or elements become visible.
• Tracking confirmation messages: Detect when a success message (e.g., Thank you for your submission or Order confirmed) appears, ensuring the user has completed an action.
• Form visibility and interaction: Detect when a contact or signup form enters the viewport, helping measure form exposure before submission.

Add the Element Visibility Trigger

1. In your Tag Manager container dashboard, navigate to Triggers.
2. Click Add New Trigger and select Element Visibility.
3. Choose the Selection Method to identify the target element:
   • Element ID: The simplest method, used when the element has a unique ID attribute.
   • CSS Selector: A more advanced option that allows for greater flexibility and useful when an element does not have a unique ID.
4. Select when to Fire this trigger. This can be once per page view/element view or every time the element appears. If a visitor stays on the page and interacts with the same elements, multiple instances of the same event will be tracked.
5. The Minimum Percent Visible indicates how much of the element should be visible before firing the trigger. The default is set to 50 percent where at least half the element must be visible.
6. The Observe DOM Changes setting is a key option in the Element Visibility Trigger, determining how Matomo detects elements on the page. It is disabled by default. Select to enable if the element appears dynamically without scrolling, such as a popup or content loaded after an interaction. This ensures Matomo correctly tracks elements that are added to the page after the initial load.

Use the Element ID Selection Method

If the element you want to track has an ID attribute, choose the Element ID as your Selection Method.

1. To check the Element ID, open the site in the browser to access the developer tools.
2. In the Elements / Inspector tab, locate the target element. For example, you want to track when visitors have the Invest Apps section in their viewport.

3. In the HTML view, identify the id="your-element-id" attribute, e.g., <section id="invest-apps"> and add the ID value as the Element ID.
   

4. After adding the trigger, link it to a tracking tag such as the Matomo Analytics tag.

5. In the tag configuration, set the Tracking Type to Event and define the event details as they should appear in your reports.
   

Use the CSS Selector Selection Method

This method requires a basic understanding of CSS selectors. If the element does not have an ID or you need to track a specific element or multiple elements with similar properties, use a CSS Selector. When providing CSS Selectors, valid formats must apply, for example:

• Select a specific class-prefix the class name with a dot: .promo-banner
• Select a nested element: #div.newsletter-buttons
• Selects elements only within a defined section: #pricing-section .cta-button
• Select all elements that share a class: button-primary, .button-secondary
• Select an element with multiple classes: .confirmation-message.subscribe-confirmation

The following example uses the Element Visibility Trigger to track when the subscription confirmation message displays in the visitor’s viewport.

1. To check the CSS Selector, open the site in the browser to access the developer tools.
2. In the Elements / Inspector tab, locate the target element, e.g., the subscription confirmation message.
3. In the HTML view, identify the confirmation message <div id="confirmationMessage" class="confirmation-message subscribe-confirmation" style="display: block;">

4. Enter the CSS Selector in the correct format without whitespaces: .confirmation-message.subscribe-confirmation. This ensures that the trigger fires only when the subscribe confirmation message appears.
   

5. After adding the trigger, link it to a tracking tag such as the Matomo Analytics Tag.

6. In the tag configuration, set the Tracking Type to Event and define the event details as they should appear in your reports.
   

Test and Validate the Configuration

Validate the tag configuration by verifying that tracking is active and data is being sent to Matomo as expected.

1. Open your website and perform test actions.
2. Navigate to your Matomo dashboard and view the Visits in real-time widget to verify your visit and events appear in the log.
3. Use the Tag Manager Preview and Debug tool to ensure the trigger fires as expected and activates the tag.
4. Click on the Data Layer tab to verify the correct Element ID was tracked and at what percent it was visible when the trigger fired, e.g., "mtm.elementVisibilityPercentage":55.73,"mtm.elementVisibilityId":"invest-apps"

The Element Visibility Trigger is an effective way to track interactions beyond traditional click-based events. By targeting elements with IDs or CSS selectors, you can measure when key content becomes visible in the viewport, ensuring more accurate engagement tracking.