Global site tag for 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 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 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> 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 for gtag.js, you are also able to specify your own custom events.

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 disable 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",
        "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. Remember to 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>