Accelerated Mobile Pages
(AMP) is a platform used to build web pages for static content that renders fast. AMP includes an
<amp-analytics>
element that enables measurement of user interactions, and it has built-in support for Google Analytics.
Basic setup to measure page views
To create a basic installation of Google Analytics on an AMP page, copy this code snippet and replace
<GA_MEASUREMENT_ID>
with your Google tag ID.
Find your Google tag ID
.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Sending data to multiple destinations
You can send data to multiple destinations with the same
<amp-analytics>
tag, simply add the new measurement id
<GA_MEASUREMENT_ID_NEW>
to your
config
command.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" },
"<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
How it works
The
<amp-analytics>
element is an
extended AMP component
and is explicitly enabled as a
custom-element
in a script tag.
<script async
custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>
The
<amp-analytics>
element block is configured to enable support for Google measurement products. Set the
type
attribute for
<amp-analytics>
to "
gtag
" (to enable gtag.js support) and the
data-credentials
attribute to "
include
" (to enable cookies.)
<amp-analytics type="gtag" data-credentials="include">
...
</amp-analytics>
AMP does not allow any JavaScript beyond its own approved libraries, so configuration is instead performed with JSON. A
gtag_id
property with a valid
<GA_MEASUREMENT_ID>
is added to the
vars
block, and below that a config property with
<GA_MEASUREMENT_ID>: {}
is added as the value.
Measure events
Use
triggers
with defined values to measure events in AMP pages. These properties are used in a trigger configuration:
selector
: a CSS selector to specify a target element.
on
: specifies the type of event.
vars
: specify the type of event in
event_name
, and add additional parameters as necessary.
This example demonstrates how to set up a basic Google Analytics event. Create a trigger called "
button
" that will fire when an element with an ID value of "
the-button
" is clicked. This trigger will send an
event_name
value of "
login
" and a
method
value of "
Google
" to Google Analytics:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
Google Analytics Events
are a category of events specific to Google Analytics that are commonly used to build reports on campaigns. These values can be specified in the vars block with
event_category
,
event_label
, and
value
parameters:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#login",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
See the
amp-analytics
documentation
to learn more about trigger configuration.
Modify parameters
To override default Google Analytics parameters or add new parameters, add the desired values to the
parameter
section of your
config
block. This example overrides the default pageview and event values for
page_title
and
page_location
:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": {
"groups": "default",
"page_title": "Beethoven symphonies",
"page_location": "https://www.example.com/beethoven.html"
}
}
}
}
</script>
</amp-analytics>
Link domains
The domain linker enables two or more related sites on separate domains to be measured as one. Specify the domains that should be linked with the
"linker": { "domains": [...] }
property:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": {
"groups": "default",
"linker": { "domains": ["example.com", "example2.com"] }
}
}
}
}
</script>
</amp-analytics>
In AMP pages with Google Analytics configured, the capability to link to your canonical domain from the
AMP cache
is enabled by default. To disable Google Analytics' 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": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": {
"groups": "default",
"linker": "false"
}
}
}
}
</script>
</amp-analytics>
Site Speed for Universal Analytics
Google Analytics is configured to automatically collect site speed data for a
small fraction of your site's traffic. You can change the sample rate to collect
more or less data. To set the sample rate to 100%, add the highlighted code to
your configuration:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": {
"groups": "default",
"site_speed_sample_rate": 100
}
}
}
}
</script>
</amp-analytics>
To stop collecting site speed data, use the highlighted code:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": {
"groups": "default",
"site_speed_sample_rate": 0
}
}
}
}
</script>
</amp-analytics>
AMP vs non-AMP traffic
AMP traffic uses different client IDs from those for web traffic by default. AMP pages load faster and show different traffic patterns than their standard web page counterparts, which can often mean you will get different metrics between AMP and non-AMP traffic.
Using a separate property to measure AMP traffic allows for better analysis of metrics and a more accurate picture of your traffic. To distinguish AMP and non-AMP traffic if you need to use a single property:
- Use the
data source dimension
or a custom dimension (Universal Analytics).
- Use a custom event parameter (Google Analytics 4).
Debug your configuration
The
AMP Validator
can be used to identify if a web page doesn't meet the AMP HTML specification. Add
#development=1
to the URL of a page to turn on the validator.
The
amp-analytics
extension provides warning and error messages to help debug and troubleshoot a configuration. Add
#log=1
to the URL of a page to view logged error messages in your web browser's console.
Complete example
This example demonstrates a complete AMP page with a single button on a page. This configuration will send standard page view data and "
button-click
" events to Google Analytics:
<!doctype html>
<html ? lang="en">
<head>
<meta charset="utf-8">
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="self.html" />
<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>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Make it so.</h1>
<div>
<button type="button" id="the-button">Engage!</button>
</div>
</body>
</html>