Tracking Online Booking Pages & Value of Bookings in Google Analytics (UA)

Note: The information in this article requires you to have some existing technical experience with Google Analytics. If you're not yet experienced with Google Analytics, we recommend you begin with some articles from the Google Analytics Help area.

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.

This can be challenging with GTM as services pages, booking confirmation pages etc are all seen as being 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

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
Choose Custom Javascript as the variable type

 

Then add this code to it:

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:

Create a new trigger

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:

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.

Track booking events and value of bookings

Note: You must add the variables to your tag manager container - Google Tag Manager Booking Variables - BEFORE completing this step.

Once all this is set up you can use the data layer variables 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}}

 

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.

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

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.

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