Google Tag Manager and Single Page apps

23
votes

I'm trying to integrate Google Tag Manager with my Ember app. I'm having a hard time understanding how to notify GTM that the page changed, and send a page view event.

I've read a lot of things online, mostly working around creating a new variable for a "virtual page" or something, but obviously this is far from ideal.

I'd like to be able to just use dataLayer.push to notify the page actually changed. Is there an easy way out I didn't find or is it really a pain to track with GTM on SPA?

2
google-tag-manager
Curious, if VPVs are far from ideal, then what is ideal to you in your case of an SPA. VPVs are almost the only option for you, unless, of course, you change the page architecture of your site. That said, to use VPVs, you need to push an event each time the 'page' changes, and then trigger a pageview tag that fires and sets a new page name (ie. your VPV). - nyuen
@nyuen you seem to know what you're talking about. I was just wondering why it wasn't as easy as it is with GA, where I could just do a ga('send', 'pageview') and GA would be notify the page changed. - Benjamin Netter
@nyuen also, can GA be then notify the page changed directly from GTM, so I don't have to trigger ga('send', 'pageview') then dataLayer.push? - Benjamin Netter
I don't think it would be any easier with just GA. The tricky part is telling GA when to fire the pageview, because as you might already know, just scrolling down a page won't fire pageviews unless you tell GA "hey, the user just scrolled to this section - fire an event!". So this is what you may need to do - push events into the dataLayer so that your pageview tag can know when to fire. - nyuen
Well I'm currently only using GA when a page changes, nothing very specific. The thing is GA is already configured for this event, when GTM has to be configured, right? - Benjamin Netter

2 Answers

40
votes

This was asked quite a while ago. With the current feature set of GTM, you can easily set up SPA page tracking without much trouble.

First, go to Triggers and create a new trigger. Select History Change as the trigger type. This will create a trigger that fires every time the location history changes.

Then create a new Tag of Universal Analytics type and set it up as per the screenshot below.

[Universal Analytics tag configuration1

As for the trigger, set the previously defined History Change trigger, and you're done. Every time a navigation occurs in your SPA, a page view event with the proper page path will be triggered.

EDIT: as trognaders pointed out in a comment, this does not track the initial page view. To remedy, simply add an additional trigger for your tag that fires on the Page View event (All Pages). See screenshot below.

enter image description here

22
votes

You definitely need to push events into the dataLayer which you can then trigger a GA page view tag in GTM. So to push an event into the DL:

dataLayer.push({'event':'virtualPageView'});

Then setup a trigger called 'vpv' which fires on a custom event called 'virtualPageView'. Add that trigger to a GA tag.

The best thing to do is also send through the details of the virtual page when you send the event. This way you can set up variables that pull these dataLayer property values into the page view call. So you might do this:

dataLayer.push({
  'event':'virtualPageView',
  'page':{
    'title':'contact us',
    'url':'/contact'
  }
});

So you'd setup a variable called 'DL- page title' (for example) which is a dataLayer value of 'page.title' and another variable called 'DL - page url' which is a dataLayer value of 'page.url'.

You then setup a new Universal Analytics tag which has all your usual pageview settings but with 2 'Fields to Set' (under More Settings). Set 'title' to {{DL-page title}} and 'page' to {{DL - page url}}

Finally set the trigger to 'vpv' and you'll find everytime you push the event + data into the datalayer you'll get a pageView fired off with your virtual page's title and virtual url.