Implementing Google Analytics in AMP Websites Using Google Tag Manager

Implementing Google Analytics in AMP Websites Using Google Tag Manager
October 18, 2017 Muhammed Zain
Implementing Google Analytics in AMP Websites Using Google Tag Manager

Implementing Google Analytics in AMP Websites Using Google Tag Manager

One of the few hot topics being discussed these days is the AMO project by Google. In this article we are going to discuss how you can employ AMP Analytics to your site and how it can be installed via Google Tag Manager.

Before we begin, here are the topics that we will be discussing in this artcle:

1.    What is AMP

2.    Setting up AMP on a WordPress site

3.    Google Analytics for AMP websites

4.      Implementing AMP Analytics through Google Tag Manager

google tag manager google analytics

Part #1: What is AMP?

Since there is a whole lot of content that has already been published on this topic, thus to make sure that we are on the same page we will be going through a short overview.

Google has been spearheading an open source project known as AMP. Its primary goal was to reduce the load time of news websites when being viewed on mobile devices.

With time the project has developed as AMP was recently included by Google to its search results page. This came together effectively with prioritization of mobile sites, yet AMP pages are still not being given priority officially but is expected to happen soon.

This project was initiated following the increased site traffic that was leaking from desktop to mobile devices. Still, majority of the mobile sites have not been adjusted to be mobile friendly by the site owners.

The terms “mobile friendly. “adapted and “responsive” have long been heard and repeated but the loading time, which is the most significant and problematic factor related to mobile sites has not been solved.

There is no debate about the fact that the user experience is greatly influenced by speed. A study conducted by KISSmetrics discovered that 40% of the site visitors left when the loading time of a site exceeded 3 seconds. Another research  found out that for every additional second a website took to load, the site conversion rate was reduced by a frightening 3.5%.

In a video, Google addressed the issue that the highest contributors towards site lag are the analytics systems and advertising networks that are installed on that website.

Yes, this problem can be tackled with the help of an AdBlocker at the user’s end. But here, we are talking about the huge losses of ROI that big publishers face which seems to be the exact reason Google decided to get involved are come up with a solution that will be safeguard the interest of all stakeholders.

 

 

There are Three Parts in an AMP Website

1.    AMP HTML – contains a list of custom tags, a lot of restrictions and a few additions that enable rich content. An example can be that when you replace the <img> tag with the <amp-img> tag it will enable the page to render the images only as the user sees it on his screen, instead of loading together with all the page’s elements so that the user experience is not harmed.

 

2.    AMP JS – In AMP pages only some specific tags can be used. The main aim of AMP JS is to convert anything that contains Javascript into an asynchronous element. When Javascript is loaded in parallel to the other elements of the page rather than being loaded upfront, it avoids additional loading time that may harm the user experience.

3.    Google AMP Cache – the user display is optimized by Google’s proxy server as it saves the pages, the user experience faster loading times.

 

After a quick overview, we would now look at the technical part:

Part #2: Setting up AMP on a WordPress Site

What you need to do first is to install this AMP Plugin by Automatic by going to the following link: https://wordpress.org/plugins/amp

AMP produces a slimmer version of your website and you might not like some of the changes it makes to the website design and want to change them. To do that you need to use a custom action addition to WordPress as it is explained here.

The plugin will from now on create an AMP version for all the posts and the all the pages you have on your website. To be able to see it, you just need to add /amp/ at the end of the original URL and in case that does not work you can also add /?amp=1.

Doesn’t this cause redundant content?

Well, No because due to the plugin a canonical tag is added to the AMP pages that leads to original content

How does Google know to index the AMP pages?

The plugin adds a special tag with rel=”amphtml” attribute, which leads to the AMP version of your page. So, when Google’s crawler indexes the original page, it will see that it also has an AMP version.

This is how this tag works: <link rel=”amphtml” href=”https://www.example.com/url/amp”>

Part #3: Google Analytics in AMP Sites

Before we move on and discuss about Tag Manager, we would first like to analyze why do we require a different Google Analytics for our AMP site and why just adding them to our regular property won’t work.

JavaScript often slows down the rendering time and since the entire idea behind AMP technology is to speed up mobile pages It will not allow you to easily embed JS in your page. For you to be able to embed JS in your page, you have to use a special tag which has approved and pre-tested by the AMP team.

A number of other tags for several leading analytics systems have also been created by the AMP team. You can do this by simply using the ‘type’ attribute to add the desired vendor.

Some of the leading systems that are already approved by AMP include Adobe, Chartbeat, Yandex, segments and Google Analytics.

Before we move on, it is important for you to know that by using an iframe you can embed any JS. This isn’t the solution though since we want the Google Analytics code not to be loaded via an external iframe but instead sit directly within the page.

SHOULD I SPLIT THEM UP INTO TWO PROPERTIES, OR MEASURE IT ALL UNDER ONE PROPERTY?

The answer to the above question varies depending on your site although Google has recommended to open a separate property.

Since fundamentally these are two different kinds of sites it is recommended that you should include AMP pages under the regular property and should also set up an additional property for AMP specifically. For tracking the clientid, AMP uses a different format, thus it is advised you should read this post by Simo Ahava first.

We should also keep in mind that alongside the AMP pages the visitor will also view pages that are non AMP and if you plan to track them across pages with different properties you may miss plenty of information about you visitor due to a cutoff session.

 

Part #4: Installing AMP Analytics using Google Tag Manager

Here comes the interesting part.

Firstly, for our AMP website we need to open up a separate container.

No, you cannot use your regular container. As we mentioned earlier, speeding up your website was the primary objective behind the creation of AMP and for that reason you cannot use a regular container as it uses a non-adjusted JavaScript.

Triggers that are available in the standard container cannot be used as AMP’s HTML is customized. Keeping this I mind, we need to open a new container, select AMP and get the code to embed in our site.

google tag manager google analytics

google tag manager google analytics

You need to make sure that Child-theme is being used as we will change the function.php file of the template. If this is not done, you may find yourself without any tracking once you decide to upgrade the template.

 

Another way to do this is to use a plugin similar to this. Since the blend AMP <> Google Tag Manager is new, the is yet no plugin available that allows you to do this without a bit of trouble with code (at the time of this writing).

Since we believe that the more plugins you have the heavier is your website thus we advise you to always have things hard coded as it will allow you to have more control on what is going on.

The sole purpose of AMP was to streamline site rendering and we don’t want to slow it down because of plugins that are redundant.

After you are done with creating your child template, take the first part of the code and embed it as follows in your function.php file:

google tag manager google analytics

After that, take the second part of the code and embed it as follows:

google tag manager google analytics

Please note If you are not familiar with code please leave the task to an experienced developer because the smallest mistake can cause your site to fall.

Please note #2: Don’t forget to change the number in GTM-XXXXXX according to your container id.

And… that’s it! Tag Manager is now embedded in your site. Now let’s see how to configure it.

Several interesting triggers and variables that do not come built in with regular Tag Manager are available with Tag Manager for AMP websites. We would now create our first tag – Google Analytics.

google tag manager google analytics

There are no special tricks here and its works exactly as we have done so far via regular Tag Manager.

Now, lets move further towards more interesting topics.

 

 

VARIABLES IN TAG MANAGER FOR AMP

As you must be knowing, Tag Manager’s variables are essentially “functions” which return certain values.

For example, the Data Layer Variable will return values from the data layer and the Page URL variable will return the URL of the page.

As is the case with a regular Tag Manager, several built in variables can be found such as Page Hostname, Event, Click ID, Click URL, Click Classes, Page URL, Form classes, Form ID etc. You can click here  for a full list of available variables.

google tag manager google analytics

Also, where and as needed, we can also manually create additional variables:

google tag manager google analytics

 

We can find interesting and cool values such as such as user’s time zone, screen width/height, number of pixels the user scrolled, Total Engaged Time in Google Tag Manager for AMP sites. You can visit this link for a full list.

These variables can be and are available to be used automatically and all we need to do is put them into tags.

TRIGGERS IN TAG MANAGER FOR AMP

By using Google Tag Manager we can use triggers to track page views, can track how many times a certain element is clicked, send a form and custom events that we can send to the data layer. There also are several other triggers but these are the important ones.

The AMP container has slightly different triggers, while Google has also included triggers for page visibility and scrolling:

google tag manager google analytics

SENDING AN EVENT WITH TAG MANAGER FOR AMP

We have seen the Page View trigger in action with the Analytics tag. Now we will show how to track the user’s scrolling actions when the user reaches 25%, 50% and 100% of the page respectively and send this event to Google Analytics.

For this you need to create an new Tag with the name of Universal Analytics and enter the number of the property in either UA-XXXXXXX-Y format or you can create a Constant Variable containing this number that we had created earlier, and desired values can be entered under Category/Action/Label/Value.

As per m case I entered a constant value “Scroll” under Category,  and I put in a variable called {{Scroll Top}} under action, what is does is that it returns the number of pixels the user has scrolled down from the top of the page. Under Label, I put in {{Scroll Height}} that will return the height of the page in pixels (both are built-in variables):

google tag manager google analytics

We will create a trigger after this that is supposed to send this event, and under vertical percentages we will also include the percentage points at which we wish to send the event. Also, by using commas it is possible the enter a list of more than one area:

google tag manager google analytics

We debug our events usually via Google Analytics Debugger, the problem is that until now it does not support those events sent by AMP pages.

We will use the network section in Chrome as a shortcut, by doing this we will be able to see the all the requests that are sent by the browsers to Google Analytics servers.

You can also see events that are sent to Analytics using the real-time report!

google tag manager google analytics

 

TRACKING CLICKS IN AMP PAGES USING GOOGLE TAG MANAGER

It is a really very good idea to track scrolling actions, we will here see how to track users that have left the AMP page after they clicked leave a comment button. It may seem that they have left the site, but we need to make sure if they really have left the site or just switched to the regular mobile site which obviously is being measured using a different property than that of AMP property, which triggers another session.

google tag manager google analytics

This is simple, all we have to do is create a fresh Event tag for Universal Analytics, but this time we will use a different built in variable which is known as {{Total Engaged Time}}. This will provide us with the exact number of seconds a user was on a page which will tell me how much time was taken by a user to go through the article and then leave a comment.

Later, we will be able to evaluate and compare this with the other actions made by other visitors and it will also help us obtain insights about how much time a user should stay on our page in order to leave a comment.

google tag manager google analytics

The trigger for this tag should be Click event, then CSS Selector and then I will add “.amp-wp-comments-link a”.

google tag manager google analytics

You should at this point note that in this particular case, we are talking about an element inside a div element (which holds the class), and so we have entered both elements and have divided them with a comma. We can never predict beforehand which element will be identified by the tag manager as the clicked element. Thus, it is advised to put in any sub elements as well as the main element in order to be on the safe side.

Important: Since AMP will completely change your site’s structure, It is important to note that the selectors that you will be using are entirely different from the ones that you may be familiar with from your regular site.

We will debug this, let’s click on the button and see what event was sent:

google tag manager google analytics

As we can see, it has been sent but with a small bug. You may have noted that main domain appears under the Event label without the path despite of the fact that we used {{Page URL}} variable.

We will update our post once it gets sorted out.

Conclusion

In contrast with what you might have thought in the beginning about setting up Google Analytics via Tag Manager in AMP sites, in reality it is much simpler than Tag manager for regular web sites.

Keeping in mind the how easily we can enable WordPress sites to support AMP, it is most likely that this will turn out to be a standard in the near future as Google too is pushing this hard. We think that the quicker this change is adopted by website managers and owners, the better.

Not to forget the improved user experience it provides it is important that you start and plan this changeover immediately and also set up a proper tracking.

Comments (0)

Leave a reply

Your email address will not be published. Required fields are marked *

*