How to use Google Tag Manager – Timely

This article is for:

Innovate

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. This is a multi-step process, and it is important you follow each set of instructions in order for this set up to be completed successfully. In this guide, you will learn how to track each step of the booking process and how to set up both Google Analytics and Facebook Pixel tracking tags

Important note: this feature is only available to businesses on our Innovate plan. Should you wish to upgrade your plan, you can find more information in our help guide How to change your Timely plan.

Important Information

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.

Step One: create the virtualPageURL data layer variable

This is the mechanism by which Timely can tell GTM what URL a client is currently on.

1 From inside your GTM account, click on the variables option in the left-hand menu.

2 Click on the new button to create a new user-defined variable.

3 Name the variable virtualPageURL, and choose a type of data layer variable.

4 Enter virtualPageURL in the data layer variable name field.

Step Two: create the 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.

1 Click on triggers in the left-hand menu, then on new.

2 Name the trigger VirtualPageview, and choose a type of custom event.

3 Enter VirtualPageview into the event name field, and leave this trigger fires when set to on all custom events.

Step Three: add the Google Analytics Tag

1 Click on tags in the left-hand navigation menu, and then choose a name such as Google Analytics.

2 Choose the tag type as Google Analytics - Universal Analytics, and set the track type as page view.

3 Check the tick box to enable overriding settings in this tag.

4 Enter your Google Analytics tracking ID (you will need to get this ID from your existing Google Analytics account) into the Tracking ID field.

5 Click more settings > fields to set. Then enter page as the field name and {{virtualPageURL}} as the value.

6 Now add your trigger you need to choose VirtualPageview and then click save.

Timely note:

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

Step Four: add the Facebook Pixel Tag

Before doing the following steps first make sure you have setup both the virtualPageURL data layer variable and the VirtualPageview trigger described above.

1 Click on tags in the left-hand navigation menu, and then on the new button.

2 Call the tag Facebook Pixel, and choose the tag type as custom HTML.

3 Paste in your Facebook Pixel Code from your Facebook Events Manager portal.

4 Click on advanced settings, and choose your tag firing options to be once per page. Then choose the trigger to be VirtualPageview.

Timely note: 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.

Step Five: create a purchase trigger

This trigger will allow GTM to be able to respond when one of your clients completes an online booking.

1 Click on tags in the left-hand navigation menu, and then on the new button.

2 Call the trigger purchase, and choose the type as a custom event.

3 Enter purchase into the event name field. Select this trigger fires on to all custom events, then you can save the trigger.

Step Six: create a purchase value data layer variable

This allows GTM to access the value of a particular online booking.

1 Click on variables in the left hand menu, and then on the new button.

2 Name the variable purchaseValue, and choose the type as data layer variable.

3 Enter purchaseValue into the data layer variable name field.

Step Seven: create a purchase tag

This tag is responsible for recording the Purchase event to your Facebook Pixel.

1 Click on Tags in the left hand menu, and then on the new button.

2 Call the tag Facebook Purchase.

3 Choose a Tag Type of Custom HTML. Then enter the following code into the HTML box:

<script>  
fbq('track', 'Purchase', {
	value: {{purchaseValue}},
	currency: 'AUD',
});
</script>

4 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.

5 Choose the purchase as the trigger, and save the tag. Congratulations, once you publish these GTM changes you should be able to see purchase events flowing through into your Facebook Pixel!