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.
<amp-analytics type=โgoogleanalyticsโ>
<script type=โapplication/jsonโ>
{
โvarsโ: {
โaccountโ: โUA-XXXXX-Yโ โ Replace this with your tracking code
},
โtriggersโ: {
โtrackPageviewโ: {
โonโ: โvisibleโ,
โrequestโ: โpageviewโ
ย ย }
ย }
}
</script>
</amp-analytics>
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.
<script async custom-element=โamp-analyticsโ src=โhttps://cdn.ampproject.org/v0/amp-analytics-0.1.jsโ></script>
Then, place the following JSON tracking code between <body> and </body> tags as shown in the image below.
<amp-analytics type=โgoogleanalyticsโ>
<script type=โapplication/jsonโ>
{
โvarsโ: {
โaccountโ: โUA-XXXXX-Yโ โ Replace this with your tracking code
},
โtriggersโ: {
โtrackPageviewโ: {
โonโ: โvisibleโ,
โrequestโ: โpageviewโ
ย ย }
ย }
}
</script>
</amp-analytics>
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.