was successfully added to your cart.

How to Integrate Google Analytics with AMP

By June 20, 2018CRO
How to Integrate Google Analytics with Google AMP

Mobile is the future. It may have been a big claim a few years back, but now it is a fact. Google officially confirmed that mobile search went past desktop search back in 2015. Since then Google started focusing a lot on mobile traffic.

When assigning search ranking, the mobile-first indexing gives the preference to the mobile version of a website than the desktop version. This changes many things for all the website owners.

Website owners now have to focus on making their mobile version better and faster. As Google thinks about the user and giving them what they want is the priority for Google.

That is where Accelerated Mobile Pages (AMP) comes into play. Let us start by understanding what AMP is and how it will help.

 

What is AMP (Accelerated Mobile Pages)?

 

AMP technology is an open source mobile format used for instantly loading the webpage on mobile.

AMP uses different markups, restrictions and extra rules. AMP pages (/amp/ or .amp.html) are similar to HTML pages.

AMP removes many CSS styling, custom JavaScript, plugins (including Google Analytics tracking code) and widgets. These changes make the page load faster and almost instantly.

Let us see the difference in a non-amp and amp page in appearance.

AMP-page-vs-Non-AMP-page

As you can see in the above image.

  • The logo, cart icon, and menu got replaced with just HumCommerce text.
  • The plugin for liking the page and sharing icons got replaced by author name and the article published date.

The difference is not so big.  

Now, let us see the difference in page loading between AMP page and Non-AMP page.

We took one AMP implemented website’s blog post and this was the speed difference:

Page Speed Performance: Non-AMP implemented page

FireShot-Capture-063-Website-speed-test_-https___tools.pingdom.com__edyeZ

Page Speed Performance: AMP version of the same page

FireShot-Capture-062-Website-speed-test_-https___tools.pingdom.com__ojgy3

The page load time difference is huge. The Non-AMP page took 1.79 seconds to load while the AMP page took only half a second to load.

As the page size and requests reduced the performance and the load speed increased.

Page-Speed-Test-Results

You must be wondering,

 

Which websites have implemented Google’s AMP?

 

Here are some popular websites:

 

How does Google AMP work?

 

  • Google’s bot crawls a website to scan website content.
  • It finds the unique AMP links of the website for the mobile version.
  • It understands that these URLs are for the static version of the website for mobile devices.
  • It crawls all the AMP links of the website, saves and uploads the static version of it on its own server.
  • Mobiles users can find the AMP version of the site through Google cards or the search engine after the upload is complete.

Now that the basics are complete, let’s move on to the in-depth benefits of AMP.

 

Benefits of AMP

 

Benefits of AMP for Users:

 

Speed: The foremost advantage of using Google’s AMP is the lightning page loading speed on mobile. Users close the website or web page if they have to wait more than 3 seconds.

AMP solves this problem by loading the mobile page under 1-2 seconds depending on the website.

Reachability: The internet speed has increased drastically in the past few years. But many countries are still coping with the poor internet connections. The AMP technology helps to breaks the slow internet barrier.

User Experience: Google’s AMP technology takes the user experience to a higher level. Irritating animations, self-playing videos, never-ending pop-ups are taken away, and the user gets the content.

 

Benefits of AMP for Publishers:

 

Increased Ad Revenue: Google says more than 90% of publishers experience higher click-through rates (CTR) and many of them see higher eCPM(effective cost per thousand impressions).

Improved User Behaviour (For Publishers): The better user experience of the website leads to more page views and higher engagement. This reduces bounce rate.

Improved SEO ranking: When a page loads faster, the user will stay on the page longer and may end up viewing more page. The bounce rate will decrease, and Google will reward the page by giving better search engine ranking.

Google Top Stories: The AMP pages can appear in the Google’s “top stories”. The top stories are shown below the search bar. Thus increasing the chances of any user to click on that particular website and in turn increasing the traffic.

Example:

AMP-pages-on-Googles-Top-Stories-Results

Let’s go further into the integration of Accelerated Mobile Pages

Now before you go all excited and start working on it. One crucial question remains.

 

Does Your Website Need AMP?

 

AMP pages mainly focus on readers. It is created for reading purpose. That is why it would work wonders for the websites who publish blogs regularly and news websites.

Ad support on AMP is limited. It is not preferable for ecommerce websites which do not have a regularly updating blog articles. Instead, make a responsive website with faster loading pages on mobile devices.    

 

Integrating AMP with WordPress

 

Adding AMP to WordPress is quite simple. All you have to do is download the “AMP for WordPress” plugin.

The plugin will generate AMP compatible versions of your posts, once you activate the plugin.

To check how your post’s AMP version will look, all you have to do is put ‘/amp/’ at the end of the post URL.

For Example:

Non-AMP URL

https://www.humcommerce.com/cro/increase-mobile-conversion-rate/

AMP URL

https://www.humcommerce.com/cro/increase-mobile-conversion-rate/amp/

It is also important to verify that rel=canonical’ tag is present on the AMP version of the post. The rel=canonical should point to the original version of the post.

You can easily check this by going to an AMP page and opening its ‘view source’ (shortcut key in some browser: Control + U). The line should start with <link rel=“canonical”.

For Example:

AMP-page-view-source-example

 

Validating AMP page via Browser DevTools

 

Though it becomes effortless to implement AMP with plugins, it is always better to verify things manually.

Validate AMP page through following steps:

  • First, open a browser tab.
  • Open the Elements panel by pressing  Command + Option + C on MAC and
  • Control + Shift + C on Windows/ Linux.

   OR

  • Just use right mouse click on the page and select ‘view page source’.
  • Select Console.
  • Now open the AMP URL followed by #development=1 in the address bar of the browser tab.

Example:

https://www.humcommerce.com/cro/increase-mobile-conversion-rate/amp/#development=1

You’ll see a message in the console tab like this:

 

AMP-validation-with-Elements-panel-example

 

Validating AMP page via Google AMP Test

 

You can also validate your AMP page with Google’s AMP test.

For the test example, we have taken WordPress.com’s one post.

Put your AMP URL in the box and hit ‘RUN TEXT’

Validationg-AMP-post-through-Googles-AMP-test-

Validating AMP post through Google’s AMP test

Google-AMP-page-test-validated-example

It means everything is correctly set up.

 

Adding New Property in Google Analytics (GA) for AMP

 

Adding a new property in Google Analytics for data collection from AMP pages is recommended.

To add a new property, log in go to the ‘Admin’ in Google Analytics.

Click on   Creating-new-property-in-Google-Analyticsunder ‘Property’ (you will see this option only if there were no property added before)

Or else you will see ‘Property’ dropdown and then you can click ‘Create New Property’.  

After you fill all the data in the ‘New Property’ form like website name, URL, industry category, time zone etc.

Click on ‘Get Tracking ID’

Once the new property is added, you need to get your tracking ID from property setting by going to ‘Admin’ -> ‘Property’ -> ‘Property Settings’.

The tracking ID will look something like this

UA-2222222-1

Now, we can move forward and integrate newly added AMPs with Google Analytics.

 

There are two ways to do this:

Procedure 1: Installing & Configuring Glue for Yoast SEO & AMP plugin

Procedure 2: Making changes into AMP plugin

 

Procedure 1: Installing & Configuring Glue for Yoast SEO & AMP plugin


Download and install Glue for Yoast SEO & AMP plugin.

Glue-for-Yoast-SEO-AMP-plugin

Benefits of using Glue for Yoast SEO & AMP plugin:

  • Adds GA tracking to your AMPs.
  • Provides customization of accelerated mobile pages (AMPs) to some extent.
  • It integrates Yoast SEO into accelerated mobile pages.
  • This integration helps to ensure the correct implementation of meta-data.

After installing the plugin, activate the plugin via the ‘Plugins’ screen in WordPress.

Then go to SEO > AMP

Enable ‘Articles (post)’ in ‘Post types’.

Glue-for-Yoast-SEO-AMP-plugin-settings-1

Then click on ‘Analytics’ and paste the code with your GA tracking ID.

Glue-for-Yoast-SEO-AMP-plugin-settings-2

Note: The GA script does not work here. So the AMP-specific JSON version of Google Analytics (GA) script has to be added here.

To make it easy for you, we are giving the AMP-specific code below. All you have to do is replace the GA tracking id present in the code with yours.


<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-xxxxxx-x”  – Put ‘your’ GA tracking code here
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
  }
 }
}
</script<
</amp-analytics>

 

And then copy paste the code directly into the ‘AMP Analytics’ box as shown in the image above.

The above method will work mostly for everyone. To verify if your installation was properly done or not.

Go to Google Analytics -> Real Time (under Reports) -> Overview -> Top Active Pages

If the GA script has been installed correctly, you would see the AMP URL here and one person in the live session (as you are the only one on the AMP page currently).

If you do not see the AMP URL in live sessions, it means that the above approach did not work for you and you will need to try the procedure 2.

 

Procedure 2: Making changes into AMP plugin

 

This approach is little more complicated but will surely work.

Log in and go to your WordPress dashboard.

Go to ‘Plugin’ and find the official AMP plugin.

Click ‘Edit’.

On the right side panel, under ‘Plugin Files’, select ‘amp/templates/single.php’.

AMP script:

<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

Put the above AMP script between ‘<head> and </head>’ tags.

Then, paste the following JSON tracking code with your GA tracking code between ‘<body> and </body>’ tags.

<amp-analytics type=”googleanalytics”>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-xxxxxx-x”  – Put ‘your’ GA tracking code here

},

“triggers”: {

“trackPageview”: {

“on”: “visible”,

“request”: “pageview”

 }

}

}

</script>

</amp-analytics>

Note: The above tracking code only tracks page views.

For ‘tracking events’, use the code below:

<amp-analytics type=”googleanalytics”>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXXX-Y” – Put ‘your’ GA tracking code here

},

“triggers”: {

“trackClickOnHeader” : {

“on”: “click”,

“selector”: “#header”,

“request”: “event”,

“vars”: {

“eventCategory”: “ui-components”,

“eventAction”: “header-click”

  }

 }

}

}

</script>

</amp-analytics>

For tracking clicks of social sharing icons, use the following code with your GA tracking ID.

<amp-analytics type=”googleanalytics”>

<script type=”application/json”>

{

“vars”: {

“account”: “UA-XXXXX-Y” – Put ‘your’ GA tracking code here

},

“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>

Check this guide to learn more about tracking social interactions and events.

You can surely add other social networks like LinkedIn, Facebook and Google+.

 

Conclusion

 

Accelerated Mobile Pages (AMP) is the future and to stay ahead of your competitors, you will surely need faster mobile browsing. Many high traffic websites can benefit from applying AMP.

Mobile version of the website is a must before implementing AMP to your website. High traffic blogs, news websites, publications can surely make use of this lightning speed technology.

Getting more traffic is one thing but converting them is a whole new ball game. Read this article on ways to increase mobile conversion rate.