How to Setup Google AMP Webpages with Analytics Tracking

If you have been following Google’s changes recently, you may have noticed that they became obsessed with mobile web. And there are a couple of strong reasons to support that.

According to Search Engine Land, Google has officially confirmed that mobile search surpassed desktop back in 2015. Moreover, in October 2016, Google announced mobile-first indexing which focuses on prioritizing the mobile version of a website’s content over the desktop version when assigning search rankings.

This obsession led to the introduction of Accelerated Mobile Pages (also known as AMP) which are primarily designed to provide the mobile user with an immersive, lightning-fast website experience.

In essence, while Accelerated Mobile Pages are similar to generic HTML pages, the AMP framework clears away any custom JavaScript, the majority of CSS styling, Widgets and Plugins (including original Google Analytics scripts/tracking codes), thus making pages and posts load almost instantly.

To give you a practical example of the load difference between AMP and non-AMP pages, take a look at the speed tests of https://www.wired.com/ below:

Non-AMP Page

AMP Page

As you can see, although performance grade hasn’t increased drastically, the difference in load speed is dramatic. Just look at it, the AMP version loaded in just 101ms. That’s just incredible.

It’s great that we have a decent loading time you might say, but without heavy CSS – AMPs will look ugly.

Good point, but that’s not the reality.

If you spend some time customizing AMPs and only apply what’s allowed by the framework, you’ll barely notice the difference between AMP and Non-AMP page. In fact, you can potentially make them (nearly) identical.

Here is an example:

Wired Non-AMP Page

Wired AMP Page

So now that we have the basics covered, let’s proceed and see what the actual benefits of AMPs are.

Speed (For Users): The first benefit that comes to mind is the lightning-speed AMPs have to offer. It’s old news that mobile users are constantly faced with website delays, especially when it comes to mobile search. Hence, accelerated mobile pages come in quite handy at this point.
User Experience (For Users): AMPs bring user experience to an entirely new level. Endless pop-ups, self-playing videos and annoying animations are all stripped out with the AMP framework, giving users an immersive experience on your site and its key ‘ingredient’ – the content.
Accessibility (For Users): Although the world is moving incredibly fast towards providing everyone with fast internet connections, still, some countries have to cope with snail-slow connections. The AMP framework comes in like a wrecking ball that destroys the walls of poor internet connections.
Top Stories Carousel (For Publishers): Accelerated Mobile Pages give you the ability to appear in ‘top stories’ – the mobile carousel that is found at the top of Google search results. This unveils an opportunity for the site owner to generate more traffic to their website.
Enhanced User Behaviour (For Publishers): As a result of a better user experience and fast-loading pages, people are more likely to view more pages and engage with the site, thereby decreasing the bounce rate.
Increased Ad Revenue (For Publishers): According to Google, over 90% of publishers see higher click through rates and the vast majority of them are seeing higher eCPMs.

Let’s now proceed with integrating Accelerated Mobile Pages. We’ll run with a WordPress website for example purposes.

Adding AMP To WordPress

Integrating AMP with WordPress is fairly straightforward and simply comes down to downloading the official AMP plugin for WordPress.

After you download and activate the plugin, it will automatically generate AMP versions of your posts (the plugin currently doesn’t support pages).

To see how your AMPs look, just enter /amp/ at the end of your post’s URL. Here is an example:

Non-AMP Post URL

AMP Post URL

It’s also worthwhile double-checking that your AMP version of the post includes a ‘rel=canonical’ tag that points to the corresponding version of that post (i.e. the original version).

To check that, go to a particular AMP page and ‘view source’ of the page. You should then be looking for the line that starts with ‘<link rel=“canonical”‘. See an example below:

Viola! Although your AMPs will look quite generic without any additional styling, you’re ready to go from here.

Adding Google Analytics (GA)

Now, we can go ahead and make our accelerated mobile pages trackable by integrating Google Analytics.

First and foremost, it’s recommended to add a new Google Analytics property to collect data from your AMP’s.

To do that, log-in to your existing Google Analytics, go to ‘Admin’, click on the ‘Property’ dropdown and hit ‘Create New Property’.

After you add a new property, you will need to grab your tracking ID by going to ‘Admin’ > ‘Property’ > ‘Property Settings’.

It will look something like:

UA-11111111-7

Now that you have your new GA property set-up, we can now proceed and integrate Google Analytics to our newly added AMPs.

There are two ways to go about this:

Method 1

Install Glue For Yoast SEO & AMP plugin.

Not only does this plugin gives you the ability to add GA tracking to your AMPs, but it also enables you to customize the look of your accelerated mobile pages, at least to some extent.

As soon as you install the plugin, navigate to its settings and click on the ‘Analytics’ tab.

Please note: generic GA scripts will not work with the AMP framework, so you will have to add an AMP-specific JSON version of your GA script.

Simply add the following lines to the tracking field in Yoast Glue AMP analytics. Ensure to replace a default tracking ID with your unique ID.

It’s worth noting that this method may not work for everyone. To troubleshoot your GA installation using this approach, open up one of your accelerated mobile pages, navigate to Google Analytics and check real-time sessions. If you see live traffic, your GA script has been installed correctly.

Otherwise, if you don’t see any live sessions, it’s likely that this method hasn’t worked for you. In this case, you will need to follow the method below.

Method 2

This approach is slightly more complicated, but is sure to work.

First of all, navigate to your WordPress dashboard and go to ‘Plugins’. Then, find the official AMP plugin and click ‘Edit’.

Choose amp/templates/single.php from the list of plugin files on the right side of the screen.

For your script to work, you would first need to place the following AMP script between <head> and </head> tags as shown in the image below.

Then, place the following JSON tracking code between <body> and </body> tags as shown in the image below.

Please note: This particular tracking code is used to track page views. If you wish to track events, use the base of the code below:

<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-XXXXX-Y” – Replace this with your tracking code
},
“triggers”: {
“trackClickOnHeader” : {
“on”: “click”,
“selector”: “#header”,
“request”: “event”,
“vars”: {
“eventCategory”: “ui-components”,
“eventAction”: “header-click”
}
}
}
}
</script>
</amp-analytics>

If you’d like to track social interactions to see how many people click on your social sharing icons, use the base of the code below:

<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-XXXXX-Y” – Replace this with your tracking code
},
“triggers”: {
“trackClickOnTwitterLink” : {
“on”: “click”,
“selector”: “#tweet-link”,
“request”: “social”,
“vars”: {
“socialNetwork”: “twitter”,
“socialAction”: “tweet”,
“socialTarget”: “https://www.examplepetstore.com” – Replace with your own URL
}
}
}
}
</script>
</amp-analytics>

You can also add other social networks like Facebook and Google+.

To learn more about tracking events and social interactions, head over here.

Troubleshooting Google Analytics Integration

To check whether your GA tracking has been implemented correctly, open any of your AMP pages and head over to your Google Analytics dashboard. Then, click on ‘Real-Time’ > ‘Overview’.

If you see live traffic, your script is working correctly.

It’s also worthwhile checking validation of your AMPs. To do that, go to Search Console AMP Validator and enter your AMP URL.

The tools will return whether your page is a valid AMP. If not, check & fix all of the errors.

Conclusion

Accelerated Mobile Pages can be extremely powerful and effective for large online publications, news agencies and high-traffic blogs. If you simply run a 5-page business website and do not produce content on a regular basis, it’s nothing you should worry about at the moment.

Before you integrate AMP on your site, make sure that you already have an ordinary mobile version of the website.

About The Author: Dmytro is a Head Wizard at Solvid, a creative inbound marketing & software development agency in London, UK. His work has been featured and mentioned in a wide range of publication, including The Next Web, Business2Community, The Huffington Post, Sitepoint, SEMRush, Lifehack, Backlinko, and more. He is also the author of The Ultimate Guide To Blogging Tools.