Element Visibility Trigger allows you to track banner impressions, pop-ups, and form submissions that display the message on the same page upon submission. Element visibility trigger will enable you to do a far more meaningful analysis compared to scroll tracking. Scroll depth doesn’t differentiate between varying page types and lengths. Also, scroll percentages are viewed at an aggregate level which means you don’t end up getting meaningful data.
Element visibility trigger fires a tag every time the chosen element appears in your browser’s viewport. A viewport is the visible area of a page in your browser.
Element Visibility Trigger Best Practices
Performance
Setting a minimum on-screen duration or configuring the trigger to observe DOM changes requires Google Tag Manager to monitor the status of the selected element(s). When multiple elements on a given page are matched, site performance (after page load) may be affected. For best performance, ensure that your CSS selector does not match a large number of elements, or use ID as your selection method instead.
Set Element Visibility to 100%
Specify how much of the selected element must be visible on screen (by percent) before the trigger fires. By default, elements must be 50% on screen for the trigger to fire. For example, if a user scrolls down the page, bringing a selected element partially into the viewport, it will trigger once 50% of the element is visible. Changing this field to 100, would cause the trigger to wait until the element is fully visible (100%) in the viewport to fire.
On-Screen Duration & Percentage Visible
Element Visibility opens up new opportunities for you when it comes to tracking user behaviour. Combine element visibility with associated new variables: visible percentage and the on-screen duration. The use cases for data gathered from this exercise will allow you to optimise your user experience and conversions.
Calculate actual ctr
Element visibility trigger allows you to calculate the actual click-through rates on your promotions. Instead of calculating the number of page views divided by the number of clicks for a custom promotional click-through rate, it is possible to calculate the click-through rate of people that have had a true impression.
For example, let’s say you have a placed a promotional banner below the fold and the page records 200 page views and 15 clicks. The click-through rate would be 200/15=13.33%. Using element visibility trigger, you will be able to find the actual impressions received by the banner which could be 75. So your actual click-through rate would be 75/15=5%.
Test – Review – Repeat
To apply element visibility trigger you will have to select elements in DOM using a CSS selector. In case of form submission, you can observe changes in DOM. Tag manager can also observe multiple changes in DOM, however, it is recommended that you be as specific as possible in order to find the right element and you don’t have any false negatives when your tags are firing.
