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

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.

---

GTM Account Setup

• Go to: https://tagmanager.google.com/#/home
• Set up your Google/GTM Account:

• You will then receive the code snippets that allow you to link your site to your new GTM Container. You do not need these for setting up the link to the Phorest Online Booking platform, as we will insert this for you when you provide us with your Container ID. So just click OK to close the modal.
• You can revisit these code snippets at any time from the Account Settings menu - select Install Google Tag Manager, or by clicking on your GTM Container Id at the top of your GTM Overview page.
• If you have not already done so, please send the GTM Container code to api-requests@phorest.com requesting it to be added to your salon's booking platform.
• Once this has been confirmed, you can proceed with the rest of your GA4 setup.

---

GA4 Account Setup

• Go to: https://analytics.google.com/analytics/web/provision/#/provision
• Click Start Measuring and give your Account a name and click Next.

Create a GA4 property (this is the default now, and does not need to be chosen), then click Next.

Add information about the business (this will be specific to you, example below), then click Create:

---

GTM - Set Up Variables

Data Layers

The data layers that surface following a successful purchase on your Phorest Online Booking platform are shown in the example below, you can view these at any stage in the console by entering “DataLayer” and pressing Enter:

Enable History Variables in GTM

In the Variables section of GTM:

• Click Configure
• Enable the New History Fragment option
• Enable the History Source option

 

Create a Custom Variable for Getting the Page Path

Here you will 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.

In the Variables section of GTM:

• Click New
• Click edit to edit the new variable
• Select the type Custom Javascript

• Name the variable: GA4 - get path with fragment
• Add the following Javascript code to the variable:

Click Save and the Variable should now be set up.

Set up a Variable to Track Booking Events and Value of Bookings

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 a user-defined variable.

In the Variables section of GTM:

• Click New
• Click edit to edit the new variable
• Select Data Layer Variable option:

Name the Variable as makes sense to you. In the example below, we will call it: appointmentTotalAmount.

Once named, click on the variable to set it up.

---

GTM - Set Up Triggers

Create a Trigger for History Fragment Change

In the Triggers section of GTM, click New > Select History Change.

• Name the trigger GA4 - Trigger - History Fragment Change
• Set the triggers options - an example of how it should be set up is shown here:

Save the Trigger.

Create a Trigger for Booking Confirmation - (This will be linked to the Tag that will track bookings).

In Triggers, click New > Select History Change > Set the Trigger up as below:

Give the Trigger a name (in the above example we use GA4 - Trigger - booking confirmation page), then Save.

---

GTM - Set Up Tags

Configuration and Page View Tag

Go to Tags in GTM > New > Name the tag GA4 - Page View.

Get the measurement id from GA4:

• Go to GA4
• Click Admin
• Under correct property select Data Streams
• Copy Measurement Id

Configure as per the below example, and make sure to include the correct Measurement Id. Select the All Pages Trigger and the GA4 - Trigger - History Fragment Change from the trigger section.

Save the Tag.

Create a Tag to get Booking Events with the Value of Each Booking

Go to Tags in Google Tag Manager > Click New.

Give the Tag a name (in the example below, we use GA4 - Track booking events and value of bookings.

The tag needs to be of type GA4 Event.

GA4 will want you to use from their list of preset events (as much as possible), which have their own preset parameters already set up: https://support.google.com/analytics/answer/9267735.

Clicking on any of the events in that list will show you the parameters set up for that event. For example, the login event has a method parameter already set up, which you can use if needed.

You can use your own custom event name, but if you do - the parameters you use must also be set up in GA4 in Admin - Custom Definitions - Create Custom Dimension.

In this example, we use the preset purchase event, which doesn't have a Category parameter. We included the Category parameter here to keep it similar to the previous UA setup. Therefore it was needed in this GA4 setup.

In GA4 Admin - Custom Definitions - Create Custom Dimension:

Save the Tag.

---

Preview and Check Tags

Once configured, you should preview and check if the tags are being fired correctly both in GTM Tag Assistant and also in GA4 in the Admin - Debug option which is under the property being used.