- 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!



Không có nhận xét nào:
Đăng nhận xét