Track Element Visibility with Google Tag Manager (feat. Julius Fed from AnalyticsMania)

By | August 27, 2019


– In this video, Julius is gonna show you how you can track elements that moved into the
viewport of the screen. All and more coming up. (upbeat music) Hey there and welcome to another video of MeasureSchool.com teaching you the tech tools and techniques of today’s digital marketing world. Now a while ago Google Analytics came out with a plugin called autotrack.js and it featured a tracking method that could detect whether an element moved into the visible part of the screen of the user’s browser. Unfortunately, this is only available within the plugin and you couldn’t really make it 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 further ado,
Julius, take it away. – [Julius] Thanks, Julian. In order to understand why this technique is important, I want to
illustrate it with an example. Here’s an article in my blog and let’s say that I want to track when
the visitor scrolls down to the very end of my
blog post right here. 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% mark and so on. As you can see, the
data might be inaccurate at this point. It would be much more accurate to say that the visitor reaches
the end of the blog post when he or she sees the name
of the author right here. And that’s where element
visibility tracking comes in handy in Google Tag Manager. In this video I’m gonna show you how to track elements when they appear on the screen after you scroll up or down. In order to do this, you’ll
need to complete three 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 on the 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 Universal Analytics tag. Okay, so the step number one is to get the JavaScript code of our
element visibility listener. You can find the link to the code in the description of this video and I’ll just get it from here. Select All, go to Google Tag Manager, create New Tag, and I’ll choose the custom HTML tag template. I’ll paste the code right now, and now I’ll name the tag cHTML. cHTML stands for custom HTML, and I’ll name the tag
Element Visibility Listener. Now let’s assign a trigger. The element visibility listener works when the entire content of the website is already loaded. That’s why All Pages trigger
will not work for us. We’ll need to create another one by clicking the plus icon here, and we’ll use a DOM Ready trigger. We are interested in all DOM Ready events and let’s name it Pageview – DOM Ready. Okay, so what we have so far is we have named the tag, we have the JavaScript code, and we have the trigger DOM Ready. But we’re not done yet. We still have three 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 here. If you don’t know yet, a CSS selector is a pattern which let’s you pick a group of elements or just maybe
one element if you wish. I highly recommend learning
more about CSS selectors, but if you’re new to
it, here’s a quick way how to get started. So let’s go back to our website and inspect the author’s name. What we see here is that author’s name is actually H5 and its
class is author-title. So let’s enter this in our CSS selector. Let’s remove this placeholder and click H5.author-title. So with this CSS selector we are telling our listener to look for all H5 elements which have a class called 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. So 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: div. Each CSS class must start with a dot, so we need to enter dot, and enter author-info. Press space. And we need to tell that H5 element must be a direct child of this div so we need to enter this symbol. So that’s it. Our auto-event listener will be looking for H5 elements with class author-title and that H5 element must be a direct child of div with class author-info. The next two lines that we need to edit are actually optional. If you want, you can delete
them just by removing this line and deleting this comma. You can also do the same with this line. But in this video I want to show you the full possibilities of this listener so let’s dive deeper. So when the element appears on the screen I can actually fetch the
value of that attribute. For example. Let’s go back to the
website and, as you can see, the author-title has
an additional attribute called additional data, so if I wanted to fetch its value, all I have to do is just to replace this
placeholder with additional-data, and I would also have to do the same here. So in this case, when the
element appears on screen, the 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 would like to
fetch the name of the author. So in that 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 author’s name. So that’s about it. Let’s save our Event Visibility Listener and enable 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’s preview and debug console. Click DOM Ready event, and as you can see, our auto-event listener
was fired successfully. Now let’s scroll till the
very end of the blog post until we see author title. Yes, we can see that and, as you can see, in the event stream we
see 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, it’s
called elementVisibility. We have visibilityStatus, it’s shown, and elementAttribute is Julius Fed, as we have expected. So that’s it with the
step one, and 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 which is
stored in the data layer. So if you were looking
for visibilityStatus, you couldn’t find it among variables. So we need to create
two data layer variables which are called visibilityStatus and elementAttribute. So let’s do that. Let’s go to the Variables section, and scroll down, and here
under User-Defined Variables we need to click the New button and create two data layer variables. Let’s enter a data layer variable name which must be equal to this value. So for example, visibilityStatus. Variable names are key
sensitive so make sure that the S letter is capital here. And let’s name the
variable, I call them dlv, this stands for data layer variable, and I’ll name it visibilityStatus. And let’s do the same
with another variable which should be called elementAttribute. Variable type is Data Layer Variable and variable name is elementAttribute. Let’s save. So that’s it with variables and now we need to create a trigger because we want to fire
a Google Analytics tag when element becomes visible. So we need to turn this data layer event into an actual trigger. So let’s go to Google
Tag Manager, Triggers, and let’s create a new trigger which is using trigger type Custom Event. And enter elementVisibility. This event name must be
exactly the same as this one. So make sure that V
letter is also capital. And let’s call the trigger
Custom – elementVisibility. Now what we need to do
is to test our variables and to see whether they
are fetched correctly. So refresh the preview and debug mode, then head over to the website and refresh. Let’s scroll down till the
very end of our blog post until we see the author title. Yes, here it is. Let’s click the elementVisibility event, go to Data Layer, and just double-check whether all data points
are displayed correctly. So everything works as expected. Now let’s head over to
Variables tab and see what values do we have here. So here’s our first data layer variable, everything works as expected, and then the visibilityStatus also
is displayed correctly. So the step two is also complete. Now the final step is to send the data to Google Analytics and we’ll do that by using Universal Analytics tag. Go to Tags. Click New and choose Universal Analytics as your tag type, and track type, choose Event, and we’ll need to enter Category, Action and, if we want, Label. At this point we’ll fill
in all three fields. So the category should
be Element Visibility. Actually you can name all
three fields whatever you want, but in this case I’m
gonna name it like that. Action should be Author title is, and then I’m gonna enter our
variable visibilityStatus. And then we have also Label field, let’s put there our elementAttribute, so in this case will be author’s name. If you wish you can also add this: Author name, like this. Now let’s enter Google
Analytics tracking ID. Ideally we should use Google
Analytics settings variable but in this case I’ll just overwrite it with simple tracking ID. Let’s head over to
Google Analytics account, copy this tracking ID, paste it here. What else do we need to add? Tag name, it’s GA Event
– Element Visibility. And we need to choose a data layer trigger that we created a few minutes ago. Let’s test the entire implementation. Refresh the preview and debug console. Now let’s head over to
our website and refresh. Also we need to go to Google Analytics real time event reports and our website. Let’s scroll down till the very end until we see the author title. Yeah, so we see that the
elementVisibility event was fired successfully. Click it, we see that
Google Analytics Event was fired also successfully. And we see that this event was also successfully sent to
Google Analytics server. So Event Category is Element Visibility, Event Action is Author title is shown, and let’s see Author name is Julius. So there you have it. Now you know how to track website elements when they appear on the screen after scrolling up or down. If you have any questions, just post them in the comment section of this video. Thanks for watching! – Alright, thank you,
Julius, for this video. And now you know how you can track elements when they come into the viewport to the browser of the user. Now I find this highly interesting when it comes to advertising
tracking, for example. So if you wanted to find out if your user actually saw an advertising call to action on your page and report on that, then you could do this
with this custom listener. So if you want to install
this, then head down to the blog post that
we have linked up below from Julius on Analytics Mania where he’d written about this and also you can copy the code there. Now if you like this video,
then give us a thumbs-up and also subscribe to this
channel right over there because we bring you new videos, just like this one, every week. Now my name is Julian. See you in the next one!

9 thoughts on “Track Element Visibility with Google Tag Manager (feat. Julius Fed from AnalyticsMania)

  1. Michel Mitri Post author

    I adapted similar solution however it created serious issues in my digital tracking, as it produced more Session that Pageviews. As you know the GA "standard" tracking implementation starts with Pageview, by adapting Scroll tracking you will increase the chances of Session starts with "Event" especially for those who timeout. I would highly recommend if used to be tested on specific part of the site and if your satisfied with the data format then shift it globally.
    Thanks for sharing Julius, love your videos.

    Reply
  2. Babyfasty Post author

    GTM now includes this trigger feature called element visibility

    Reply
  3. Tarik Ballouz Post author

    Hi! 🙂
    you are giving great value to the community! Highly appreciated!

    I thought you could help me out with something: Tracking prettylinks seams like kind of a hassle. Setting the Click Target URL is not working for links wrapped around images.

    Any idea?

    Reply
  4. Carlos Vel Post author

    I want to track add to carts like this

    but it should be something like this: span.summary-top NOT 0
    is it possible to make this rule?

    I don't want to track add to carts with a button click because it fails when people click it but have not chosen an item color

    Reply
  5. baseroom9 Post author

    Nice video. However, I'm facing an issue here when following the same procedure with my implementation. I need to extract information from a variable that i created that contains more than one value, its an array which will often have a different amount of items in it(dynamic). Am i able to loop through the contents of the array and have them show up as separate Actions? right now i have one action in the events summary and its Label contains a string of the contents of that array all in one. I really need to learn how to split it up and if its possible to record it into multiple actions in Google Analytics. I'm using WordPress and DuracellTomi's GTM plugin that loads up a pageAttribute data-layer that contains the array separated with commas. Looks like this: pageAttributes : ['tag', 'tag2', 'tag3'].

    Any help with this would be appreciated!

    Reply
  6. jaciel luis Post author

    elementVisibility is showing 2 times, why is that? I have a popup image that is shown everytime some1 visit a page. popup is activated via jquery after 2 seconds.

    Reply
  7. PixandCodes Post author

    Hi MeasureSchool and Julius. Is it possible to track tabs? or i just just duplicate this process on each jquery tabs that i want to track? TIA

    Reply

Leave a Reply

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