Tag setup for AMP

The Accelerated Mobile Pages (AMP) project is an open-source web platform that helps to improve the performance of your web content. AMP includes built-in support for the Google tag and Google Tag Manager. This guide describes how to set up Google Analytics for AMP pages.

Installation

The Google tag lets you install Google Analytics, Google Ads, and other Google products on AMP pages. Google Tag Manager sets up an AMP container and gives you the ability to create advanced configurations and deploy third-party tags from the Tag Manager interface.

Select your platform preference from the following buttons:

Tag Manager

To install Tag Manager for AMP:

  1. Create an AMP container in Tag Manager.
  2. Add the Tag Manager code to your AMP pages.
  3. Configure tags in your Tag Manager container and publish.

Once Tag Manager is installed on your AMP pages, you can deploy any supported tag from Tag Manager's interface.

Create an AMP container

Tag Manager features an AMP container type. Create a new AMP container for your project:

  1. On the Accounts screen, click More Actions (more-vert) for the account you'd like to use.
  2. Select Create Container.
  3. Name the container. Use a descriptive name, e.g. "example.com - news - AMP".
  4. Under Where to Use Container, select AMP.
  5. 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, and you can refer to the next section for further guidance.

Add the Tag Manager code

After you create your new AMP container, the Install Google Tag Manager screen will appear. Tag Manager provides two code segments. Copy the code segments so that they appear on your AMP pages.

The first code segment 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>

The second code segment configures amp-analytics to use Tag Manager. Place this code immediately after the opening <body> element. Replace GTM-XXXXXX with your Tag Manager's container ID, or copy and paste the entire code segment from the Tag Manager user interface.

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX" data-credentials="include"></amp-analytics>

Configure your container and publish

When your pages have the container code 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:

  1. Click Tags > New.
  2. Click Tag Configuration and select the tag type from the list of supported AMP tags.
  3. Configure the tag with information provided by your tag vendor.
  4. Click Triggering and add one or more event conditions that will cause the tag to fire.
  5. 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:

  1. Click Variables.
  2. Under User-Defined Variables, click New.
  3. Click Variable Configuration and select AMP Variable.
  4. In the AMP Variable Name field, enter the field name (e.g. "color".)
  5. Give the variable a descriptive name (e.g. "AMP Variable - color".)
  6. Click Save.

AMP tags with Tag Manager Support

Troubleshooting

Use amptagtest.appspot.com to validate your tagging setup or you can manually ensure that the cid value is consistent across domains by doing the following:

  • Make sure to clear cookies or use Incognito mode.
  • If cid is not found in a Google Analytics cookie, it can also be observed in your web browser's Network tab. Search for collect request, and the payload should contain a cid value.

  • Once you have passed from the Google CDN to the client website, the cid and the gclid value should be passed via URL decoration:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • The final landing page should still have the same cid value as in the initial landing page.

  • Be careful with redirects and domain changes between the canonical page and non-AMP landing pages.