Share on facebook
Share on twitter
Share on linkedin
Share on email

Using Google Analytics for Accelerated Mobile Pages (AMP)

Most likely, you’ve ran across Accelerated Mobile Pages (AMP) on the web already. You might’ve noticed them because they look a bit different and appear at the top of relevant Google search results. Or you might not have.

Regardless, if you’re working in the News & Media industry, AMP is becoming increasingly important as a digital strategy. So, what is AMP? What are the benefits? And why is it becoming such a big deal?

 

What is AMP?

The Accelerated Mobile Pages Project came together as an open-source initiative that came out of the need to improve users’ online mobile web experiences.

From the AMP Project site:

The Accelerated Mobile Pages (“AMP”) Project is an open source initiative that came out of discussions between publishers and technology companies about the need to improve the entire mobile content ecosystem for everyone — publishers, consumer platforms, creators, and users.

As I mentioned earlier, you’ve most likely ran across some AMP pages before. Here are some examples in Google search results, using my favorite NFL team as a search keyword:

 

 

Accelerated Mobile Pages Google Results 2

And once you click into one of the AMP search result cards, the stories then look like this:

Accelerated Mobile Pages Google search results 3

Benefits of AMP

There are a few major benefits of utilizing AMP for your mobile content:

  1. Increased Page Load Speed: AMP uses HTML just like any regular web page, but they have a limited set of allowed technical functionality that is outlined by the open source project. This helps to improve page load speed by utilizing AMP HTML, the AMP JavaScript library, and the AMP cache.
  2. Reliable Cross-Browser Support: AMP will load reliably on all modern browsers and app webviews, so your pages will look and feel the same no matter what device you’re using.
  3. Card Views at the Top of Google Search: One of the really nice things about AMP is that they show up in a card view at the top of Google Search (see the screenshots above). I have yet to see any statistics associated with a higher click-through rate for these cards, but I would bet a year’s salary it’s significantly higher than the regular web page results below.

 

Analytics for AMP

One of the big focuses for the AMP Project was to ensure analytics tools could easily integrate with AMP. The AMP Project launched with 12 different technology partners within the analytics space:

  1. Adobe Analytics
  2. AT Internet
  3. Chartbeat
  4. comScore
  5. Google Analytics
  6. LiveInternet
  7. Moat
  8. Parse.ly
  9. Quantcast
  10. SimpleReach
  11. TNS
  12. Webtrekk GmbH

Three of the largest analytics vendors in the publishing industry are Google Analytics, Adobe Analytics, and Chartbeat, so it was great to see AMP support added for those from the very beginning.

 

Tracking AMP with Google Analytics

Now we’re getting into the most exciting section of the blog post. Sure, understanding AMP and taking advantage of its benefits are well and good. But how do you measure the performance of these new pages?

That’s where the AMP analytics integrations come into play. Essentially, the AMP Project worked with analytics vendors to build a single, uniform analytics architecture to support tracking pageviews and events, as well as make everything easier to set up.

The setup for Google Analytics is very similar to the setup for the other analytics vendors, though there will be some differences and customizations available depending on the vendor.

Currently, Google recommends creating a new GA property for AMP measurement, separate from any existing GA properties. This is because the tracking for AMP will measure things differently than the current analytics.js (Universal Analytics) library.

 

Setting Up AMP with Google Analytics

1. Create a new Google Analytics Property for AMP Measurement

Once you have the UA number (UA-XXXXX-Y) for your new property, save it because you’ll be adding it into your AMP page in the next steps.

2. Add the amp-analytics JS file to the <head> of your page (above the AMP JS library):

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

3. Add the amp-analytics component to the <body> of your pages

<amp-analytics type="googleanalytics" id="analytics1">
  ...
</amp-analytics>

4. Modify the amp-analytics component in the <body> to include pageviews, events, and social interactions

There are three types of trigger requests supported by amp-analytics:

  • “pageview” for pageview tracking
  • “event” for event tracking
  • “social” for social interaction tracking

 

Pageview Tracking

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

In the above example, amp-analytics is going to send a pageview to Google Analytics property “UA-XXXXX-Y” on page request.

amp-analytics has support for two additional variables:

  • “title”: To overwrite the current Page Title
  • “ampdocUrl”: To overwrite the current Page URL

 

Event Tracking

With event tracking, you can track a user’s interactions with elements on the page. In the below example, we’ve created a new request to track an event based on clicking of the #header element:

<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

Based on the elements you are wanting to track, you would need to modify the above example to select the correct element and send an event to Google Analytics.

There are four variables accepted with the event hit:

  • “eventCategory”: The category of the event (required)
  • “eventAction”: The action of the event (required)
  • “eventLabel”: An additional parameter to distinguish between similar events (optional, though we recommend using it)
  • “eventValue”: A numeric value associated with the event (optional)

 

Social Tracking

The last trigger request supported is for social interactions on the page. For example, you might want to track how many times the “Tweet” button has been clicked and send that to Google Analytics.

For social tracking to work, you’ll need to add an additional request using the “social” trigger:

<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.example.com"
      }
    }
  }
}
</script>
</amp-analytics>

 

In the above example, we’re tracking clicks on a Twitter “Tweet” element (“#tweet-link”) to share the particular URL on the social network.

The “social” hit accepts three variables:

  • “socialNetwork”: The social network on which the action occurs, like Twitter, Facebook, or LinkedIn.
  • “socialAction”: The type of action that happens, such as a Tweet, Like or Share.
  • “socialTarget”: The target of the social interaction, like http://www.example.com.

 

Adding Additional Information to amp-analytics Hits

As you may know, Google Analytics also supports collecting additional dimensions, called Custom Dimensions. You may want to collect additional information on the user or the content they’re viewing. To do this, you would need to add an additional “request” including the additional custom dimension parameters.

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "requests": {
    "pageviewWithCd1Cd2": "${pageview}&cd1=${cd1}&cd2=${cd2}"
  },
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageviewWithCd1Cd2",
      "vars": {
        "title": "Local News - Cincinnati",
        "cd1": "Registered User",
        "cd2": "Local News"
      }
    }
  }
}
</script>
</amp-analytics>

 

In the above example, the regular pageview is being modified to collect two additional parameters being sent as Custom Dimensions, “cd1” and “cd3” with values of “Registered User” and “Local News”, respectively.

Closing Thoughts on Accelerated Mobile Pages

For publishers in the News & Media industry, it’s becoming increasingly important to focus on the mobile experience. With the launch of the AMP Project, publishers have the means to deliver a uniform mobile experience that’s blazing fast and looks great.

While publishers were the first target industry to take advantage of AMP, you’re going to start seeing many other industries testing and adopting the AMP framework. eBay is currently testing AMP pages for its mobile shopping experience and I believe you’ll see even more ecommerce sites adopt AMP over the coming year.

The AMP Project is continuing to launch new features and functionality. You can check out their roadmap here.

 

Do you have questions on tracking your AMP pages with Google Analytics? Reach out to us and we would be glad to help!

 

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Other Articles You Will Enjoy

Google Analytics Templates and Shortcuts for Holiday Campaign Reporting

Google Analytics Templates and Shortcuts for Holiday Campaign Reporting

[Editor’s note: This article is part of our Black Friday series. For a look back on our Black Friday 2019 content, begin here.] With…

InfoTrust Becomes Official Google Cloud Partner

InfoTrust Becomes Official Google Cloud Partner

For years, the experienced cloud engineering team at InfoTrust has helped major multi-brand clients across the globe drive their business objectives forward. With a…

Deloitte Recognizes InfoTrust in Annual Technology Fast 500 Ranking

Deloitte Recognizes InfoTrust in Annual Technology Fast 500 Ranking

Last week, Deloitte honored the experienced digital analytics consulting, data governance, and technology team at InfoTrust among the 500 fast-growing North American companies in…

The Most Useful Google Analytics Reports and Dashboards for Black Friday

The Most Useful Google Analytics Reports and Dashboards for Black Friday

With the holiday season rapidly approaching, Black Friday weekend is just around the corner. Recently, we asked if your digital analytics team is ready…

Migrating Tag Inspector from Python 2 to Python 3

Migrating Tag Inspector from Python 2 to Python 3

Recently, our engineering team completed a migration of our proprietary tag auditing and management platform from Python 2 to Python 3. This upgrade brings…

Get to Know All the Products in the Google Marketing Platform

Get to Know All the Products in the Google Marketing Platform

While most organizations are aware of the Google marketing stack, many only utilize one or two of its products. While using a single Google…

In-Housing in Your Organization’s Future? Start with This Conversation

In-Housing in Your Organization’s Future? Start with This Conversation

It’s time to have a real conversation about your company’s internal structure and capabilities. Are you being asked by management to make in-housing a…

Tag Inspector’s Cookie Detection Feature Receives Quanties Award for Best New Technology

Tag Inspector’s Cookie Detection Feature Receives Quanties Award for Best New Technology

At the Digital Analytics Association’s OneConference event last evening in Chicago, Tag Inspector’s new cookie detection feature received the Quanties Award for Best New…

Lead Analytics Consultant Mai AlOwaish Honored with DAA President’s Award

Lead Analytics Consultant Mai AlOwaish Honored with DAA President’s Award

At InfoTrust, our team works not only to grow our business and community, but also to further the digital analytics industry as a whole….

Our website uses cookies and may collect user information to provide a good experience. Read our Privacy Policy here.

Leave Us A Review

Leave a review and let us know how we’re doing. Only actual clients, please.