Once you have connected Google Tag Manager to your Timely account it is important to set a few things up to make sure you are tracking each step of the booking process accurately.
The following guide will explain how to track each step of the booking process and also then how to set up both Google Analytics and Facebook Pixel tracking tags
But first a note on why this extra setup is necessary. The way Timely works is that there are three versions of the online booking process that your clients can access and each of these interact with Google Tag Manager slightly differently.
For the mobile and widget (iframed) versions of the online booking process, each step is a new page load and will be recognised as separate page views in Google Tag Manager out of the box. However, for the desktop/laptop version of Timely online booking, each step of the process is powered by AJAX requests that won't by default be recognised as new page views. To get these steps to be picked up you will need to follow the steps below to have each step in the process be recognised using virtual page views. This is particularly important if you are using page URLs for tracking your goals inside Google Analytics.
The following steps will provide you the tools for accurate tracking with GTM and Timely.
- Create the virtualPageURL data layer variable
- Create the VirtualPageview trigger
- Adding the Google Analytics Tag
- Adding the Facebook Pixel
- Create Purchase Trigger
- Create Purchase Tag
Create the virtualPageURL data layer variable
This is the mechanism by which Timely can tell GTM what URL a client is currently on.
- From inside your GTM account, click on the Variables option in the left-hand menu
- Click on the New button to create a new User-Defined Variable
- Name the variable virtualPageURL
- Choose a type of Data Layer Variable
- Enter virtualPageURL in the Data Layer Variable Name field
Create VirtualPageview Trigger
This step sets up the trigger which you can then use in any of your tags that you want to respond to fire on each step of the online booking flow.
- Click on Triggers in the left-hand menu
- Click on New
- Name the Trigger VirtualPageview
- Choose a type of Custom Event
- Enter VirtualPageview into the Event name field
- Leave This trigger fires set to on all custom events
We now have all the ingredients necessary to accurately record each step of the online booking process in the Analytics solution of your choice. First up...
Adding the Google Analytics Tag
- Click on Tags in the left-hand nav
- Choose a name like GA
- Choose the tag type as Google Analytics - Universal Analytics
- Set the track type as Page View
- Check the tick box to enable overriding settings in this tag
- Enter your Google Analytics tracking ID (you will need to get this ID from your existing Google Analytics account) into the Tracking ID field
- Click More settings
- Click Fields to set
- Enter page as the Field Name and {{virtualPageURL}} as the Value
- Now add your Trigger, you need to choose VirtualPageview and save
To make the most of Google Analytics we suggest you filter out the obg and opg querystring parameters. This will ensure that your GA stats will nicely group your page views based on the step URL. To do this follow these steps from within your Google Analytics account:
- Click Admin at the top of any Analytics page.
- Use the menu in the View column to select the view you want to edit.
- Click View Settings.
- Under Exclude URL Query Parameters: Enter obg, opg
Adding the Facebook Pixel
Before doing the following steps first make sure you have setup both the virtualPageURL data layer variable and the VirtualPageview trigger described above.
Setup the Pixel Tag
- Click on Tags in the left-hand nav
- Click on the New button
- Call the tag Facebook Pixel
- Choose the tag type as Custom HTML
- Paste in your Facebook Pixel Code from your Facebook Events Manager portal
- Click on Advanced Settings
- Choose your Tag firing options to be Once per page
- Choose the Trigger to be VirtualPageview
Along with setting up the Facebook Pixel tag we recommend also setting up the following Purchase Tag, Trigger, and Data Layer Variable to record Purchase events into your Pixel that will allow you a straightforward way to measure conversions for Facebook.
Create Purchase Trigger
This trigger will allow GTM to be able to respond when one of your clients completes an online booking.
- Click on Triggers in the left hand menu
- Click on the New button
- Call the Trigger Purchase
- Choose the Type as a Custom Event
- Enter Purchase into the Event name field
- Select This trigger fires on to All Custom Events
- Save the Trigger
Create Purchase value Data Layer Variable
This allows GTM to access the value of a particular online booking.
- Click on Variables in the left hand menu
- Click on the New button
- Name the variable purchaseValue
- Choose the type as Data Layer Variable
- Enter purchaseValue into the Data Layer Variable Name field
Create Purchase Tag
This tag is responsible for recording the Purchase event to your Facebook Pixel
- Click on Tags in the left hand menu
- Click on the New button
- Call the tag Facebook Purchase
- Choose a Tag Type of Custom HTML
- Enter the following code into the HTML box
<script> fbq('track', 'Purchase', { value: {{purchaseValue}}, currency: 'AUD', }); </script>
- In the currency field, please use the currency code (e.g. USD or GBP) that is specific to your country. The above example contains the code for Australian dollars.
- Chose the Purchase as the Trigger
- Save the Tag
Congratulations, once you publish these GTM changes you should be able to see purchase events flowing through into your Facebook Pixel