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:

Google tag

The AMP implementation of gtag.js uses the amp-analytics framework to give you the ability to instrument analytics on your AMP website. Data can be sent from AMP pages to Google Ads, Google Analytics, and other Google products from the same gtag.js implementation.

Installation

To configure gtag.js on an AMP page, first ensure that you've included the amp-analytics component within the <head> tag on the page:

<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

Next, add the Google tag to your AMP page as a JSON component within the <body> tag on the page. Replace <TARGET_ID> with the tag ID for the products (e.g., Google Ads, Google Analytics) to which you want to send data:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

To configure multiple products in the Google tag, you do not need to install the entire tag from that product. You only need to add the destination ID to a separate config command.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

For more information, see the amp-analytics documentation.

Event triggers

To send specific data to your products, configure triggers based on events such as clicks. Triggers for gtag.js in AMP follow the same JSON patterns as other amp-analytics trigger configurations.

This example demonstrates how to send a click event to Google Analytics. The selector value is a CSS selector that allows you to specify which element is targeted. The on value specifies the type of event, which in this case is a click event. In the vars section, specify the type of event in event_name and add additional parameters as necessary.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

In addition to the recommended events, you can specify your own custom events.

The domain linker enables two or more related sites on separate domains to be measured as one. To specify the domains that should be linked, use "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

The capability to link to your canonical domain from the AMP cache is enabled by default. To turn off the ability to link domain traffic, add "linker": "false" to the config parameters:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Complete example

This code example illustrates a complete working demo of an AMP page that creates a single AMP page and sends a button-click event to Google Analytics when the button is clicked. Replace <TAG_ID> with a valid tag ID:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

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.