PMG Digital Made for Humans

Tracking Single Page Web Apps with Google Tag Manager & Analytics

3 MINUTE READ | June 6, 2016

Tracking Single Page Web Apps with Google Tag Manager & Analytics

Author's headshot

Christopher Davis

Christopher Davis has written this article. More details coming soon.

There’s quite a bit of outdated information about how to integrate Google Tag Manager (GTM) and Google Analytics into a single page application. The goal here is to keep your application blissfully unaware of GTM, and, fortunately it’s pretty easy to do.

So first off, fire up GTM and select your container or create one.

Just drop the GTM code snippet into your page right after the opening <body> tag as instructed. If you don’t have this code snippet, find it on the Admin > Container > Install Google Tag Manager screen.

Back in GTM, click on the trigger area and select New Trigger.

Google Tag Manager Triggers
Add New GTM Trigger

Give the trigger whatever name you like and select History Change for the event. History change will fire whenever something like Backbone or React Router uses the history API. We’ll use this trigger later to fire Google Analytics.

Google Tag Manager History Change

From here you can select whether it should fire on all history changes or only some.

Google Tag Manager All History Changes

A great example of only firing on some history changes would be restricting the trigger to fire only on your application’s production server.

Google Tag Manager Some History Changes

After you’re done, save the trigger.

First off, you’ll need to set up an analytics account and grab it’s UA ID. Hit the new tag button on the container overview (or click into tags and hit the new button).

New Google Tag Manager Tag

Select Google Analytics as the tag product and universal analytics as the tag type.

Google Tag Manager Google Analytics
?Google Tag Manager Universal Analytics

Configure the tag with your analytics account’s UA code (usually it looks something like UA-XXXXXXXX-X) and track page views.

Google Tag Manager Configure Google Analytics

Now we get to the reason why we created the trigger. Under fire on select all pages and then click more.

Google Tag Manager Google Analytics Fire On

We selected all pages to ensure the tag fires on initial load — the first time the user visits before your JavaScript router takes over and uses the history API to change the URL.

Clicking more will pop open a dialog with all your custom triggers. Select the history change trigger we created in step 2 above and hit save.

Google Tag Manager More Triggers

Once you’re done, save the tag. From here it’s a matter of testing the container and publishing the changes, both of which are outside the scope of this walk through.

There’s no need for a special library or ugly hacks like eval’ing the GTM code in a wrapper react component (something I saw preparing for this tutorial). Most importantly, your application can remain unaware of the GTM or analytics code.

Interested in working with us? See our open engineering roles here.

Stay in touch

Bringing news to you

Subscribe to our newsletter

By clicking and subscribing, you agree to our Terms of Service and Privacy Policy

Related Content

thumbnail image

Working with an Automation Mindset

5 MINUTES READ | August 22, 2019

thumbnail image

3 Tips for Showing Value in the Tech You Build

5 MINUTES READ | April 24, 2019

thumbnail image

A Beginner’s Experience with Terraform

4 MINUTES READ | December 20, 2018

thumbnail image

Tips for Holiday Reporting Preparedness

3 MINUTES READ | November 5, 2018

thumbnail image

Navigating the Amazon Ecosystem

2 MINUTES READ | September 10, 2018

thumbnail image

Our Approach to Marketing Automation

7 MINUTES READ | November 16, 2017

thumbnail image

ICYMI: The Next Big Title in Media Agencies

1 MINUTE READ | July 11, 2017

thumbnail image

A Simple Look At Natural Language Processing

2 MINUTES READ | November 9, 2016