Please consider using the custom success page (How to track widget conversions using Google Analytics?) method as it is a lot simpler. Because the widget is a single page application, that's part of your page, it doesn't trigger the tracking tools as the user goes through the booking process steps. As a consequence, we need to add custom events to Google Tag Manager to be able to fire these tool tags when the user reaches the desired step in the booking process. This guide goes through the process of adding an event for booking success step which, in turn, can be used to fire any tag you want.

If you're looking for Google Analytics to be fired on the success page, please see this tutorial: How to track widget drop off using Google Analytics?. This tutorial won’t cover Google Analytics, but would work in addition to that tutorial with other tracking tools like Facebook Pixel, Google Ads, and anything else that requires to be triggered at the booking confirmation step. If you already have done the How to track widget drop off using Google Analytics? tutorial, you should skip the first 3 steps in this one.

Before we start...

It's important that your widget is embedded in a standard way. If it uses the IFrame method, you won’t get correct sources for bookings.

1. Create a new GTM Container

Log in to your Tag Manager account at tagmanager.google.com where you will be presented with a list of your current Containers. Click on the three dots at the top right hand corner and choose ‘Create Container’.

Enter a Container name of your choice and choose the “Web” type.

Click Create and you should see the code Google Tag Manager wants you to embed. We won’t need the whole code, so you can close that window.

Instead, copy the ID that is shown on the top right corner which will look something like this GTM-xxxxxx.

2. Add the Google container ID to your diary settings

Note the ID of your new Container (GTM-xxxxxx) and in your diary go to:

Settings > Reservations > Widget and Portal Tracking

Choose Tag Manager as the Tracking Type and enter the ID of your new Container:

3. Create custom variables

Return to Google Tag Manager, and click on the newly created Container in your Containers list to go to the Container workspace.

On the left-hand sidebar, click on Variables and then click on the New button in the User-Defined Variables section:

Then click on the icon in the Variable Configuration section.

 Choose a Data Layer Variable from the list of variable types.

Then configure the variable as follows:

(click on the image to zoom in)

Important: variable names are case sensitive.

Repeat the steps above to create a second custom variable named "virtualPageTitle".

(click on the image to zoom in)

4. Create a custom trigger for conversion step

On the Triggers menu, click New.

Choose Custom Event from the list:

Complete the configuration as follows:

(click on the image to zoom in)

“/resdiary-widget/success” is the virtual page URL triggered by the widget upon successful booking. You could replace this with any other virtual page URL from the widget. To see the full list of available pages see the section at the end of this article.

5. Create a new tag for tracking the conversion step

On the Tags menu, click on the New button and finally click on the icon in the Tag Configuration section:

Select “Custom HTML” from the Tag Types list:

Since you are adding a Custom HTML tag, you can add any tag code you want. That might be a conversion tag Google Ads Event Snippet, Facebook Pixel Event (Purchase), etc. 

In our case, we will add Facebook’ Pixel Event. The main Facebook Pixel tag gets fired once the page is loaded. Usually, you would add a Custom Conversion and specify the URL people visit to count as a conversion. However, since your booking is essentially completed by clicking a button, we use an Event to trigger the conversion.

Please read this article to find out more about Facebook Events: https://www.facebook.com/business/help/402791146561655

(click on the image to zoom in)

Finally, click on the Triggering icon and choose the custom “VirtualPageview - Conversion” trigger created earlier.

Save the tag giving an appropriate name like “Facebook Pixel - Event Conversion”. Of course, this only applies if you added Facebook Event tag. This name can be anything you want.

6. Preview and test

Click on the Preview button in the Tag Manager workspace and then, in another browser window, load the page containing the widget to be tested. You can do that by going to your Diary -> Promote -> Widget Configurator -> find your widget in the list and select “Get Embed Code” -> Standard.

Once you open this page, you should see the Google Tag Manager debug menu appear. Pay attention to the “Tags Fired On This Page” and “Tags Not Fired On This Page”. Your custom tag should be on “Tags Not Fired On This Page” section.

(click on the image to zoom in)

Go through the booking process and keep an eye on those sections. Once you reach the final stage of the booking, the tag should jump from “Tags Not Fired On This Page” to “Tags Fired On This Page” section.

(click on the image to zoom in)

Available widget virtual pages

The widget has been configured to send virtualPageURLs and virtualPageTitles on each page as follows: