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

Was this article helpful?
0 out of 0 found this helpful