Element Visibility Trigger in GTM: Examples – Email Subscription & Recommendations

Element visibility trigger in Google Tag Manager is one of the most undervalued features that we do not utilize. This powerful feature can be used to track a lot of things and can be used in different scenarios in where we measure the data based on what analytics says. Here are some examples of element visibility trigger in google tag manager and its uses on a website.

Element visibility trigger example one

On my blog, I want to collect emails. On average, I receive around 50 email leads on daily basis. The email subscription form shows to a user only when a user navigates to another page. Let us say, my blog receives around 4000 users on a daily basis and I collect 50 emails as the subscription. Is this ratio good? Can it be improved?

Wrong Measurement technique

If we measure the conversion ratio here and say that the conversion ratio is 1.25% here then we are measuring it wrong because not all 4000 users saw the email subscription form. So, in this case, before arriving at a generalized conclusion, it is important that we measure the number of times the email subscription pop up form was shown up on the website.

Thus, for the same purpose, I used element visibility trigger to get an exact idea of how many times the email subscription form was shown.

Element Visibility Trigger in GTM

In order to implement the element visibility trigger in GTM, I needed some element identification. It could be element ID or through CSS selector. I used element ID.

Email Subscription Form element ID

Email Subscription Form element ID

I got the element ID of the email subscription form as shown above. Using this ID, I am going to create an element visibility trigger in GTM.

Trigger for Element visibility

You have to select the trigger type as element visibility.

Selection Method

There are two selection methods here – element ID and CSS Selector. The former uses document.getElementById to match the first element in the page with the given ID. The latter uses CSS Selectors to match the element or a group of elements on the page.

When to fire this trigger

There are three options for firing a trigger

  • Once per page – this trigger will only fire once on the current page. The moment is when the first element that matches the ID or the selector string enters the viewport.
  • Once per element – this trigger will fire just once if an element with a specific ID appears in the viewport (even if multiple elements share the same ID, in which case it will fire just for the first one). However, when using CSS selectors, this setting will fire once for each element matched by the selector(s). In other words, this would be the setting to use if you wanted to create a trigger that fires when different parts of the page enter the viewport!
  • Every time an element appears on-screen – this trigger fires whenever any matched element appears in the viewport and will do so each time the element reappears.

Other options are self-explanatory here. And the other most important one is

Observe DOM changes

In case, there is a pop up which comes up after filling up a form, or your pop up comes after some time or there are some other conditions which happen later in the scenario after the page loads then check this option. In case of my example, the email subscription form loads after a certain amount of time, so I have to check this option in order to track the form visibility.

Create a tag for the Element Visibility trigger

Element visibility Tag

Element visibility Tag

The tag is self-explanatory here and you can capture the element visibility as an event in GA. Once you have implemented this, you can see the events in GA as how many times the form popped up and how many times people filled it up. Based on that, you can do some tweaking such as changing the timing of the popup etc to see how it reacts.

Element visibility trigger example two

Another good example of element visibility trigger use on a blog will be to see how many people engage with recommendation articles pop-ups. I use AddThis on my blog to show recommended articles to engage more people on my blog.

Recommendation on a blog

When a user scrolls to the bottom of the page, this recommendation pops up and then the user clicks on them to read further. If I just measure the engagement in terms of clicks then that would not do justice to my blog. Another way of measuring this would be to see how many people scrolled to the bottom of the page (100 % scroll depth) and taking an approximation from there for the number of users reaching to the bottom of the page.

However, an exact way would count the number of events this recommendation appeared on any page of the blog than the number of people clicking on the recommendations. We set up the trigger similar way using the ID or CSS selector.

element visibility trigger to measure visibility of a recommendation

And then setting up the trigger similarly. Here is a screenshot that Google Analytics has started to capture the element visibility as events as per settings in the tags.

Element visibility as an event in GA

Element visibility as an event in GA

Other applications of Element visibility:

Element visibility can have other applications on a website as well such as

  • Measure the pop-ups after a form fill or an action on the website
  • Measure the number of appearance of a message on a particular after an action has been taken
  • Measure the number of times some share button or custom button or messaging appeared on a website and compare that to the number of times a user took further action.

This analytics can further be used to do A/B or MVT for further optimization.

Have a Question? Get in Touch!



One Reply to “Element Visibility Trigger in GTM: Examples – Email Subscription & Recommendations”

Leave a Reply

Your email address will not be published. Required fields are marked *