- In this video, I’m gonna show you
how you can integrate Google Tag Manager
on a accelerated mobile webpage,
also known as AMP.
All and more, coming up right after this.
(upbeat electronic music)
Hi there, and welcome to another video of measureschool.com,
where we teach you the data-driven way of digital marketing.
My name is Julian.
And on this channel, we publish reviews of marketing tech,
tips and tricks, and tutorials for the modern marketer,
just like this one.
So if you haven’t yet, consider subscribing.
Now recently, Google Tag Manager
has announced support for the AMP program.
Now, AMP are these super fast loading webpages
that are written in a special format,
so Google can render them fast on mobile devices.
But since it strip out most of the JavaScript
that you would normally find on a webpage,
Google Tag Manager was not really suitable
or not installable really on these webpages.
But now, that has all changed
because we have now a specific container
that lets us integrate Google Tag Manager and pages.
So let’s take a look on how to integrate this.
All right. Today, our journey starts here
at the ampproject.org,
where you can find more information
about accelerated mobile pages.
If you don’t know what they are yet,
I would actually recommend another YouTube video
of the Google Chrome developers team
that explains AMP pages in plain English.
But once you’re ready to actually build
an accelerated mobile pages,
you can head over to ampproject.org,
where you’ll find the documentation,
but also some examples that will show you
how to specifically build a accelerated mobile page.
Now for us, it’s very interesting
to look into the references,
and have a look at the AMP analytics component.
Now this component is the heart of how
tracking is deployed on an accelerated mobile page.
And Google Tag Manager also makes use of this component.
So if you wanna dive in deeper
into the technical specifics,
then check out this module.
Now, today we wanna install Google Tag Manager
on an accelerated mobile page,
which is taken from the examples of the
Accelerated Mobile Pages Project.
And here you can see it’s really fast loading.
And if we wanna make sure
that it’s actually valid mock-up,
we can always append the #development=1 to the URL,
and it will give us a message in our JavaScript console
that the AMP validation was successful
or if there were any errors.
So how would we install Google Tag Manager on it?
Well, let’s open up a Google Tag Manager container first.
As the container type, we’ll choose AMP.
And we are greeted with our two snippets
that we need to install.
Now these snippets are different from the web version.
Most notably, we make use of the AMP analytics component.
We need to install these two snippets,
one in the head section,
and one on the body section of our mock-up.
So let’s do this.
Let’s copy this here.
And I’ve opened up my HTML of my page in a text editor,
and I’ll paste my code in here,
and the other code beneath the opening body text.
Let’s save this, go back to our page,
reload our page,
and we get a bunch of errors here.
This is probably due to our new container,
which first needs to be initialized,
so let’s do this really quickly.
And it seems we are all good on the validation side.
Now, the Tag Assistant still shows us an error,
but this is something I don’t really know
why it’s showing me this error,
because we have a valid account ID.
So, I tend to ignore the Tag Assistant
for these AMP pages mostly,
but maybe they will fix it at some point.
Let’s take a look at how we can deploy a tag through
our new Google Tag Manager container,
and if it’s really the same as the web content.
Let’s go over to tags,
and build our first Google Analytics Tag.
We can choose our tag type here.
We have Google Analytics available,
but if you scroll down,
the list is a little shorter than what we have
in the web version.
And most notably, the custom HTML option is missing,
and this is because they are predefined vendors
that work with this
AMP analytics component at the moment,
and there’s no way to install any kind of
JavaScript on the page.
If you want to have a custom tag installed,
it needs to be a custom image tag.
So let’s go with universal analytics for now,
and enter our tracking ID,
set our trigger,
and go into Preview and Debug mode.
It’s reload our page,
and we see everything seems fine,
but where is our preview and debug console?
Well, on AMP pages,
you cannot open the preview and debug console,
but your browser is still in the preview mode.
So tags get deployed normally.
We just don’t have any visual confirmation
through our preview and debug console.
We would need to take a look at other outside tools
such as the Tag Assistant,
which still shows us an error.
But Google Analytics was apparently deployed,
so we should be able to see this also
in our real time reporting.
Yes, there was just a page view generated on our page.
So this seems to work fine.
What if we wanted to install event tracking on this page,
for example on this add to cart button.
Let’s go over to Google Tag Manager,
and first build our trigger.
Now when we open our trigger type menu,
we see that it’s quite different
from what we have in the web version.
We have some clicks, but where is our link click trigger?
We have still page views,
and then we have new trigger types,
such as scroll and visibility.
Very interesting,
because they are not available in the web version.
But maybe at some point, we’ll have them as well there.
We won’t be able to get into
the scroll and visibility tracking today.
We’ll just take a look at how to implement
click tracking for now.
And we see that our click tracking
and the configurations here
are different from the web version as well.
We can only select by CSS Selector.
So we would need to know how our HTML is mocked up.
Let’s find that out.
We see here we have a ID called add to cart,
which we can use for the CSS Selector.
That should do it.
And now let’s build our tag.
Save this all.
Go back into our Preview and Debug mode,
refresh that,
refresh our page,
and I click on the add to cart button,
go over to analytics,
look into our real time reporting,
and it seems to track fine as well
on our accelerated mobile page.
So this is how you can install click tracking
onto your accelerated mobile page.
So we already saw that tags have differences,
triggers have differences.
What about variables?
Well, variables are also very different
from what we have in the web version.
Once for all, we can see the built in variables are fewer,
but there are some new ones added to them.
And in our User-Defined Variable,
if you go onto the types,
we see that
there are fewer options here,
most notably, whereas our data layout variable.
Well, this is probably the biggest difference
in an accelerated mobile page container
of Google Tag Manager.
The data layer doesn’t really exist.
So the only way to push custom data
to Google Tag Manager and then to your tags
is actually through AMP variables.
Now how to push them,
this is something to be discussed in another video.
We can’t really do it right now.
Just be aware that the data layer
is not the underlying structure
of Google Tag Manager on AMP pages,
which also means that the triggers
rely on a different foundation,
which is not tied to data layer events,
but rather to the URL.
So there are a lot more intricacies
about the deployment of tracking
on accelerated mobile pages,
but this is all the time we have to cover
this topic in this video.
I just wanted to give you a quick overview
on a Google Tag Manager deployment
on accelerated mobile pages.
So there you have it.
This is how you can implement Google Tag Manager
on an accelerated mobile page.
If you have any questions,
please leave them in the comments below.
And if you haven’t yet, consider subscribing.
We publish new videos every Wednesday.
My name is Julian, until next time.
(upbeat electronic music)