[VIDEO] Track When Website Element Appears in the Viewport with GTM

Apparently, making video tutorials is really hard! When Julian from MeasureSchool contacted me regarding a video collaboration, I thought that this would be a piece of cake. Why would it be difficult? You just start recording, say everything you want and hit the Stop button. Right? Wrong 🙂 This is so far from the truth! Videos require a lot of concentration, precision, and dedication.

Nevertheless, here’s my first attempt to record a video tutorial in which I explain how to track when the website element appears in the viewport (a.k.a. on the screen) and send those events to Google Analytics.

So if you didn’t have much time to dig into this blog post I published a few weeks ago, go watch this video instead. I would also appreciate if you left any kind of feedback regarding this video.

Transcript – How to track when the element appears in the Viewport

Julian (MeasureSchool): In this video, Julius is gonna show you how you can track elements that move into the viewport of the screen. All and more, coming up.

Hey there! Welcome to another video of MeasureSchool.com where we teach you tech tools and tactics of today’s digital marketing world. A while ago Google Analytics came out with the plugin autotrack.js and featured a tracking method that could detect when an element moved into the visible part of the screen of user’s browser.

Unfortunately, this was only available within the plugin. And you couldn’t really make it really work with Google Tag Manager. But just recently, I came across a blog post by Julius from Analytics Mania who published a custom listener that would accomplish just the same thing.

So I reached out to him and asked him if he could help us out and explain this listener to us and how we can install it with Google Tag Manager.

Luckily, he agreed and made a video for us. So without a further ado, Julius, take it away.

Julius (Analytics Mania): Thanks, Julian! In order to understand why this technique is important, I want to illustrate it with an example. Here’s an article on my blog, and let’s say that I want to track when a visitor scrolls down till the very end of the blog post. Unfortunately, I cannot use the classic scroll tracking because it heavily relies on the percentage of scroll distance. Since the length of each blog post is different, some of them end at 85% mark, while others might end at 95%, and so on. As you can see, the data might be inaccurate at this point.

It would be much more accurate to say, that a visitor reaches the end of the blog post when he/she sees the name of the author. And that’s where element visibility tracking comes in handy in Google Tag Manager. In this video, I’m going to show you how to track when a website element appears in the viewport (browser window) after you scroll up or down.

In order to do this, you’ll need to complete 3 steps:

• The first step is to create and configure a custom auto-event listener. That listener will be looking for particular elements (or element) to appear in the viewport (screen). And once that happens, the listener will dispatch a data layer event.
• The second step is to process the data of that event. And we’ll do that by creating a custom event trigger and data layer variables.
• And finally, the third step is to send the data to Google Analytics, and we’ll do that by creating a Universal Analytics tag.

The step No.1 is to get the Javascript code of our element visibility listener. You can find the code here. Select all, go to Google Tag manager, create a new tag and choose the Custom HTML tag template. I’ll paste the code and name the tag cHTML – Element Visibility Listener.

Now, let’s assign a trigger. The element visibility listener works when the entire page content is loaded, that’s why All Page trigger will not work for us. We’ll need to create another by clicking a Plus icon and we’ll use a DOM Ready trigger. We are interested in all DOM Ready events and let’s name it “Pageview – DOM Ready”.

This is what we have so far:

• We have a named the tag
• Javascript code
• And we have assigned a trigger DOM Ready.

But we’re not done yet. There are still have 3 things to edit. By default, this listener does not know which element or elements do you wish to track, so we have to edit a CSS Selector.

If you don’t know yet, CSS Selector is a pattern which lets you pick a group of the elements (or just one element). I highly recommend learning more about CSS Selectors, but if you’re new to it, here’s a quick way how to get started.

Let’s go back to our website and inspect the author’s name. What we see here is that author’s name is actually a h5 and its class is author-title. So let’s enter this in our CSS Selector. Let’s remove this placeholder and enter h5.author-title. With this CSS Selector, we are telling our element visibility listener to look for all h5 elements which have a CSS class author-title. But my recommendation is to be a bit more specific and add at least one more rule to it, so we need to go back to our website and let’s take a look how we can make it a bit more specific. What we see here is h5 element and it’s a direct child of a div with class author-info, so let’s enter that in our CSS Selector. Each CSS class needs to start with a dot. The final selector should look like this: div.author-info > h5.author-title.

So that’s it. Our auto-event listener will be looking for h5 element with class author-title and that h5 element must be a direct child of a div with class author-info.

The next 2 lines that we need to edit are actually optional. If you want, you can delete them. But in this video, I want to show you the full possibilities of this listener, let’s dive deeper. When the element appears on the screen, I can actually fetch the value of any attribute (of that element). Let’s go back to the website and, as you can, the author title has an additional attribute called additional-data, so if I want to fetch its value, all I have to do is just to replace a placeholder with additional-data. And I would also have to do the same ionthe 2nd line.

In this case, when the element appears on the screen, the auto-event listener would fetch the value of this attribute. Currently, it equals to “image-123”. But in my case, this attribute isn’t very helpful, so actually, I’d like to fetch the name of the author, instead. In this case, I need to replace this part with innerText and do the same with the event called hidden.

This way, the auto-event listener will fetch this text which is the name of the author. It would be especially useful if I had at least a couple of other authors on my blog and when the author title appears on the screen, the auto-event listener would fetch the author’s name.

That’s about it. Let’s save our element visibility listener and enable the Preview and Debug mode. Now, let’s head over to our website, refresh the page, and at the bottom of the screen you should see Google Tag Manager Preview and Debug console. Click the DOM Ready event and as you can see our auto-event listener was fired successfully. Now, let’s scroll till the very end of our blog post until we see the author title.

Here it is. As you can see, in the event stream, there is a data layer event called elementVisibility. Let’s click it and head over to Data Layer tab. Looks like everything is working as expected: we see the event name, we have visibilityStatus shown, and elementAttribute is Julius Fed.

The step 1 is complete. Now, we need to process this data in Google Tag Manager and then we’ll send that data to Google Analytics. By default, Google Tag Manager does not recognize custom data stored in the data layer. So if you were looking for visibilityStatus you couldn’t find it among variables, so we need to create 2 data layer variables which are called visibilityStatus and elementAttribute. Variables names are case-sensitive, so make sure that the S (in visibilityStatus) and A (in elementAttribute) letters are uppercase.

We are done with variables and now we need to create a trigger because we want to fire a Google Analytics tag when an element becomes visible. So we need to turn this data layer event into an actual trigger. Go to GTM > Triggers and let’s create a new trigger which is using trigger type Custom Event and enter elementVisibility.

The event name must be exactly the same as the one displayed in the Preview and Debug mode, so make sure that V letter (in elementVisibility) is uppercase. I’ll name this trigger Custom – elementVisibility.

Now, what we need to do is test our variables and see whether they are fetched correctly. Refresh the Preview and Debug mode, head over to the website, and refresh it as well. Scroll down till the very end of the website until we see the author title. Here it is. Let’s click the elementVisibility element, go to Data Layer tab and check whether all data points are displayed correctly. Everything works as expected.

Now, let’s head over to Variables tab and see what values do we have here. Here’s our first data layer variables, everything works as expected. And visibilityStatus is also displayed correctly.

The step 2 is also complete.

The final step is to send the data to Google Analytics and we’ll do that by using a Universal Analytics tag. Go to Tags, click New and choose Universal Analytics as a Tag Type. In Track Type, choose Event and we’ll need to enter category, action, label. In this case, we’ll enter all three.

• The category should be elementVisibility.
• The action should be Author title is: {{dlv – visibilityStatus}}
• In the label field, we’ll put the {{dlv – elementAttribute}}

Now, let’s enter Google Analytics Tracking ID. Ideally, you should use GA Settings variable, but in this case, I’ll just override the variable and enter the GA tracking ID manually.

What else do we need to add? The tag name is GA Event – Element Visibility. And we need to choose a data layer trigger that we created a couple of minutes ago. Let’s test the entire iimplementation

Refresh the Preview and Debug console, then refresh the website you’re currently working on. Also, we need to go to Google Analytics Real-time event reports. On our website, let’s scroll till the very end of the blog post until we see the author title.

Yes, we see that the elementVisibility event was fired successfully, click it and you’ll see that GA Event was fired also successfully. And we see that this event was also successfully sent to Google Analytics servers.

• Event category is Element Visibility
• Event action is Author title is shown
• Event label is Julius Fed.

So there you have it. Now, you know how to track when the website element appears in the viewport (browser window) after scrolling up or down. If you have any questions, just post them in the comments. Thanks for watching.

Julian (MeasureSchool): Alright, thank you, Julius, for this video. And now you know how you can track elements when they come into the viewport of the browser. I find this highly interesting when it comes to advertising tracking, for example.

So if you want to find out if the user actually saw an advertisement or call-to-action on your page, then you could do this with this custom listener. So if you want to install this then head over to the blog post by Julius from Analytics Mania (we have posted a link to it in the description of this video).