Scroll Tracking for AMP Analytics

Scroll Tracking for AMP Analytics

With Google’s recent push towards AMP, as well as WordPress and Yoast making it easy to set up, lots of sites now have AMP versions of their content especially on blogs such as this one. One thing I have noticed, however, is that many of these sites are neglecting their analytics setup quite severely. Often these sites have a pretty hefty amount amount of event tracking that passes back to Google Analytics to measure engagement with long form content, and given we know users on mobile scroll further down the page and are generally more engaged than on any other device type, I find it hard to believe that this kind of tracking is often completely absent on the pages designed completely for mobile!

I suspect that this is mainly because you can’t just drop an existing GA or Tag Manager pixel on the page and call it done (well actually you could, but this violates the AMP specification for not including external scripts and kind of defeats the point of the whole thing). Instead, the helpful people who created the AMP Project have created an official analytics script (which is allowed) and can interface with all the common analytics platforms. You then feed in configuration information to this script via some JSON which tells the script when to fire events, and where to send the data. It’s this JSON which does all the heavy lifting, but the structure is fairly simple. For Google Analytics, the basic pageview setup is as follows:

{
	"vars": {
		"account": "UA-12345678-9"
	},
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		}
		
	}
}

In this, we tell the browser that we are using GA with the tag, then in the JSON set up the UA number for our account in the vars and set up a trigger for something to happen when a condition is met. Here I’ve called the trigger trackPageview, but the name doesn’t actually matter, just call it something sensible and descriptive. This particular trigger fires when the page becomes visible and sends the standard GA pageview hit.

This is about as far as most sites seem to get, but it’s easy to take this setup and make it much more advanced!

To add a simple bit of event tracking, such as for when a particular element is clicked on, we simply add in another trigger with a firing condition and a request type of event.

{
	"vars": {
		"account": "UA-12345678-9"
	},
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"
		},

		"trackClickOnHeader"" : {
   		       "on": "click",
  		       "selector": "#header",
  		       "request": "event",
  		       "vars": {
  		          "eventCategory": "ui-components",
  		          "eventAction": "header-click"
      		       }
   	        }
		
	}
}

All we have to do differently here is to also specify the event category and action (along with the optional label and value) to pass through to GA.

Now we get on to the crux of this post: scroll tracking on AMP pages. Normally this requires you to write a whole bunch of JavaScript to count the length of the page in pixels, split it into sections and all that nonsense. Luckily for us, the AMP analytics already includes scroll tracking by default! It’s not mentioned at all in the official GA documentation for AMP, but you can find it on the Github for the project. Essentially it’s the same as any other event – define a trigger condition and what data you want passed back to GA.

For scroll tracking, the firing trigger is “on”: “scroll”, with an additional variable to define either the vertical or horizontal percentage of the page to fire on.

"scroll25Event": {
	"on": "scroll",
	"scrollSpec": {
		"verticalBoundaries": [25]
	},
	"request": "event",
	"vars": {
		"eventCategory": "Scroll Tracking",
		"eventLabel": "${ampdocUrl}",
		"eventAction": "25%"

This event fires when a user scrolls 25% of the way down the page. I’m also passing the page URL as the label here, just to make reporting easier, which I would highly recommend. To finish setting up scroll tracking, simply create a number of these triggers & events to fire sequentially as a user moves down the page.

In my configuration, I’m also incrementing a custom metric to measure users who reached the end of the content, but at time of writing, the AMP Analytics implementation of this isn’t fully working.

Leave a Reply

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