Adding Analytics to your AMP pages

AMP is a way to build web pages for static content that render fast. AMP includes an amp-analytics element that allows you to track user interactions with AMP pages and it has built-in support for Google Analytics.

To learn more about analytics for AMP pages see the amp-analytics reference. For general information about AMP see What Is AMP? on the Accelerated Mobile Pages (AMP) Project site.

For requirements and capabilities of the Google Analytics built-in support for AMP pages see Accelerated Mobile Pages (AMP) in the Google Analytics Help Center.

Supported user interactions for Google Analytics

amp-analytics is an extended component and must be explicitly included into the document as a custom element to use it. To add AMP analytics functionality to your page include the following script in the <head>, before the AMP JS library:

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

Add the amp-analytics element to the body of your page. Then to enable the built-in support for Google Analytics, set the type attribute of the amp-analytics element to googleanalytics. It is recommended to include an id attribute so that you can easily identify each amp-analytics element (e.g. debugging).

<amp-analytics type="googleanalytics">
  ...
</amp-analytics>

The following trigger request values are supported for the Google Analytics configuration:

  • pageview for page tracking
  • event for event tracking
  • social for social tracking.

Page tracking

Page tracking allows you to measure the number of views you had for a particular page on your website.

Pageview hits can be sent by setting the trigger request value to pageview.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

You can set key-value pairs for the following pageview fields in the vars attribute of the trigger.

Value Type Required Description
title string no The title of the page (e.g. homepage). Defaults to title.
documentLocation string no URL of the page being tracked (e.g. https://www.ampproject.org/). Defaults to sourceUrl.

The following example overrides the default pageview values for title and documentLocation:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustomUrl": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My page",
        "documentLocation": "https://www.examplepetstore.com/pets.html"
      }
    }
  }
}
</script>
</amp-analytics>

Event tracking

Events are user interactions with content that can be tracked independently from a web page or a screen load. If you're unfamiliar with events in Google Analytics you should first read the article About Events in the Analytics Help Center.

Event hits can be sent by setting the trigger request value to event and setting the required event category and action fields.

The following example uses the selector attribute of the trigger to send an event when a particular element is clicked:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

You can set key-value pairs for the following event fields in the vars attribute of the trigger.

Value Type Required Description
eventCategory string yes Typically the object that was interacted with (e.g. 'Video').
eventAction string yes The type of interaction (e.g. 'play').
eventLabel string no Useful for categorizing events (e.g. 'Fall Campaign').
eventValue integer no A numeric value associated with the event (e.g. 42). Defaults to 0.

Non-interaction events

In some cases you might want to send an event as a non-interaction event. To send such an event, in the extraUrlParams section, set the ni parameter to "1":

"extraUrlParams": {
   "ni": "1"
}

For a complete example, see Extending googleanalytics.

Social interactions

Social interaction analytics allows you to measure the number of times users perform social network related actions. For example, you might measure when a user clicks on a Twitter "Tweet" link.

If you're unfamiliar with social interactions in Google Analytics, or you're not sure what values to use for the social network, action, or target, you should first read the article About Social plugins and interactions in the Analytics Help Center.

Social interaction hits can be sent by setting the trigger request value to social and setting the required social network, action, and target fields.

The following example uses the selector attribute of the trigger to send an event when a particular social button is clicked:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.examplepetstore.com"
      }
    }
  }
}
</script>
</amp-analytics>

You can set key-value pairs for the following event fields in the vars attribute of the trigger.

Value Type Required Description
socialNetwork string yes The network on which the action occurs (e.g. Facebook, Twitter).
socialAction string yes The type of action that happens (e.g. Like, Send, Tweet)..
socialTarget string yes Specifies the target of a social interaction. This value is typically a URL but can be any text. (e.g. http://mycoolpage.com).

Extending googleanalytics

Since the underlying request endpoint for the googleanalytics configuration is the Measurement Protocol, it is possible to send additional Measurement Protocol parameters with hits. This is useful for sending values for parameters like custom dimensions and custom metrics which are expected to be sent along with hits.

For example, you can send a custom dimension with a pageview by including the Custom Dimension parameter (or any other parameters you want to include with the hit) in the extraUrlParams section. This section can be included at the trigger level for single requests or at a global level to send the data with all requests.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "extraUrlParams": {
    "cd3": "AMP"
  },
  "triggers": {
    "trackPageviewWithCustomData": {
      "on": "visible",
      "request": "pageview"
    },
    "trackEvent" : {
      "on": "visible",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      },
      "extraUrlParams": {
        "ni": "1"
      }
    }
  }
}
</script>
</amp-analytics>

Sampling

AMP analytics allows you to add sampling to your AMP pages just like non-AMP pages. To implement sampling for one or more of the requests sent from your AMP page, you can use the following configuration to sample at 1%.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageview",
      "sampleSpec": {
        "sampleOn": "${clientId}",
        "threshold": 1
      }
    }
  }
}
</script>
</amp-analytics>

You can add outbound link tracking to various links on your AMP page by annotating the links and configuring a trigger to act on link clicks. This can be done with two steps:

Adding a trigger to track link clicks:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "outboundLinks": {
        "on": "click",
        "selector": "a",
        "request": "event",
        "vars": {
          "eventCategory": "outbound",
          "eventAction": "click",
          "eventLabel": "${outboundLink}"
        }
      }
  }
}
</script>
</amp-analytics>

Annotating the link with appropriate data:

<a href="http://example.com/page" data-vars-outbound-link="http://example.com/page">Some link</a>

AMP vs non-AMP traffic

Due to various technical restrictions, AMP traffic uses different Client IDs from those for web traffic by default. AMP pages also load faster and show different traffic patterns thus resulting in different metrics. Using a separate property to measure AMP traffic allows for better analysis of metrics and a more accurate picture of your traffic. If you 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" within the data source dimension, which is the value you can use to segment/filter or otherwise analyze AMP vs non-AMP content within a single View. To configure a custom dimension, see Extending googleanalytics. In addition, you can use the AMP Client ID integration to use a single Client ID for a user across AMP and non-AMP traffic.

Example AMP Page

The following is an example AMP page with Google Analytics pageview and event tracking.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMP Analytics</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async custom-element="amp-analytics"
        src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>

  <amp-analytics type="googleanalytics">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>

  <h1 id="header">AMP Page</h1>

  <span id="event-test" class="box">
    Click here to generate an event
  </span>

  </body>
</html>

Debugging

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

The amp-analytics extension provides warning and error messages to help debug and troubleshoot a configuration. Messages are logged to the browser's console. Add #log=1 to the URL of a page to enable logging.

Customization

The built-in support for Google Analytics in the amp-analytics extension provides an easy way to measure user interactions with your AMP pages. However, for more advanced use cases you may want to create your own configuration to send additional fields and hit types available in the Measurement Protocol.

The following resources will help you to get started with a customized solution: