An overview on how to track AMP and Progressive Web Apps in Google Analytics

1. AMP’lifying Your
Google Analytics

2. HELLO
I’m Ben Johnston
❑ SEO & Data Analytics Director For ESV Digital
❑ 13 years experience, 11 agency side
❑ Spend a lot of time making Google Analytics work
❑ Always looking to try new technologies
❑ I love what I do
2
• https://www.linkedin.com/in/ben-johnston-seo/
https://twitter.com/ben_johnston80
• https://www.ben-johnston.co.uk/
• https://www.esvdigital.co.uk

3. What We’ll Cover
❑ What is AMP?
❑ What are PWA’s?
❑ How are they different?
❑ How to track AMP in Google
Analytics
❑ How to track PWA’s in Google
Analytics
❑ Best practices
❑ Questions

4. What Is AMP?
❑ Stands for Accelerated Mobile Pages
(PLEASE don’t call them AMP pages!)
❑ Stripped-down pages with minimal
HTML, CSS & JS
❑ It’s a Google initiative, using their
CDN
❑ Loads very fast on mobile and is
generally easier to read
❑ It’s great for publishers, but there are
other uses
4

5. How Does AMP Work?
❑ It creates AMP versions of your
content
❑ This leads to secondary URLs for
mobile
❑ It’s vital that your canonical tags
are set properly
❑ It also means you need to
update your Google Analytics
setup to track them effectively
5

6. What Are PWA’s?
❑ Stands for Progressive Web Apps
❑ Allows your website to exhibit app-
like behaviour on mobile
❑ They have to be fast and reliable
❑ Can send push notifications, pin to
home screen and download for
offline browsing
❑ They work better on Android at the
moment, but iOS support is
improving
6

7. Installing Tracking For PWA’s
❑ Setting this up is usually a pain
❑ If your PWA is built through JavaScript frameworks like React or
Angular, regular pageview tracking won’t work (although some
WordPress plugins deal with it better)
❑ Sadly, there’s no one-size-fits-all solution for this
❑ You need to use the History Change triggers in GTM to manage
navigational elements and push through virtual pageviews
❑ More on that later
7

8. What’s The Difference?
❑ AMP is using the same content over Google’s CDN and
providing a different experience for mobile users
❑ The idea is that AMP will provide users on 2g or poor signals
with a fast experience. Ideal for content sites
❑ PWA’s are about providing an app-like experience for mobile
users
❑ They allow sites to be installed on a device, browse offline and
use push notifications
8

9. Setting Up GA For AMP
❑ Since this is largely consistent, there are some hard and fast rules for this:
❏ Do not mess with your master view
❏ DO NOT MESS WITH YOUR MASTER VIEW
❏ Use a filter to unify your content
❏ Use content groupings to isolate AMP and non-AMP URLs
❏ Create segments for AMP and non-AMP content
❏ Create an AMP-specific view & a non-AMP specific view
❏ More details at https://www.ben-johnston.co.uk/amp-google-analytics/ (it’s
on AMP, too!)
9

10. Setting Up GA For AMP
❑ Since we’re dealing with the same content with
different URLs for different devices, we want to make
our Google Analytics nice and simple
❑ Your master view should remain unchanged in terms of
filters – this is your data’s history, you need to be able to
look back at this. Use regex in search if needs be
❑ First, we’ll create a Unified Content view
10

11. Creating A Unified Content View
❑ We’re going to assume that all URLs
contain /amp/
❑ Create a new view in Google
Analytics and apply the following
filter
❑ This view will rewrite all URLs to unify
your pages, whether they have /amp/
or not
❑ You’ll have a top-line view of all your
content
11

12. Creating AMP & Non-AMP Views
❑ Ideal for isolating
performance with maximum
accuracy (for GA, at least)
❑ Create filtered views based
on your AMP parameters
❑ Remember to create one for
AMP and one for non-AMP
12

13. Content Groupings
❑ No one uses these
enough
❑ You can add these to
your master view
❑ They will let you isolate
AMP and non-AMP
traffic for ad-hoc
analyses
13

14. Using Content Groupings
❑ Once you’ve created
your content groupings
(one for AMP and one
for non-AMP), you can
use them within the
Site Content section of
GA like so
14

15. Segments For AMP & Non-AMP
❑ Nothing beats a segment for a
quick overview
❑ They’re not always the most
accurate, due to sampling, but
for a quick look, they’re ideal
❑ Here’s how to create them
❑ Remember to do one for AMP
and one for non-AMP
15

16. Your Final AMP Google Analytics Setup
❑ You should end up with the following:
❏ A unified view: A Google Analytics view that lets you see overall performance of your
pages at a glance, making no distinction between AMP and non-AMP content
❏ AMP and non-AMP content groupings in your Master View: By using content
groupings, you’re able to compare the performance of the two different platforms in
your main reporting view
❏ AMP and non-AMP segments: These will let you compare the performance of the two
at a glance, but should only be used for a quick look rather than for in-depth analysis
due to accuracy
❏ A separate AMP view: A view only for your AMP traffic, which you can set up to track
your key goals accordingly, especially if your mobile goals differ from your main site
goals
16

17. Tracking PWA’s Using Google
Tag Manager
❑ As alluded to earlier, this can be a pain
❑ Today, we’re just going to focus on PWAs that are not single page
❑ This means Google Tag Manager Preview Mode stays when you change page and
the URL switches when you do
❑ If this happens, great – we have fairly consistent GTM elements which we can focus
on
❑ If you have one where the above conditions don’t occur, talk to me later
17

18. Tracking Pageviews In PWA’s
❑ The History Listener trigger identifies when
something has changed in your PWA, be it
a new page or a new event
❑ Run a preview using All History Changes
❑ If you get numerous changes when
moving between pages, you need to chat
to your developer
❑ Again, there is no hard and fast solution
here – it depends how your PWA is built,
but there are a number of filters which can
be applied based on URL strings
18

19. Tracking The Cool Stuff
19

20. Tracking The Cool Stuff
❑ PWA’s bring a lot of extra functionality, which is really
quite exciting:
❏ Push notifications
❏ Offline usage
20

21. A Note On The Measurement Protocol
❑ The Measurement Protocol is an advanced Google Analytics area that
lets you make direct requests to the system and push raw data into
Google Analytics
❑ You can use it in a number of ways, including editing previous hits
❑ It can be used to measure activity in alternative environments
❑ It can tie online and offline behaviour together
❑ It can push and pull data between your site and GA
❑ It’s the perfect platform to track the additional functionality of
Progressive Web Apps
21

22. Service Workers
❑ Service Workers are the key element which distinguishes PWAs
❑ They are JavaScript files which run outside of the main browser
thread, caching resources and sending pushes if required
❑ We’re assuming your service worker is registering rather than having
to use Window events
❑ Yes, I know, we’re making a lot of assumptions here
❑ A correctly-configured service worker makes it easier to track PWA
functionality
22

23. Tracking Offline Usage
❑ There’s no one-size solution here
❑ You need to configure your service
worker to engage with the
Measurement Protocol
❑ https://medium.com/dev-
channel/tracking-pwa-events-with-
google-analytics-3b50030d8922 has
great resources around this
❑ You will need to create custom
dimensions to track this in Google
Analytics
23

24. Custom Dimensions In Google
Analytics
❑ The easiest way to push these
through is with Google Tag
Manager
❑ Ensure that your service worker
pushes through a URL
parameter for offline users, such
as #offline
❑ Create a GTM variable to capture
those page values
24

25. Custom Dimensions In Google
Tag Manager
❑ In Tag Manager, click Variables
❑ Under User-Defined Variables, click New
❑ Click Variable Configuration and select URL
as the variable type
❑ On the Variable Configuration page, set the
Component Type to Fragment
❑ Name the variable, e.g. "URL Fragment
Variable"
❑ Click Save
25

26. Custom Dimensions In Google
Tag Manager
❑ Click Variables and then select your Google
Analytics Settings variable
❑ Open the tag for editing and navigate to More
settings and then Custom Dimensions
❑ Click +Add Custom Dimension
❑ Enter the Index value that you captured in step
1
❑ For Dimension Value, use the variable selector
icon variable selector icon to select the name of
the variable that you created in step 2
❑ Click Save
26

27. Best Practices
27

28. Best Practices For AMP
❑ Create separate views for AMP and non-AMP traffic
❑ Create content groupings within your master view
❑ Create segments for AMP and non-AMP (don’t rely on
them)
❑ Create a unified view
❑ Read this for overall best practices for Google Analytics
28

29. Best Practices For PWA’s
❑ Be nice to your devs!
❑ Understand that there’s no one-size-fits-all
❑ Use # or similar in your URLs for offline or push
elements
❑ Be consistent around how you do that
❑ Create separate views for these
29

30. Questions
30

31. Thank You
31