tabler logo Tushar Gupta's Blog GTM Audit Tool
tgupta logo Tushar Gupta's Blog

Implementing Google Analytics on AMP pages using Google Tag Manager (GTM) - A step by step Guide

August 06, 2020 in Google Tag Manager Main amp

AMP or Accelerated mobile pages is an open-source web framework maintained by OpenJS Foundation. It is a stripped-down (lightweight) version of HTML used to build web pages for static content that renders fast.

Google search algorithm takes the mobile-first index takes precedence over Google’s traditional desktop index and will serve the most appropriate results based on the device being searched on. Most of the content-heavy websites invest heavily on AMP pages to rank better on search engines.

Google Analytics implementation on AMP pages via Google Tag Manager is different from the traditional pages and requires some native steps to make it work. Having said that, it's fairly straightforward and once it's set up, you can scale the same on more pages.

In this article, I want to go over step by step instructions on how to set up Google Analytics on AMP pages via Google Tag Manager


1.1 Creating the AMP GTM container

To implement GA on AMP via GTM, the first step is to create a GTM container to be used in AMP pages.

Here are the steps:

  1. Go to Google Tag Manager console
  2. Click on three dots on the top right of your account name and click on Create container
  3. Create a new container
  4. Select the target platform as AMP
  5. Give a name and click create

AMP container tgupta blog


1.2 Add the AMP Tag Manager snippet on the AMP pages

Once you have successfully created the container, you can start by installing the container on your AMP webpage. To access the code snippets, click the container ID number at the top of your workspace overview page, or click Admin and then Install Google Tag Manager.

There would be two snippets that are required to be placed in your AMP pages. Please note both of the snippets are important, so make sure both are placed correctly. Once you click the container ID number at the top of your workspace overview page, the code would look like something below

Place the first part with the script component in the head, and the second part with the amp-analytics component in the body.

Important: Only add the script tag code to your page if it does not already exist, and ensure it only appears once per page.
AMP sniipet GTM

What is an amp-analytics component?

The amp-analytics component captures analytics data from an AMP document. It specifies a JSON configuration object that contains the details for what to measure and where to send analytics data. It can report to an in-house or integrated third-party solution.


2 Setting up the google analytics pageview tag

The pageview tag configuration is exactly similar to traditional Google Analytics for normal websites.

Here are the steps:

  1. Go to Google Tag Manager console
  2. Open the container which you have created in step #1.1
  3. Click on tags on the left sidebar and click New
  4. Select Tag type as Google Analytics: Universal Analytics and put in your tracking id, and track-type as a pageview.
  5. Select the tag trigger as All pages and click Save. Your Pageview tag should be created successfully
  6. When your container configuration is ready, publish your container for the changes to take effect.
Note: There is no Google Analytics Settings variable in AMP GTM container.

AMP pv tag GTM tgupta

3. Implementing the JSON object (similar to datalayer) and assigning the values back to GTM variables

The JSON object in AMP pages can contain the data in the form of JSON objects which you need to insert either on each page or you can also define in as a remote configuration file. They have to be included inside the GTM snippet as shown below

AMP vars

In summary, the variables defined in the page configuration file will take precedence over everything if the names are same.

In the AMP Google Tag Manager container, you can bind the references to these AMP Analytics variables using the AMP variable type. The name of the variable must be exactly similar to the variable defined;

AMP tag vars AMP tag fn vars

4.1. How the Client id is generated in AMP pages

For AMP pages, things are a bit different. Pages can be viewed via a browser in multiple ways causing Client ID generation and management to vary. Because of this, site/app metrics are impacted.

The various scenarios on how the client id is stored is as follows. These are ways on how a user can interact with your AMP pages

  1. Google Search : The Client ID is stored on google.com because google.com is the 1st party in this case. The Client ID passed from the AMP viewer to the page served off of cdn.ampproject.org so that it can be transmitted via AMP-analytics
  2. Proxy/Cache : The Client ID is stored on cdn.ampproject.org. When user revisits (within some time), the Client ID is reused. cdn.ampproject.org is the 1st party in this case.
  3. Direct AMP : The Client ID is stored in cookie (_ga) and is used/reused regardless of whether the ID is in traditional or AMP format.
  4. Non-AMP : The Client ID is stored in cookie (_ga) and is used/reused regardless of whether the ID is in traditional or AMP format.

Read the full explanation of the AMP client ids and their caveats from Google .


4.2. Google Analytics session unification for AMP.

AMP pages are served from an AMP cache domain which is different from your site domain. To track a user journey across an AMP cache and your site pages, you can use an AMP Linker; an amp-analytics feature that joins user sessions using AMP Client ID as a user identifier.

AMP Linkers decorate outbound links from AMP cache pages with an AMP Client ID. Pages tagged with Google Analytics then retrieve the AMP Client ID from the URL query parameter and join the user session using the AMP Client ID as a user identifier.

Step 1: AMP GTM Container

Add a Conversion Linker tag to your AMP Container and select ‘Enable Linking across domains’ and ‘Enable linking to Google Analytics Client ID’.

CL image

Step 2: Web GTM Container

In your Google Settings variable in Web GTM container

  1. More Settings > Fields to Set.
  2. Click + ADD FIELD.
  3. Set the Field Name to allowLinker, and set Value to true.

AL image
Here is the link to the Google Article .

5. Preview/Debug the AMP GMP container.

This is a bit tricky part. AMP version of the Google Tag Manager does not have the fancy GTM Debug mode/console which we are used to with regular Google Tag Manager.

Having said that, you can still Preview the changes in you AMP Google Tag Manager, as GTM for AMP works in preview mode.

Here are the steps:

  1. Enter the preview mode in your Google Tag Manager console that you have created for AMP
  2. Open your AMP site in a new tab on the same browser.
  3. Open Dev tools > Network and you can see the hits being sent to GA. (Filter by collect in Network to just see the Google Analytics hits). Short Video is attached below
Note: There is no Debug mode in AMP GTM container.

AMP container tgupta blog

6. Code Download - AMP page, Google Tag Manager (GTM) container and JSON object.

Here is the link to a Github Project, which contains the AMP sample page that shows how to include GTM, the JSON vars.

It also contains the AMP GTM container export, that shows how to set up a pageview event, the dimension and how to pick up values from AMP JSON object. It also has the Conversion Linker tag that is used to unify the session.

You can import the container if you want to have a look into the UI. The GA id's in there are fake. Please leave a star in the GitHub repo if you like it ;)

Click here to view the source code on GitHub




Related topics