Measure Your Accelerated Mobile Pages

Web sites that are not mobile ready pose challenges for those of us using mobile devices to visit them.  It has been years since having a mobile – or responsive – web site was easy to do, and yet there are still sites that are one-desktop-size-fits-all.  The newest thing is Google’s Accelerated Mobile Pages (AMP) and so I thought I’d take a look at it now that it’s been out a year.  If Google’s pushing a new direction on mobile, and if your site is dominated by referrals from Google like mine is, it makes sense to understand where they’re going.

In fact, I don’t really care where they’re going.  But I am curious about what it is.  And what accelerated mobile pages seem to be are just stripped down versions of your web pages.  Since I’m using a content management system, the page content and the template (how the content is presented) are separate.  AMP creates a new template for each page, so there’s no additional content work.  Mostly.

I had two concerns or curiosities:  how do I make my site AMP-enabled, and how do I measure AMP traffic?

Setting Up Amp on WordPress

This was easy.  Automattic, the makers of WordPress, have already created an AMP plugin for the CMS.  It works on single sites and, fortunately for me, on multisite WordPress installations.  I added the plugin at the network level and activated it for each site on which I wanted it running.

That’s where I stopped.  At this point, my curiosity was a bit disappointed.  I may end up going to Github to look more closely at what else you can do to customize the AMP pages.  They’re not very sightly and there are limited appearance changes you can make from the Appearance menu in the WordPress dashboard.  But it’s plenty for me – the AMP template reminds me of the look you got with some of the early “mobile site” plugins for WordPress.

It took me a bit to wrap my head around the fact that there wasn’t anything else for me to do.  Unlike a mobile site, which you might need to configure so that mobile devices are forwarded to it, AMP is referral driven.  The only way someone will see your AMP content is if a remote site is displaying a link to it.  For someone like me, who is just running a publicly accessible online journal, I can set and forget.  I am curious to see if my referral sources change much – I doubt it, because I’m not the publisher content AMP is geared toward – but time will tell.

The thing I wanted now was to make sure I knew when an AMP page was used.  If the answer is never, I may dump it as unnecessary overhead.

Measure Your AMP Activity

Many WordPress themes – the visual presentation layer or template that overlays your database-driven content – have a configuration option to allow you to drop in your analytics information.  In this way, you can tell it to use Piwik or Google Analytics and all of the pages using that theme are now tracked through the javascript element.

Not so with AMP.  There is no analytics code by default.  Fortunately, it’s easy to add.  Go to where you installed AMP (in multisites like mine, it’s at the network level) and, under the plugin entry, choose edit.  In the Single Page template, you can add the necessary code and customize it to your needs.  The most important piece is captured in this screenshot.

A screenshot of the code snippet to paste in to your Accelerated Mobile Pages template to activate Google Analytics

The only thing you MUST change is that UA-XXXXX-Y line.  Change it to your own Google Analytics account (if that’s what you’re using).  Unfortunately, since this change is made in the plugin, the next time the plugin is updated, you may need to repeat this step.  Unlike a child theme, where you can separate your customizations out from the main theme, so they’re not deleted when the theme updates, you can’t apparently do that with plugins.  I’m going to look at custom hooks to see if that’s a way I can make this permanent.

The hits should appear looking, in Google Analytics, like a normal page view but with the /AMP appended to the URL.  Similarly, you can see what an AMP page on your site looks like by typing /AMP at the end of any page.

My First AMP Hit (self-induced)

Like I said, for me, this isn’t a big deal.  Mobile growth appears to be a big deal and, for those measuring it or making money from it, AMP appears to be making a positive impact. My default AMP themes didn’t align well with my own CSS – the dark AMP theme meant that all of my links were blacked out, so I’m going with the light theme until I decide if I want to fiddle with more customization – and so I expect it won’t be uncommon for sites to have to tweak a little bit, if only to make sure the AMP content isn’t a subpar visitor experience.

When I put my library director hat on, I can see that using AMP to make our web-based resources more accessible makes obvious sense.  The question it raises for me is this:  is there a way for me to merge the responsive, mobile site and the AMP content – whether through templating, or by starting to drive mobile library users to the AMP content – as well as giving the benefit to the so-called publishers.