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 Google tags.

Installation

The global site tag installation allows you to install Google Analytics, Google Ads, and related products on AMP pages. The Tag Manager installation sets up an AMP container and gives you the ability to create advanced configurations and deploy third-party tags from the Tag Manager interface. This guide describes how to set up Google Analytics for AMP pages.

Select your platform preference from the following buttons:

Global site tag

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

Installation

To configure gtag.js on an AMP page, the first step is to ensure that the amp-analytics component has been included inside your page's <head> tag:

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

Next, install the global site tag. Add the global site tag code to your AMP page as a JSON component, inside the page's <body> tags. Replace <TARGET_ID> with the relevant Google Ads Conversion ID, DoubleClick Advertiser ID, or Google Analytics ID:

<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 additional products in the global site tag, you do not need to install the entire tag from that product. You only need to add the target ID to the config object. In this example, an AdWords conversion ID is added to an existing Google Analytics configuration. Replace <AW-CONVERSION_ID> AND <GA_MEASUREMENT_ID> with your own product values.

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

See the amp-analytics documentation for more information.

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 suggested list of events, you are also able to specify your own custom events.

Link domains

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",
        {: "<strong> }}"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 <GA_MEASUREMENT_ID> with a valid product 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": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_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.