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.
Link domains
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>