• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
June 06, 2016

Tracking Single Page Web Apps with Google Tag Manager & Analytics

Posted by Christopher Davis

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.

1. Installing GTM on Your Single Page App

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.

2. Create a New History Change Trigger

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.

3. Create an Analytics Tag

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.

google analyticsGoogle Tag Manager
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • Hindsight 2020 & Looking Ahead to 2021
  • Preparing for Streaming’s Growth & The Future of TV Buying
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.