How to add Google Tag Manager to your Online Booking

What is Google Tag Manager?

Google Tag Manager (GTM) is a marketing tool that allows you to configure and deploy tags to a website, including tags from Google Ads, Google Analytics, Floodlight, and 3rd parties. Tags, in a general sense, are bits of code you embed in your website’s javascript or HTML to extract certain information.

For marketers, necessary tag information typically includes how long users visit a page on your site, how they arrived on your site, which links they clicked, or even what products they removed from their shopping cart. 

Once you embed a GTM container onto a website, you can add new tags from within the GTM system, without requiring an update to your website. 

For more information on GTM please visit the following pages from Google:

Note: Phorest does not directly support further configuration within your GTM account, and the below documentation is the only additional information we can provide. If you have any further configuration queries we would advise you to contact your website administrator/developer or Google for support with your GTM account.

How can I use GTM with Phorest?

We can add a GTM container to your Online Booking platform for you. 

First, you need to have a GTM account set up at tagmanager.google.com. When you set up a GTM account, a new container is created by default. 

Once you have a container set up please log a ticket to Phorest Support by clicking the Contact Support button in Phorest, or by sending an email to support@phorest.com, requesting that your Google Tag Manager account be linked to Phorest. You will need to also include your GTM container ID which will be in the format GTM-XXXXXXX, as in the screenshot below.

Note: It is only possible to have 1 tag manager running across all pages. If you have multiple locations/branches within your business, the information reported in GTM will be a combination of data from all locations.

mceclip0.png

The relevant updates will then be made to your Online Booking. You can then add and publish your tags within your GTM account.

Google Tag Manager Booking Variables

When a booking is made using Phorest online booking you can track values like the order number, services ordered and overall cost.

In order to do this, using Google Tag Manager, you must set up user-defined variables in your tag manager account. The following is a list of variables available for you to track on the appointment confirmation page with online booking:

Order ID

A unique identifier for this booking.

This is exposed in the data layer as appointmentId


Services

The list of services booked with this appointment is exposed in the data layer as appointmentServices

Each entry in the list consists of

serviceId: The unique identifier for this service

serviceName: The name of this service


Total Amount

This is exposed in the data layer as appointmentTotalAmount


Deposit Amount

This is exposed in the data layer as appointmentDepositAmount


Once set up you can use these variables in your google tag manager account to inform other services like Floodlight by Google when a purchase has been made through your Phorest online booking.

Tracking Online Booking Pages & Value of Bookings in Google Analytics.

Phorest Online Booking pages are all on the same domain and, although they have a unique  name in the URL, there is a "#" at the end of the name. Anything after the hash is a fragment of the URL and not treated as a new page.

mceclip1.png

This can be challenging with GTM as services pages, booking confirmation pages etc are all seen as being the one page.

How to Work Around This

Using this article and a few tweaks there are steps you can take in your Tag Manager account to track these fragments as page views and start using these pages to fire events into google analytics or any other application.

Enable history variables in GTM

mceclip2.png

Go to the variables section and click configure. Enable the New History Fragment and History Source variables.

Create a custom variable for getting the page path

Next, you’ll need a Custom JavaScript Variable that will produce a new, well-formed URL that we can then send to Google Analytics as the page path of the URL fragment.

Create a new User Defined Variable and name it {{get path with fragment}}

mceclip3.png

Then add this code to it:

function() {
return window.location.pathname + window.location.search + window.location.hash;
}

Create a custom variable for passing page info to analytics

Next, you’ll need another Custom JavaScript Variable to pass this info into Google Analytics as a page view. Create a new one and choose the type as Google Analytics Settings. Match the following setup and hit save:

mceclip4.png

Create a new trigger

mceclip5.png

Go to the triggers section and create a new trigger and name it Event - History Fragment Change

Choose History Change as the Trigger Type, and set the following condition in the Fire On section of the Trigger:

mceclip6.png

Update your Google Analytics tag

Assuming you have already created a google analytics tag that runs on all pages, we will adjust the trigger so these new URL's are showing in analytics as pages. Simply add the History Change trigger to the Google Analytics Tag.

mceclip7.png

Track booking events and value of bookings

Once all this is set up you can use the data layer variables mentioned earlier in this article to get booking events in google analytics with the value of each booking.

Create a new tag in tag manager and choose Google Analytics: Universal Analytics as the tag type.

Next, select the track type as being Event

You can use any variable that is available on the booking confirmation page to add to a google analytics event but here I'm just adding the value of the booking. Copy the setup below to set up the event, you can use your own labels but the Value section must contain the correct variable name. For booking value, this is {{Appointment Total Amount}}

mceclip8.png

The last step to make this work is firing this tag at the right time - on the booking confirmation page.
When adding a trigger to this new tag, choose the blue plus icon and create a new trigger.

mceclip9.png

Create a new trigger and make sure it contains the following settings

mceclip10.png

Save this trigger, and save the new tag you created. Then publish your changes in Google Tag Manager. In your Google Analytics account, you should now see booking events against the correct page URL and also the value of those events.

mceclip11.png

With these events now active in google analytics you can use them as conversion events for Google Ads.


You may also be interested in: How to link your online booking widget to your Google Analytics account

Was this article helpful?
1 out of 3 found this helpful