Google Analytics for AMP (Accelerated Mobile Pages)

AMP (Accelerated Mobile Pages) means a structure that is coded according to specific guidelines and provides users with a faster browsing experience. In this Google-supported structure, if the user makes a query on Google and Google finds an AMP-encoded page for that query, Google will provide the user with the cached page, enabling a faster browsing experience. Most of you have probably experienced this on news sites and other publishers.

It is indispensable for publishers to provide users with this experience. Because it is almost imperative to present pages of this structure in order to take part in Google News, which is the area where the publishers receive the most traffic. In addition to this imperative, we also have actions to take in the field of measurement.

Do We Know The Answers To The Following Questions Clearly?

• How can we measure AMP-supported pages with Google Analytics?
• Can we measure only the PageView metric for AMP-supported pages? How can we run custom dimensions, events and other actions?
• Can we make mistakes in measuring AMP-supported pages?
• There was an increase in direct traffic after the AMP transition, why?
• Which big websites have AMP pages with unsuccessful Google Analytics setup?
• Which big websites have AMP pages with a successful Google Analytics setup?

Before reading the findings and guidelines below, it’s a good idea to remind some of the concepts we need to know about Google Analytics first.

• Google Analytics works on a cookie basis. So if you visit a site via the same internet browser, Google Analytics will see you as the same user unless your cookies are cleaned. This user can, of course, create different sessions.
• Google Analytics assigns a client ID for each user. Then, it stores the ID on its database with the cid parameter.

Now, let’s talk about what kind of structure we need to build. There are actually two concepts in terms of technique and logic for sites that contain AMP pages. These 2 concepts are basically the same. The following is the logic we need to set up this structure.

If you have AMP pages, you can present a content to your users in 3 different structures.

• On your AMP-encoded pages (The domain here belongs to you)
• On standard pages that are not encoded as AMP (The domain here belongs to you)
• In AMP Viewer which is Google’s cache mechanism (The domain here is google.com or its derivatives)

We have mentioned that Google Analytics structure is based on browser cookies. If we have a site with AMP supported pages and we want to make accurate metrics, we need to display all content view requests from the same browser as a unique user. So if a user is viewing content from the same browser in 3 of the 3 scenarios I mentioned above, we should consider this as a unique user in Google Analytics.

How Do I Setup Analytics Tracking?

I mentioned that there are two concepts in terms of technique and logic. Based on the logic above, we should follow the technical steps below when installing Google Analytics for AMP-supported pages.

First of all, we need to decide whether we want to measure our AMP-supported pages through hard-coded or Google Tag Manager or hard-coded. I’m definitely in favour of hard-coded progression as someone who uses content grouping very actively and finds the features of the Google Tag Manager AMP container too weak. As someone who has already used both measurement methods, I peacefully recommend this.

You can find a few of these steps as standard content on every site that writes about Google Analytics setup. I have to give these steps for the integrity of this article.

As a first step, we need to add the following script to AMP supported pages.

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

However, you must also run the following code block in the hard-coded structure, so that you can complete the first phase of the measurement.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

The structure you see above belongs to a structure that will run both PageViews and click events according to the area you specify. These are known applications written by everyone. Are these applications sufficient? OF COURSE NO!

First of all, we need to know that we can get more data from our AMP supported pages. We can get custom dimensions and metrics related to content groupings as follows.

<amp-analytics type="googleanalytics">
    <script type="application/json">
        {
            "vars": {
                "account": "UA-111111-1"
            },
            "extraUrlParams": {
                "cd11": "dunya",
                "cg1": "dunya",
                "cg2": "Haber Detay - dunya",
                "cd4": "Haber Detay - dunya",
                "cd2": "Dünya",
                "cd9": "2792284",
                "cd7": " ",
                "cg3": "Son dakika... Macron'dan flaş Sarı Yelekliler kararı",
                "cd5": "Son dakika... Macron'dan flaş Sarı Yelekliler kararı",
                "cg4": "",
                "cd8": "",
                "cd20": "09/12/2018",
                "cd6": "True"
            },
            "triggers": {
                "trackPageviewWithCustomData": {
                    "on": "visible",
                    "request": "pageview"
                }
            }
        }
    </script>
</amp-analytics>

In the above structure, which I gave an example of the installation that I made in the AMP pages of milliyet.com.tr last year, I drew custom dimensions and values of content groups with cd and cg parameters. At this point, we have now collected our data and started measuring our AMP supported pages.

Is This Setup Correct?

NO!

If we leave our studies for measurement as above, we will cause the following errors to occur.

Higher

• Number of Users
• Sessions
• Bounce Rate

Lower

• Page / Session
• Session Duration

Let me explain the above situation with an example.

• A user searched Google using a mobile device, and an AMP-supported page appeared.
• When he entered this page, he read the content in the AMP Viewer under google.com domain.
• He then clicked on another content that he saw in this content, and went to a page in another AMP-supported domain which is the site’s domain (one of the pages under m.milliyet.com.tr/amp/).
• He then moved to another page in the site’s domain.
• Suppose he spent 1 minute in each of the 3 pages. The result in Google Analytics will be as shown below.
  • 2 different Sessions
  • 1.5 Pages per Session
  • 0.5 Minutes per Session (There is no evaluation in the first session because there are no extra views or hits. In the second session, Google Analytics calculates the total session time as 1 minute because it only receives actions in one place)
  • 100% Bounce Rate in first session
• In short, if we leave our measurement process like this, the above actions of the user means 2 different sessions, 2 different users and 2 different cookies.

How Can We Prevent This and Make Accurate Measurement on AMP Supported Pages?

Above, I said “we need to display all content view requests from the same browser as a single user”. Google Analytics is actually giving us an opportunity to use. This opportunity is called the “Google AMP Client ID API“.

Google’s definition of this feature: A service that allows you to uniquely identify and analyze a user’s experience of AMP and non-AMP content.

How is this feature implemented?

1. Activation on your AMP pages

You should run the following meta tag on your AMP supported pages.

<meta name="amp-google-client-id-api" content="googleanalytics">

2. Activation on non-AMP pages

The real issue starts here.

2.1. If you are using analytics.js, you should add a line like the one below.

ga('create', 'UA-XXXXX-Y', 'auto', {'useAmpClientId': true});

2.2. If you are using gtag.js, you should add a line like the one below.

gtag('config', 'UA-XXXXX-Y', {'use_amp_client_id': true});

2.3. If you are using Google Tag Manager, you should run the following variable as true in your variable structure containing Google Analytics Settings on non-AMP pages.

3. Exclusion of ampproject.org

What you need to do is add ampproject.org to the “Referral Exclusion” list in Google Analytics.

How Do I Verify Installation?

We have followed all these instructions. So how can we confirm this? As I mentioned above, we should measure a user who experiences these experiences as a single user. Therefore, all actions must be able to continue over the same client ID (cid). I will pass the test for this below.

1. We open a incognito tab in Google Chrome and activate the mobile emulator.
2. We do a search on Google to find an AMP-supported page from our site.
3. When we click on one of the content, we see our content in AMP Viewer (under google.com domain).
4. We go to the Network tab, type “collect” to apply as a filter, and find the Google Analytics request.
5. If you move to the Query String Parameters field on the Headers tab in the Network, you will see the cid parameter. If this parameter starts with amp- our installation is correct.

The above test actually shows us that our installation is correct in the first step. There are two things I want you to pay attention. The first one starts with cid amp-, please note this ID. Secondly, the content is offered under the google.com domain.

Now let’s see what happens if we go from this content to another content on the site or to another AMP page. Also, the main page, milliyet.com.tr, can also work as an AMP page. We made the transition here.

Notice that both domains have the same cid. This indicates that the same user is in progress.

Now let’s switch to any non-AMP page on the site. We have switched to the non-AMP homepage of milliyet.com.tr.

Notice that the cid in this area is still the same. So we showed content in 3 different areas in the same browser and technically we could see the same cid in 3 cases.

How to Detect This Situation in Google Analytics?

Let’s check this with the real-time test in Google Analytics. So let’s compare a user’s requests.

Successful Integrations

First of all, I entered a query which is not likely to be searched on Google which contains results for neredekal.com. Then, I viewed the Van Central Hotels page in neredekal.com under google.com domain. You can see how this view is reflected in the screenshot of the Google Analytics real-time report.

Then, I viewed this page under the domain m.neredekal.com because the AMP pages on this site are operating under www but the normal mobile site is running under m.neredekal.com. The screenshot that I caught when I viewed the report again looked like this.

As you have seen here, I was able to continue with the same user in the same browser even though there are different domains.

Unsuccessful Integrations

On the site I’m currently testing below, I found a page that received the least traffic a few weeks ago (not to coincide with another user at the same time), and I wrote a search query on Google that would give that page. I, then, used the path of related content to filter the real-time tracking screen in Google Analytics. I had an image like the one below and I was the only user. This was an AMP page running under the google.com domain.

Then I viewed the same content under a normal domain. The path of the content is the same, I am the only user again but I get the following screenshot.

As seen above, the result obtained in an incorrect installation fails. In fact, the same user is portrayed as more than one user, and this is particularly bad for direct traffic.

Which Websites Have Incorrect Google Analytics Setup?

Many major news sites in Turkey with AMP-supported pages, unfortunately, could not do this setup correctly. This may not be very noticeable on large websites, but at the end of the day, if they are reporting on Google Analytics data, they’ve been looking at erroneous reports since the day they made the AMP transition. Here are some sites I can give an example:

1- hurriyet.com.tr

2- haberturk.com

3- sabah.com.tr

4- evrensel.net

The team of evrensel.net made the necessary update for accurate measurement.

.@berkanbagci uyarısı sayesinde @evrenselgzt AMP sayfalarındaki ölçümleme hatasını düzelttik. Teşekkür ederiz.

— Mehmet Özer (@mehmetozer_t) December 13, 2018

 

5- cnnturk.com

6- haberler.com

7- onedio.com

I have prepared a very comprehensive guide to setting up Google Analytics for websites with AMP supported pages. With this guide, you can make the right installation and reach the point of no error in your measurements. As I mentioned above, if you do not do this setup correctly, you will have to perform erroneous analysis on all metrics related to the user, session, bounce rate, page / session and session.

In addition to the above referrals, I suggest you also review the Google Analytics Help Center.