- In this video, I'm gonna show you
how you can track popups, or modal dialogs
on your website with the help of Google Tag Manager.
All and more coming up.
(upbeat music)
Hey there and welcome back to another video
of MeasureSchool teaching you the tech tools and tactics
of today's digital marketing world.
Now today we wanna take a look at a new tracking technique
that has recently been made possible
by a new trigger within Google Tag Manager.
The Element Visibility trigger can now detect
whether something is visible on the screen
of the user's browser, and we want to use this today
to check actual popups, or modal dialogs,
that you might have on your website as well.
Now we got lots to cover, so let's dive in.
Alright, back in our demo shop,
we today wanna track when somebody clicks
on this Quick View button, and our popup
with our Quick View actually opens up.
Again, if I click here on Quick View,
the page doesn't reload, it just opens up
this new overlay or popup window that you see right here.
So how can we track this with Google Tag Manager?
Let's go over to Google Tag Manager
and take a look at our available triggers.
Go here on New.
And then click on Trigger Configurations.
These are the different types of triggers
that we can deploy.
Now, the one that we will use is a new one,
the Element Visibility trigger.
Now this trigger will actually detect
whether something is visible in the view part of the screen.
All you need is a way to detect
whether an element is visible or not.
All you need is to tell this trigger
to have a look at a certain element,
and if it's visible to the user.
In order to do this,
you need to either tell Google Tag Manager
the ID of this element, or the CSS Selector.
Now you need to be able to be a little bit familiar
with HTML and CSS in order to configure this correctly.
I'm gonna link up some resources down below
that you can check out to learn all about CSS Selectors.
Now the first thing that we need to do
is go back to our page and actually inspect the element
that is now visible to us, so this is the second state,
the state when your element is actually visible.
And you select the element once you see
that you have your developer tools open,
in this Elements pane,
you will see the document object model.
Now, here we can hover over the different nodes
and select the node that we want to observe.
Now there are different methods of actually doing this.
I always try to go as high up as possible
and see the node that actually appears on the screen.
So once I close this, I see that this node actually changes,
and once I go back to Quick View,
we have a few things that change right here.
And this is what we want to observe or monitor
throughout user being on the site,
if this changes, and then fire a tag.
Now we can see here that this element
actually doesn't have an ID, and therefore we need to
make use of this CSS Selector method
that we saw on our trigger right here.
So what do we implement here?
Again, you need to know a little bit about how to read HTML,
but also then select an element with a CSS Selector.
But it closely models a command
that we can try out in our console itself.
And this command is document.querySelectorAll,
and here we can input the query selector
with these parentheses and quotation marks.
So here we have our class, and if you would say
this is one class, 'remodal-is-opened',
just gonna copy this here.
And implement this here.
I'll put a dot in front of it
because that's how you select classes.
I press enter, and I see I get three elements back
that were found, these three elements here.
Now, for me, this is not specific enough,
because I actually want to try
to keep this down to one element
that I should see if is in the viewport or not.
Otherwise, there might be some unforeseen effects
to this trigger, and therefore I will look up
what else could I use.
So here we have the 'remodal-wrapper' as well,
so I'm gonna see if that's unique.
Let's copy this and put it into our CSS Selector.
Press enter, and we see, okay, there's only one element
that would be observed now, this is visible to the user.
And, if I click on this X button and repeat the command,
I can do this by pressing the up arrow, pressing enter,
I see now this element is still there,
but it has slightly changed
because the class changed to 'remodal-is-closed'.
Now this is a strong indicator that we can use this
as a CSS Selector, because the element is on the page.
Once it changes, our trigger could detect this
and then fire our event.
So let's take this CSS Selector, copy this,
and go back to our Google Tag Manager,
and here we can implement our CSS Selector, just like that.
And we have different other options.
When do we want to fire this trigger?
Once per page, or once per element.
Now we have different elements here on this page,
and therefore we should choose the once per element option.
Then we can choose how much
of the element should be visible.
50% is okay because it will be on the whole screen anyways.
And then the important option that we need to take
is the Observe DOM changes.
Now you can also set a time
that this should actually be visible, so if you want to
get rid of any mistakes when somebody clicks on View,
and then right away closes this, you could specify a time.
We won't do this for now,
and we want to Observe the DOM changes,
so the changes that are actually happen on the website.
Now this brings up this little warning here,
and it warns you that monitoring these different elements
might result in a diminished site performance.
Now this has nothing to do with the page speed itself,
how long it takes to actually load the page,
but after the page has loaded,
and you have maybe multiple of these triggers running,
Google Tag Manager needs to monitor all of these,
and therefore site performance might suffer.
So just be aware of that.
For us, it's not a big issue because we are only looking
at really one element on the page, and I'm monitoring that.
In the end, you can also configure a filter here to say
that this should only fire on certain pages,
or on certain elements,
or when there are certain products, for example.
This is all configurable with variables.
Now we don't have to do this
because we are really specific already.
And in the end, don't forget to give this a name.
So, visibility and ... That should do it, let's save this.
And now we can go into our preview in Debug mode.
And first of all, see whether our CSS Selector
was configured correctly.
Go back to the page, reload that.
Gonna click on the Quick View,
and we see our gtm.elementVisibility has now fired some data
into the data layer right here.
So this seems to work.
Let's try this out on a different Quick View.
And unfortunately it doesn't fire our elementVisibility.
That might be something in the trigger,
let's see what I've done wrong here.
Actually this method should be chosen
if you want to fire this every time
somebody clicks on the Quick View button.
So let's save this and try this out again.
Refresh, refresh here.
And we have our elementVisibility.
We have our elementVisibility again.
So every time somebody clicks on the Quick View,
this should now be something that is transferred
in the data layer, and now we just need to
fire a tag upon this.
So all we need to do is to configure a tag.
We can, for example, use a Google Analytics event tag.
Configure this tag with a Universal Analytics code.
This will fire an event, and we'll input a category.
An action.
Now obviously, we could also fill this out
with some more useful information
such as which product was actually opened.
You could pull, for example, the name here.
This is a bit more complicated
because you would need to know
how to pull this out of the gtm.element data layer.
So here we have our gtm.element,
and you could pull this definitely out of this data layer,
but this is for another video.
So we'll just be fine with this.
And then we just need to enter our Google Tag Manager code.
We could do this through a variable,
or right here in the tracking ID.
That's something we found in our Google Analytics account,
under the Admin section right here.
Let's use that, and enter this right here.
Alright, and then we need to attach our trigger.
Save this, refresh our page, refresh our page here.
And every time somebody clicks on the Quick View,
we can see our event now fires.
This should also be possible to see in the real-time events.
So here we have our Quickview.
This should also be then transferred under the Audience ...
No, the Behavior tab, and also Events.
And this should show up later on, after about thirty minutes
it takes to actually show up right here.
So this all works fine.
We have correctly configured this trigger.
Now, in order to spin this through the end,
you simply need to click on the Publish button here,
and submit a version.
Give it a name.
And publish this so it's live on your website
and you're, from that moment forward,
tracking these Quick View popups on your website.
Alright, so there you have it,
this is how you can track popups,
or modal dialogs, via Google Tag Manager
with this new Element Visibility Trigger.
Now, if you have any questions,
then I'd love to hear from you in the comments below.
And if you like this video, then give us a thumbs up
and subscribe to our channel right over there
because we are bringing you new videos
just like this one every week.
Now my name is Julian. Til next time.