This website uses cookies to ensure you get the best possible experience. See our Cookies Policy.

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

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.

Insights meet inbox

Sign up for weekly articles & resources.


Posted by Christopher Davis

Related Content

Get Inspired

Working with an Automation Mindset

5 MINUTES READ | August 22, 2019

Get Informed

Parsing Redshift Logs to Understand Data Usage

7 MINUTES READ | May 6, 2019

thumbnail image

Get Inspired

3 Tips for Showing Value in the Tech You Build

5 MINUTES READ | April 24, 2019

Get Informed

A Beginner’s Experience with Terraform

4 MINUTES READ | December 20, 2018

Get Informed

Tips for Holiday Reporting Preparedness

3 MINUTES READ | November 5, 2018

thumbnail image

Get Insights

Navigating the Amazon Ecosystem

2 MINUTES READ | September 10, 2018

Get Insights

Our Approach to Marketing Automation

7 MINUTES READ | November 16, 2017

Get Informed

ICYMI: The Next Big Title in Media Agencies

1 MINUTE READ | July 11, 2017

Get Informed

A Simple Look At Natural Language Processing

2 MINUTES READ | November 9, 2016

ALL POSTS