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" id="analytics1">
  ...
</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" id="analytics1">
<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`.
`ampdocUrl`	`string`	no	URL of the page being tracked (e.g. https://www.ampproject.org/). Defaults to `ampdocUrl`.

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

<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithAmpdocUrl": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My page",
        "ampdocUrl": "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" id="analytics3">
<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`	`string`	no	A numeric value associated with the event (e.g. 42). Defaults to 0.

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" id="analytics4">
<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 via a pageview by extending the pageview request with a Custom Dimension parameter (or any other parameters you want to include with the hit). This change can be made in the requests attribute which specifies the URLs used to transmit data to an analytics platform.

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "requests": {
    "pageviewWithCd1Cd3": "${pageview}&cd1=${cd1}&cd3=${cd3}"
  },
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageviewWithCd1Cd3",
      "vars": {
        "title": "Classic Cars",
        "cd1": "registeredUser",
        "cd3": "automotive"
      }
    }
  }
}
</script>
</amp-analytics>

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 type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>

    <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" id="analytics1">
  <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:

amp-analytics extension - An overview on how to capture analytics data from an AMP document.
amp-analytics variables - A list of variables supported in amp-analytics.
vendor.js - This file includes request templates for vendors, including the googleanalytics template. You can use the googleanalytics template as a reference on how to create your own configuration.
Working with the Measurement Protocol and parameter reference - An overview of how to work with the Measurement Protocol and the list of all parameters for the Measurement Protocol.