AMP & Tag Manager setup guide
The Accelerated Mobile Pages Project (AMP) is an open-source web platform that helps to improve the performance of your web content. AMP includes built-in support for Google Tag Manager. This document describes the recommended way to set up Google Tag Manager on AMP pages.
To install Tag Manager for AMP:
Create an AMP container in Tag Manager.
Add the Tag Manager snippet to your AMP pages.
Configure tags in your Tag Manager container and publish.
Create an AMP container
Tag Manager features an AMP container type. Create a new AMP container for your project:
On the Accounts screen, click More Actions () for the account you'd like to use. Select Create Container.
Name the container. Use a descriptive name, e.g. "example.com - news - AMP".
Under Where to Use Container, select AMP.
Click Create.
Your container is now ready. The next step is to install the Tag Manager code on your AMP pages.
Tag Manager will provide information on how to best install the code snippet, and you can refer to the next section for further guidance.
Add the Tag Manager snippet
After you create your new AMP container, the Install Google Tag Manager screen will appear. Tag Manager provides two code snippets. Copy these code snippets so that they appear on your AMP pages.
Note: To access the code snippets later, click the container ID number at the top of your workspace overview page, or click Admin and then Install Google Tag Manager.
The first snippet adds the amp-analytics component to your AMP page. This code is placed at the end of your page's <head> section, and should only appear once on the page.
<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Important: Only add this code to your page if it does not already exist, and ensure it only appears once per page.
The second snippet configures amp-analytics to use Tag Manager. Place this code immediately after the opening <body> element. Replace GTM-CONTAINER_ID with your Tag Manager's container ID, or copy and paste the entire snippet from the Tag Manager user interface.
<!-- Google Tag Manager --> <amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>
Configure your container and publish
When your pages have the container snippet correctly installed, they will be able to fire tags deployed from Tag Manager. The next step is to create tag configurations and publish the container.
To create a new tag:
Click Tags New.
Click Tag Configuration and select the tag type from the list of supported AMP tags.
Configure the tag with information provided by your tag vendor.
Click Triggering and add one or more event conditions that will cause the tag to fire.
Name the trigger and click Save.
Repeat these steps for any additional tag configurations. When your container configuration is ready, publish your container for the changes to take effect.
Page variables
Tag Manager can capture AMP variables and use them in tag and trigger configurations. For instance, a page that sells shoes might have variables that describe the properties of a particular shoe. These values can be used to create Tag Manager variables:
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include"> <script type="application/json "> { "vars" : { "type": "shoes", "color": "red" } } </script> </amp-analytics>
To create a user-defined variable in Tag Manager that captures the color variable from the above code:
Click Variables.
Under User-Defined Variables, click New.
Click Variable Configuration and select AMP Variable.
In the Amp Variable Name field, enter the field name (e.g. "color".)
Give the variable a descriptive name (e.g. "AMP Variable - color".)
Click Save.
Was this helpful?
How can we improve it?
Last updated