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:
- In the GTM UI, create 2 Data Layer variables to correspond with the Data Layer info:
- 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:
- How to use Custom HTML Tags in Google Tag Manager
- Virtual Pageview Tracking with Google Tag Manager and Google Analytics
- How to install the new Facebook Pixel with Google Tag Manager for Conversion Tracking
- Google Tag Manager course: The DataLayer [Preview]
- #GTMtips: Track URL Fragments As Pageviews
That is all.