How to Set Up & Use Google Analytics for Online Booking

1. Overview

Google Tag Manager (GTM) is a way of inserting tracking capabilities into web sites using tags. As customers navigate our Modern Online Booking web site, GTM events are emitted. Examples of events include a page being viewed, a link being clicked etc.
Once received within GTM, triggers respond to these events telling GTM what to do.
The principle use case for Shortcuts is where Modern Online Booking passes the information to GTM which then passes the information on to Google Analytics.
GTM provides no analytics capabilities and this is where Google Analytics comes into play.
Visually the high-level process can be represented like this

2. Create Google Tag Manager Account & Container

A Google Tag Manager account and container is required. This can be setup at https://tagmanager.google.com/. Accounts should be configured for the country of operation of the business and the Target Platform for the container should be set to Web (For use of desktop and mobile web pages).

The “Add a New Account” function within GTM looks like the following.

Once the account is created, GTM will provide you with a Container ID. For the account (Book the Look) the container ID is GTM-NZD4CJR. It is important to note this identifier as this will be used in the step called Configuring the Shortcuts Tenant Console.

When data is passed from Modern Online Booking to GTM, this container ID helps associate the events being emitted with the correct account.

3. Create Google Analytics Account and Data Stream

A Google Analytics account can be setup at https://analytics.google.com/analytics/web. Select Admin and “Create”.

To enable the Google Analytics account to receive information a Data Stream must be configured. From the “Admin” menu select “Data Streams” from the “Data collection and modification” section.

Select “Add stream” and choose “Web”.

Provide the Web site URL and Stream name details before selecting the “Create stream” button. The defaults that are selected in the “Enhancement measurement” section of the create stream process do not need to be altered.

Google Analytics then provides a summary on the following screen. Make note of the Measurement ID that has been generated. In this case it is G-B825QZEQ6Q. This information will be used in the subsequent step to link GTM and Google Analytics.

4. Linking Google Tag Manager to Google Analytics

Once both the GTM and your Google Analytics accounts have been created they can be linked together from within GTM.

To do this we create a Tag within GTM and associate triggers with it.

Select the “New” button.

Click the Edit (pen/pencil) option in top right hand corner of the “Tag Configuration” section (Note this is only visible when you hover over it).

From the side pane select “Google Analytics”.

Then select “Google Analytics: GA4 Event”.

Using the Measurement ID (created in an earlier step - Create Google Analytics Account and Data Stream) and set the “Event Name” to be .

Under “More Settings” select “Send Ecommerce data”.

The next step involves adding the triggers. Hit Edit (pen/pencil) option in top right hand corner of the “Triggering” section (only visible when you hover over it).

Select all triggers (checkbox highlighted in yellow) and then select the “Add” button”.

You will find a message “No Google tag found in this container” with the option to “Create tag”. Press “Create tag”.

Do not alter the default options. Then press “Save”. A pop-up asks you to confirm the name of the tag - leave as the default.

Afterwards you should see the following tags visible.

If you select the “Google Analytics GA4 Event” the google tag is now found in the container.

Noting that GTM has detected that a change needs to be published for it to take effect. This is visible on the right hand side of the screen “Workspace Changes: 2”.

Select the “Submit” button in the top right hand corner of the screen.

Then select “Publish”.

GTM takes a short while to publish the changes and then provides a summary of the changes that have been deployed. GTM versions the changes so you can revert to a previous version if required.

5. Configuring the Shortcuts Tenant Console

Configuration within the Shortcuts Tenant Console is required to complete the setup. This enables information to flow from Modern Online Booking to GTM and Google Analytics.

For single salons/sites the easiest way to do the setup is to click on “Online Booking Settings”. Scroll down the page to the GTM & Google Analytics settings fields.

Enter the GTM code (see step Create Google Tag Manager Account & Container), the Google Analytics Tracking Number (see Measurement ID in step Create Google Analytics Account and Data Stream) and the domain (e.g. https://bookthelook.com/).

Single salons/sites can alternatively configure the same codes/information under the Company Settings - Google Global Settings section.

For multi-sites and enterprise customers that just want to use the same codes across all sites should enter the codes/information under the Company Settings - Global Google Settings section.

Individual sites can be overridden using the Online Bookings Settings section. Just ensure the appropriate site is selected in the right hand menu before configuring and saving the Online Bookings Settings.

6. How do I know it is configured correctly?

As depicted in this diagram on the Overview page, the configuration of Google Tag Manager and Google Analytics involves multiple components. Each component can be checked to confirm the integration is configured correclty.

For the purposes of this information, Data Source #1 refers to Shortcuts’ Modern Online Booking experience.

Checking Modern Online Booking

Tooling within modern web browsers (such as Google Chrome and Microsoft Edge) enable us to inspect the GTM events that are published by Shortcuts’ Modern Online Booking experience.

To see this information it is necessary to bring up the Modern Online Booking experience in the browser. The example below uses Google Chrome. Select the menu Kebab menu (three vertical dots) from the top right hand corner. Then choose “More tools” and then “Developer tools”.

The screen should render similar to the below. This view enables us to see the activity that is occurring within a web site.

Navigate to the Book Now function within the web site. This may be different depending on how the customer has chosen to implement the site.

The GTM Container Id should be visible in the activity trace. Check the Container ID is correct. If you have mis-spelt the Container Id the information will not flow through correctly to Google Analytics.

It can sometimes be easier to filter on just the GTM activity. To do that enter “gtm” into the filter field as highlighted below.

Customers can use this same technique to confirm their own web site is configured correctly.

At this point we know that the customer’s Modern Online Booking Experience is configured correctly.

Checking GTM

Using the same kebab menu, select “Extensions” and then “Manage extensions”.

Install the extension called “Tag Assistant Companion”.

Once configured, inside the web browser, login to Google Tag Manager. Select the account you are using. Then select the “Preview” button on the right hand side of the screen.

This will spawn a new browser tab where you need to enter the site details. In this case, we are using https://bookthelook.com/. Then select the “Connect” button.

The site will load within a new browser tab. The original tab where the “Connect” button was pressed will now display tags that are found. Navigate to the online booking experience and begin to make a booking.

As you choose a location (if more than one is available), the service(s) etc, then the activity will be displayed in the left hand pane.

At this point we know that the customer’s GTM account is configured correctly and is likely receiving information.

Checking Google Analytics

Having confirmed that GTM is working it is now possible to confirm data is flowing into Google Analytics.

Log in to Google Analytics. Select the account that you created, go to “Admin” and then “Data streams” under “Data collection and modification”. The message for the stream you created should say “Receiving traffic in the past 48 hours”.

You should also be able to see data in the “Reports” area under “Realtime”. It will look something similar to the below.

7. What type of information is passed to GTM and Google Analytics?

Where to see the data?

Detailed low-level information can easily be seen using the Tag Assistant Companion that is outlined in the “Checking GTM” section on page How do I know it is configured correctly?.

Expand the drop down in the “API Call” section and select the “Data Layer” tab within the output section of the Google tag that you are using. In this case, it is GTM-NZD4CJR.

Examples

Page loading

Selecting a service

Selecting a date/time

History change

Other events within the browser are also visible such as scrolling and clicking.

Google Analytics

Google Analytics provides a significant number of reports and dashboards for understanding user behaviour. Shortcuts is not an expert in this and customers are best to engage third party providers if they don’t have the skills in-house.

Technology used (operating system, platform, browser, screen resolution etc)...

Event based information...

User acquisition...

Where users originate from...

Engagement and monetisation information is also available.

8. Questions, Observations & Recommendations

Inclusion of both GTM and Google Analytics codes

Shortcuts requires both the GTM Container Id and the Google Analytics Measurement ID to be specified in the Shortcuts Tenant Console. In reality, this appears to be a historical concern as GTM feeds information to Google Analytics and therefore the inclusion of the Measurement ID should not be required within the Tenant Console. The Google Analytics Measurement ID should only need referencing in GTM or directly from the customer controlled web site.

Removing the Google Analytics Measurement ID results in no GTM events being emitted. As such the suggestion is to keep both in the configuration within the Tenant Console.

#2 Configuration Precedence (Site over Company)

The information contained at the site level will take precedence (i.e. only the site level configuration will be used when configuration is applied at both the Company level and the Online Booking Settings level).

#3 Ad Blocking Technology

End users (of a salon) who make bookings through Modern Online Booking sometimes have privacy protection software installed within their browser. Examples of these types of tools include - Adblock Plus, AdLock, Ghostery, and Privacy Badger. There are many others that do a similar job.

Depending on the configuration of these tools, they may impact information being sent from the web browser to GTM. There is nothing that Shortcuts can do about this.

Different internet sites report on varying levels of adoption of privacy protection software. This may impact the information available within GTM and Google Analytics, depending on how widespread the usage is.

#4 Why do I see GTM Container ID GTM-WBZ78N5?

When you follow the steps in How do I know it is configured correctly? you may notice another GTM Container ID (GTM-WBZ78N5) is visible. Why is this the case?

As Shortcuts don’t have access to our customer’s Google Analytics web site if we solely relied on that mechanism we wouldn’t be able to access user behaviour tracking and analytics. We use of our own Container ID which provides insights into Modern Online Booking usage across all regions and customers.

#5 Other User Behaviour Tracking Tools

Some Shortcuts customers may choose to use alternative user behaviour analytics tools (e.g. Microsoft Clarity, Amplitude, UserPilot, Heap or Mixpanel) on their web site.

Some of these tools (such as Microsoft Clarity) integrate with Google Analytics. This enables information from a customer controlled web site to be merged to the same Google Analytics Measurement ID as the Shortcuts provided Modern Online Booking experience.

#6 Scope of Shortcuts’ Google Integration

Shortcuts provide support for the integration to GTM and Google Analytics. Within Google Analytics, the configuration of reporting / dashboards , explorations or advertising performance / attribution is the responsibility of each customer or a third party that they contract to.

#7 Modern Online Booking - Performance Impacts

Modern Online Booking will not experience a slow down in performance due to the inclusion of GTM or Google Analytics configuration. All calls to Google happen asynchronously so page load time is not impacted.

9. Google Adwords Conversion

Why do customers need Google Adwords conversion?

Some customers will be using Google Adwords (now known as Google Ads) to drive traffic to their web site. These customers want to be able to understand if their advertising spend is converting to sales on the site.

To facilitate this Shortcuts provides support for Google Adwords.

How do I set it up?

Customers should log into the Tenant Console. Using the same understanding of company versus site level settings, the JavaScript conversion code (found in Google Adwords) should be pasted into the “Google Adwords Conversion Code” field before being saved. In the example below the code is blanked out so that it is not reused accidentally.

See point #2 in Questions, Observations & Recommendations.

Upon completion of a booking within Modern Online Booking, this code snippet will be executed. Customers who need to implement Google Adwords should seek advice from a third party provider.

Where do I find the code snippet?

Further information is found here - https://support.google.com/google-ads/answer/1722022?sjid=8837994441495443030-AP#howitworks.

How do I know it is working?

The Tag Assistant Companion browser extension (outlined in previous steps) can be used to check this functionality is working.