In this video, you are going to learn how to integrate Google Tag Manager on Accelerated Mobile Pages.
There are quite a few differences in this implementation to the handling of GTM on normal web pages, so let’s take a look at those…
The AMP Project: https://www.ampproject.org/
AMP Guides: https://www.ampproject.org/docs/guides/responsive_amp
Accelerated Mobile Pages Via Google Tag Manager (Simo Ahava): https://www.simoahava.com/analytics/accelerated-mobile-pages-via-google-tag-manager/
Googles official announcement: https://analytics.googleblog.com/2016/10/google-tag-manager-giving-mobile.html
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. 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.
What is AMP?
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.
Install GTM on AMP Pages
So how would we install Google Tag Manager on it? Well, let’s open up a Google Tag Manager container first.
Create an AMP Container
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.
Copy AMP Code to HTML Editor
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.
Install GTM Tags on AMP Pages
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.
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 reloading 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.