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
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:
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.
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.
The pageview tag configuration is exactly similar to traditional Google Analytics for normal websites.
Here are the steps:
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
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;
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
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.
Add a Conversion Linker tag to your AMP Container and select ‘Enable Linking across domains’ and ‘Enable linking to Google Analytics Client ID’.
In your Google Settings variable in Web GTM 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:
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 ;)