Tracking AMP Pages in GTM

AMP page tracking with Google Tag Manager

Earlier this year Google introduced AMP, or Accelerated Mobile Pages. These pages eliminate a lot of functionality on the web to deliver content to users in a light-weight and fast manner. In creating these pages however, you’ll notice one thing missing… Google Analytics.

Upon the release of the Google AMP standard, there was a new implementation style for Google Analytics to get things running on AMP enabled pages. However, for all of those already working with Google Tag Manager, this took us back to manual code implementation.

While we may have suffered through that for some time, now Google has made AMP pages available to be tagged through GTM. Below is a step by step guide for tracking AMP pages in GTM. This will walk through a WordPress implementation. If your site doesn’t run on WordPress, something similar is more than likely available through your CMS.

Google Tag Manager AMP Implementation

1. Install AMP Plugins

There are two plugins that will help you easily create Accelerated Mobile Pages on your WordPress site. The first is simply called AMP. Once installed and activated, all of your content will be available as an amp page. You can view it by simply placing /amp at the end of any one of your working URLs.

amp project plugin wordpress

After installing the AMP plugin, next up is getting an extension to the Yoast SEO plugin. First make sure you have the Yoast SEO plugin installed. If you don’t I highly recommend this plugin. It can make your SEO planning and improvement seamless. The extension for this plugin is called Glue for Yoast SEO & AMP.

yoast glue amp plugin

The Yoast Glue plugin pushes your AMP pages up a level, by allowing you to customize some of the color and layout. These options will be available under the main Yoast SEO plugin menu.

2. Creating an AMP GTM Container

Head over to your Google Tag Manager account. Once signed-in you can create a new container within your account. When you create this container you will notice a new option when selecting the type of container. Alongside Web, iOS, and Android is now AMP.

amp container selection in google tag manager

Since we want to track our Accelerated Mobile Pages in a way that can push to Google Analytics, select AMP, name your container and click to create it.

After creating the container a familiar, though noticeably different, popup shows giving you the code snippets you will need to place on your AMP pages. Unlike the container code for a standard GTM container, the AMP container has two separate pieces of code to place.

The first needs to be placed at the end of your <head> tag, and the second at the beginning of your opening <body> tag. Copy those to your clipboard and then head over to WordPress to insert your new GTM container.

3. Placing your GTM Container Snippets

Once you are logged-in to the back end of your site, you are going to need to edit some files in the AMP plugin. Navigate there by hovering over Plugins in the left navigation, then selecting Editor.

From there you will be presented with a similar view to the one below. In the upper right hand corner you will see a drop-down menu, where you will want to select AMP.

amp plugin editor wordpress

This will load all of the available files within the plugin. As they are listed down the right-hand side, you want to look for, and select the file named: amp/templates/single.php. This is where you will insert your container code. As stated prior, the first bit of code will go just before the end of the <head> tag and the second snippet will follow at the beginning of the <body> tag.

amp container placement in wordpress

Once that is complete you will want to test your container to make sure everything is in place, through the Google Tag Manager preview/debug mode.

4. Tracking Google Analytics for AMP in GTM

Now you are ready to implement Google Analytics for AMP pages through Google Tag Manager. This is an identical process to a standard Google Analytics tag creation for a regular website container.

Simply click to create a new tag in your GTM AMP container, and select Universal Analytics as your tag type.

From there you will want to fill out your UA number for tracking, and select pageview for the type of track event. You can enter different custom dimensions and metrics or a variety of other options in the advanced settings area if applicable to your site.

google analytics code amp gtm

From there, more over to select your trigger. There is already a built-in All Pages trigger which will work perfectly for what we need. We want this to fire on all pages (all AMP pages that is).

all pages trigger amp gtm analytics

AMP Pages Summary

Once this is selected, you can preview and debug, then publish. That’s it. Simply right? This will now allow you to set up your AMP pages through WordPress and move all the way to tracking them separately with Google Analytics and Google Tag Manager.

I like to keep my AMP pages flowing to the same Google Analytics property as the rest of my site. You may want to break it out into a separate property, but instead I would encourage you to just create a new view and filter specifically on AMP pages only. This will allow you to have them rollup into your master view, while being able to quickly see them separately too.

Chris Kujawski

Founder and instructor at Digital Metrics Guru.

A passionate and driven digital marketer, specializing in Google Analytics, Tag Manager and Data Studio. A qualified expert in Google Analytics and Adwords, with more than 10 years experience delivering sound solutions to clients worldwide.

View all posts

1 comment

Popular Videos