Are you using Accelerated Mobile Pages (AMP)?
If so, your Analytics sessions data may be skewed and inaccurate.
This post shows how to easily add cross-domain analytics tracking to AMP HTML layouts. As well as background on cross-domain tracking, Google Analytics in AMP, AMP’s caching URL and ecosystem, and more. Utilize AMP Linker for tracking your user’s journeys from Google’s AMP cache domain to other domains.
Table of Contents :
- Cross-domain tracking and Skewed data
- Google Analytics and AMP
- Adding Google Analytics to AMP
- Google AMP Cache
- Adding AMP Linker for cross-domain tracking
Cross-domain tracking and Skewed data
Nothing is worse than having analytics and web traffic data that is bloated, inaccurate, or missing. Tracking sessions in Analytics is done either via localStorage or cookies and these are on a domain-by-domain basis.
Domain “a” cannot easily access cookies on domain “b” and as modern browsers continually add new privacy and security features, some that ban third-party cookies, then your analytics and data is likely to become skewed.
In the AMP instance, individual session-based tracking can be shown in your Google Analytics data as multiple sessions, as the user moves from domain-to-domain. This can result in more user and sessions data and lower pageview data within sessions.
AMP serves your content to users on Google’s own AMP cache domain (learn more about AMP cache below). Your AMP HTML template likely has links back to your own domain, be it through main navigation, footer links, another CTA in the content itself, or within Google’s cache viewer itself. When clicked, those links then bring users onto your domain, away from Google’s AMP cache URL and this is where your analytics become inaccurate.
For those utilizing AMP HTML and using Google Analytics, you can now very easily setup cross-domain tracking and track your users across AMP cache and your own domain, read on!
Google Analytics and AMP
AMP requires the use of unique markup and elements and introducing Google Analytics functionality into your AMP HTML is done via an amp-analytics component/element and an inclusion of a script in the <head>. This brief article’s sole purpose is in introducing a specific feature of this: AMP Linker. I will briefly go into an overview of adding Google Analytics via amp-analytics though, as this is a prerequisite.
Just looking for the new cross-domain tracking AMP Linker? Carry on.
Adding Google Analytics to AMP
As mentioned prior, adding Google Analytics tracking to AMP requires adding a specific script into the <head> of your template that introduces this unique amp-analytics component.
Let’s add it before the closing </head>:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Example:
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<link rel="canonical" href="https://example.com/blog/hello-world/" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
SEO side note : Please ensure you’ve set your domain as canonical.
Once this script has been included we can now add our amp-analytics element within the <body> of the template. To ensure we’re utilizing AMP’s built in Google Analytics support we’ll add googleanalytics to the type attribute.
<amp-analytics type="googleanalytics">
...
</amp-analytics>
AMP currently only supports certain Google Analytics tracking. To enable session-based pageviews on your AMP posts/pages let’s include this JSON:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Note : Please ensure you’ve set your unique Google tracking “UA” id.
Now we’re tracking pageviews in Google Analytics for our AMP content!
Google AMP Cache
The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files and all images load from the same origin… — ampproject.org
As mentioned earlier in this article, this is where the problem with cross-domain tracking lies. Your AMP content is being served up via their own URL (that looks like google.com/amp/s/example.com/blog/hello-world/) to your users.
Your AMP content likely has links back to your own domain and as users navigate away from Google’s AMP cache URL and onto your own this is where it can skew the data, as this cross-domain journey can creates new sessions.
AMP’s cache CDN is very robust and has some nice features built in like a pre-validation system ensuring that the posts or pages are guaranteed to work, among other features.
Natively though, we need to add AMP Linker the ensure accurate data in Analytics.
Adding AMP Linker for cross-domain tracking
The solution to this problem presented throughout this article is a very simple addition to your AMP template. AMP Linker is a newly-announced feature in Accelerated Mobile Pages that ensures this cross-domain session bloating isn’t happening.
As users click away from AMP cache URL, it appends parameters with unique IDs to domain “b”’s URL. Domain “b” where you have Google Analytics, can easily parse this parameter and translate into a first-party cookie.
That url will look something like: https://example.com/about/?_gl=1*1vlvis7*_ga*U0Rt...
We’ll enable AMP Linker and ensure accuracy in your data by including "linkers" and enabling it in the Google Analytics pageviews tracking element within <body> of your AMP template:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"linkers": {
"enabled": true
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
All-together now:
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<link rel="canonical" href="https://example.com/blog/hello-world/" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"linkers": {
"enabled": true
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<p>Hello world!</p>
</body>
</html>
Note : Again, please ensure you’ve set your unique Google tracking “UA” id.
Thank you very much for checking this article out!
Top comments (0)