How to Use Google’s Tag Manager on Accelerated Mobile Pages

Isn’t it great when things come together?

Google’s Tag Manager (aka GTM) was launched in 2012. It allows marketers and business owners to collect measuring and marketing data for their websites and apps without having to go through a web developer.

You work with the GTM instead of tweaking the code directly on a website. Changes, adjustments, and additions can be made quickly and without any special knowledge of scripts.

The Accelerated Mobile Pages (aka AMP) Project is an open source program unleashed just this year. It’s a stripped down version of HTML that loads up to 4x faster and consumes up to 10x less data than non-AMP pages.

Because it operates on a limited set of allowed technical functionality, Google claims AMP is15-85% faster than traditional web pages. It’s all about providing a blazingly fast mobile experience.

GTM. AMP. The ultimate power couple. Here’s how to bring them together in as straightforward a way as possible.

The Google Tag Manager

The GTM – as the name implies – manages tags, snippets of JavaScript that send information to third-parties from either an app or website. With it, adding Google Analytics, or Adwords Conversion Tracking, or Doubleclick Floodlight is fast and easy for virtually anyone.

To start working with GTM, you must first add a custom tracking code (much like you did to set-up Analytics on your site). This container tag lets you create, manage, and debug all the tags on your site from one convenient location.

Give it a container name (usually your domain or URL address), and select either Web for a website, iOS or Android for an app, or AMP to use it on accelerated mobile pages (more on that in a moment).

Click Create. C’est fini.

After reading and accepting the Terms of Service Agreement (you do read those, right?), you’ll receive the code that must be copied and pasted in the <head>, and immediately after the opening <body> tag of each page.

It may be a bit labor-intensive upfront, but once that lovely little snippet is on each page, you can add and remove tags to your entire site from one location. Create, adjust, and manage.

Variables – receive and store information for the tags and triggers (you could create a constant variable and give it a value of your Google Analytics tracking code, for example, so you never have to find that detail again)

Folders

It may take a little while to get completely comfortable with it, but GTM is yet another free but dynamic tool from Google that quite literally puts your entire online empire in your hands. It comes with a jam-packed set of tags ready to go right out of the (virtual) box, as well as the ability to create and tweak your own for whatever you need. The platform plays well with a wide range of third-party applications besides other Google tools.

Accelerated Mobile Pages

Accelerated Mobile Pages provide a stripped-down but souped-up version of the HTML used to build web pages. With limited tags, streamlined CSS, standardized JS elements, and designed to be cached, it delivers a faster mobile experience than ever before.

Mobile-friendliness is a ranking factor. Speed is a ranking factor. AMP speaks to both of those.

The WordPress AMP plugin will automatically generate AMP-compatible versions of posts once activated. There’s also an equivalent Drupal module available. But if you have a lot of mobile traffic (and you probably do… check your Analytics demographics to confirm), you may want to create a dedicated AMP version of future posts.

Get Discovered

Making your AMP pages discoverable is pretty straightforward using <link> tags in the <head>:

Add <link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”> to the non-AMP version

On the next page, you’ll find the <head> and <body> codes that must be added to each page of your AMP site. Copy and paste.

You can verify the container installation and troubleshoot any issues with the Preview function found by clicking the arrow beside Publish in the top right corner of the main dashboard.

If everything is running smoothly, the first thing you’ll want to do is create a Google Analytics tag for your new AMP container.

On the main dashboard, select the Tags tab on the left, click the red “New” button, and choose Tag Configuration. From the list that slides in from the right, select Universal Analytics (it’s the very first one).

Enter your Analytics Tracking ID (Google recommends creating a separate Analytics property for AMP; your ID is found under Admin > Property > Tracking Info > Tracking Code and looks like UA-XXXXX-X), name the tag (Analytics or something similar), and select All Pages under Triggering. Click Save in the top right. Presto. Your first tag.

There are currently 25 AMP-supported tags ready to go, including Analytics, Adwords, and DoubleClick, and you can always create your own once you know your way around a bit better.

AMP Triggers

Triggers designate where and when tags will be fired (in this case, your Google Analytics tracking). Each tag must have at least one.

Go to Triggers > New > Trigger Configuration. There are five types of available AMP triggers:

Page View – can be either All Page Views, or Some Page Views (for which you’ll then need to input what pages you want to be triggers)

Scroll – triggers when either a horizontal or vertical scroll hits a certain percentage threshold. You can include multiple thresholds separated by commas (e.g. 33, 66, 99, or just 66)

Timer – triggers whenever someone stays on a page past the designated interval (in seconds). The Limit field indicates the maximum number of trigger loops… just leave it blank for unlimited. If you want to cap it – and this gets a bit confusing – enter a multiple of your set Interval (e.g. 30 second interval, and you want it to fire up to 5 times, then enter a Limit value of 150).

Visibility – This one fires when an element (such as an ad) is visible in the browser for a set period of time. You need the Element ID, Minimum Percent Visible (enter at least 1, or the trigger will fire even when the element is not visible), Maximum Percent Visible, Minimum Continuous Time (in milliseconds), and Minimum Total Time (also in milliseconds).

Setting everything up is not hard. Mastering all the subtle nuances will take some time. The AMP integration is somewhat limited so far, but better than when it wasn’t included at all, so we’re heading in the right direction.

Give yourself time to come to grips with everything. Set up your basic Analytics tag today, and start experimenting tomorrow. It’s all about baby steps.

Have you used the Google Tag Manager with AMP yet? What are your thoughts so far? Leave your comments below:

Note: The opinions expressed in this article are the views of the author, and not necessarily the views of Caphyon, its staff, or its partners.

Author: Mo Harake

Mo Harake brings over 12 years of ecommerce and digital marketing experience leading brands like FIJI Water, 7Diamonds, Kill Cliff and venture-backed startups to his work as Managing Director of Stray Digital. For more on his approach to ecommerce, content marketing and growth hacking, visit him on LinkedIn or at the Stray Digital blog.
View all posts by Mo Harake

5 thoughts on “How to Use Google’s Tag Manager on Accelerated Mobile Pages”

I have a form on my amp website right now it is not functional, all i want to send emails from that form whenever any user fills that form admin of the site will receive the email with all the filled information. Let me know AMP pages support mailto function ? Please suggest me how to get all of user’s details in my email id from taht AMP Page?

My question is similar to using GTM after adding the custom tracking code how do you handle if the site is also using another tag manager too like Adobe DTM? How do yo prioritize the firing order and avoid tracking issues?

Brilliant, I was just reading another article about GTM and AMP and I didn’t understand a thing (and I’m quite an advanced GTM user), it was a whole jumble of information with snippets of code and no clear step-by-step instructions. This is the complete opposite, such a pleasure to read and clear guidance on how to set up GTM for my AMP sites. Thank you, Mo Harake!