Use gtag.js with AMP

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 AdWords, 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 AdWords Conversion ID, DoubleClick Advertiser ID, or Google Analytics Tracking ID:

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

To configure additional products in the global site tag, you do not need to install the entire code snippet 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 with a real conversion ID number.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "GA_TRACKING_ID",
    "config" : {
      "GA_TRACKING_ID": { "groups": "default" },
      "AW-CONVERSION_ID": { "groups": "default" }
    }
  },
  "triggers" : {
  }
}
</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 for gtag.js, you are also able to specify your own custom events.

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:

<!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_TRACKING_ID",
            "config": {
              "GA_TRACKING_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>