This guide will show how to trigger events for each of the widget steps. In turn, these events, will be used for sending page views for Google Analytics. 

Before we start...

It is 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 this 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 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 and 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

On the left-hand sidebar, click on the Triggers section, then click on the New button and, finally, click on the icon in the Trigger Configuration section:

Choose Custom Event from the list:

Complete the configuration as follows:

(click on the image to zoom in)

5. Create a new tag

On the left-hand sidebar, click on Tags then click on the New button and, finally, click on the icon in the Tag Configuration section:

Select Universal Analytics from the Tag Types list:

Configure the tag as below, selecting  ‘New variable…’ from the Google Analytics settings dropdown.

Configure the new variable as follows, entering your own Analytics Tracking ID:

Important: please specify the actual Analytics Tracking ID (not a user-defined variable) e.g UA-XXXXXXX

(click on the image to zoom in)

Finally, click on the Triggering icon and choose the custom VirtualPageview trigger created earlier:

6. Preview and test

Click on the Preview button in the Tag Manager workspace and then, in another browser window, load the page that contains the widget to be tested. Create a booking in the widget. As you proceed through the booking process, you should see that a Virtual Page View event is fired on each page:

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

7.a. Set up Google Analytics goal with custom success page

Either do the A or B version of this step as it applies to different cases.

This case applies if you have a custom success page specified on your widget. You can check that by logging in to your diary -> Promotion -> Widget Configurator -> Edit Theme of your widget -> see if “Use custom success page” option is checked. If it is and custom success page url is specified use this version.

Go to your google analytics property > admin panel > Goals > create a new goal with the following parameters:

(click on the image to zoom in)

7.b. Set up Google Analytics goal without a custom success page

Either do the A or B version of this step as it applies to different cases.

This case applies if you don’t have a custom success page specified on your widget. You can check that by logging in to your diary -> Promotion -> Widget Configurator -> Edit Theme of your widget -> see if “Use custom success page” option is unchecked. If it is use this version.

Go to your google analytics property > Admin panel > Goals > create a new goal with the following parameters:

(click on the image to zoom in)

The only thing you will need to change is the URL path of your custom success page you have on your widget settings. You don’t need to include the full URL, just the page path e.g. “www.restaurant.com/booking-successful” would be just “booking-successful”.

8. Funnel visualisation

Please give it at least a few days for Google Analytics to gather enough customer data.

Go to your analytics dashboard -> Conversions -> Goals -> Funnel Visualisation -> make sure to select your goal.

You should see something similar to this: