Add Analytics to AMP pages

Accelerated Mobile Pages (AMP) is a platform used to build web pages for static content that renders fast. AMP includes an <amp-analytics> element that enables measurement of user interactions, and it has built-in support for Google Analytics.

Basic setup to measure page views

To create a basic installation of Google Analytics on an AMP page, copy this code snippet and replace <GA_MEASUREMENT_ID> with the property ID you would like to use. (Find your Google Analytics ID.)

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

How it works

The <amp-analytics> element is an extended AMP component and is explicitly enabled as a custom-element in a script tag.

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

The <amp-analytics> element block is configured to enable support for Google measurement products. Set the type attribute for <amp-analytics> to "gtag" (to enable gtag.js support) and the data-credentials attribute to "include" (to enable cookies.)

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP does not allow any JavaScript beyond its own approved libraries, so configuration is instead performed with JSON. A gtag_id property with a valid <GA_MEASUREMENT_ID> is added to the vars block, and below that a config property with <GA_MEASUREMENT_ID>: {} is added as the value.

Measure events

Use triggers with defined values to measure events in AMP pages. These properties are used in a trigger configuration:

selector: a CSS selector to specify a target element.
on: specifies the type of event.
vars: specify the type of event in event_name, and add additional parameters as necessary.

This example demonstrates how to set up a basic Google Analytics event. Create a trigger called "button" that will fire when an element with an ID value of "the-button" is clicked. This trigger will send an event_name value of "login" and a method value of "Google" to Google Analytics:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google Analytics Events are a category of events specific to Google Analytics that are commonly used to build reports on campaigns. These values can be specified in the vars block with event_category, event_label, and value parameters:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

See the amp-analytics documentation to learn more about trigger configuration.

Modify parameters

To override default Google Analytics parameters or add new parameters, add the desired values to the parameter section of your config block. This example overrides the default pageview and event values for page_title and page_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Link domains

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

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

In AMP pages with Google Analytics configured, the capability to link to your canonical domain from the AMP cache is enabled by default. To disable Google Analytics' 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": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Site Speed

Google Analytics is configured to automatically collect site speed data for a small fraction of your site's traffic. You can change the sample rate to collect more or less data. To set the sample rate to 100%, add the highlighted code to your configuration:

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

To stop collecting site speed data, use the highlighted code:

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

AMP vs non-AMP traffic

AMP traffic uses different client IDs from those for web traffic by default. AMP pages load faster and show different traffic patterns than their standard web page counterparts, which can often mean you will get different metrics between AMP and non-AMP traffic.

Use of a separate property to measure AMP traffic allows for better analysis of metrics and a more accurate picture of your traffic. If you do need to use a single property to measure both AMP and non-AMP traffic, use the data source dimension or a custom dimension to distinguish them.

By default, Google Analytics will send the value "AMP" via the data source dimension. Use this value to segment, filter, or otherwise analyze AMP vs non-AMP content within a single view.

Debug your configuration

The AMP Validator can be used to identify if a web page doesn't meet the AMP HTML specification. Add #development=1 to the URL of a page to turn on the validator.

The amp-analytics extension provides warning and error messages to help debug and troubleshoot a configuration. Add #log=1 to the URL of a page to view logged error messages in your web browser's console.

Complete example

This example demonstrates a complete AMP page with a single button on a page. This configuration will send standard page view data and "button-click" events to Google Analytics:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <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>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>

Related resources

AMP: AMP Project
AMP: What Is AMP?
AMP: amp-analytics
gtag.js: Use gtag.js with AMP
Google Analytics help center: Accelerated Mobile Pages (AMP)