Install Google Tag Manager on AMP pages

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?

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.

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.

Tag

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

Trigger

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.

Variables

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.

Summary

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.

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
9 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Grigor
Grigor
4 years ago

Great video, Julian,
What is your opinion on collecting amp data in GA. Do you need to make a new Property or new view, or you can track amp and normal pages in the same view?

Grigor
Grigor
4 years ago

Great video, Julian,
What is your opinion on collecting amp data in GA. Do you need to make a new Property or new view, or you can track amp and normal pages in the same view?

Julian
4 years ago
Reply to  Grigor

you can track it in the same property

Anthony Calleja Photography

Hello, in google tag manager which tag should be selected to add javascript for amp pages? Could I have multiple script in one tag?

Julian
4 years ago

You can’t add normal JS to AMP pages

Anthony Calleja Photography
Reply to  Julian

I know that! I was referring to the Google Tag Manager. Which tag do you select for JS and which Trigger? Can you put more than one JS script on a Tag?

Julian
4 years ago

You can’t put JS onto AMP pages and therefore GTM doesn’t have a tag for it either.

Anthony Calleja Photography
Reply to  Julian

So what about schema for amp or rich snippets which is json-ld

Julian
4 years ago

you can put it directly on the AMP page https://www.ampproject.org/docs/fundamentals/discovery

Blog Categories

Join 30,000+ marketers getting exclusive resources and our latest content!

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.