Monster on Fire

GTM HistoryState trigger in an Ember app

30 October 2016

I have recently learnt how to use Google Tag Manager (GTM) to handle third-party scripts.

This past week, I worked on an issue related to the use of the Facebook Pixel and only having it fire under specific conditions on our Ember frontend.

What I wanted to achieve:

The goal was to fire the FB Pixel when new users signed up on the site. For our particular case, a user who has successfully signed up would get redirected to the page where they create a new trip. Meaning the conditions that would trigger the script were:

current route = Create a trip ( /trips/new )
previous route = Sign Up ( /session/register )

Using the GTM and the DataLayer:

ember-cli-gtm is a great addon for implementing GTM in an Ember app. But for further customisation, GTM has a javascript object called the Data Layer to which information can be pushed from your app and made available to you in the GTM UI.

In the GTM UI, create 2 Data Layer variables to correspond with the Data Layer info:
- gtm.newHistoryState.path
- gtm.oldHistoryState.path

Create a History trigger and configure:

This trigger will then be attached to the Custom Tag that is created for the FB Pixel base code.

Remember: When you have exhausted the number of possible keyword/question combinations to type into the Google searchbar, just ask smart people. Simo Ahava's blog, in particular, is a wealth of knowledge. Below are other helpful links:

Helpful videos:

Helpful Links:

That is all.