Google Analytics (GA4) Integration Guide for Booking Widget v3

The purpose of this article is to provide guidance on how to integrate Google Analytics (GA4) with the Booking Widget.

Requirements

Before using Google Analytics, you will need the following:

A valid Google account
You must sign up to Google Analytics
You must have a Google Tag ID

If you haven’t created a google account yet, please consult the following page for more details on how to do so. Once your account has been created, follow these instructions to sign up to Google Analytics, create a Google Analytics 4 property and create a data stream. Finally, follow these instructions to locate your Google Tag ID “G-XXXXXXX”. Make sure to copy your Google Tag ID at the end of the setup process as it will be needed to configure the booking widget.

Using Your Google Tag ID

The code below showcases how to set up the booking widget to send events to Google Analytics. If you are already using Google Analytics on your website, most of the code is likely included.

When including “booknow.js”, please be reminded to select the right URL based on your hosting region.

North America	Europe
www.booxi.com	www.booxi.eu

Additionally, Google Analytics 4 suggests a new naming convention for event names and parameters. If you wish to follow the GA4 naming convention (which we suggest), simply add the parameter ‘googleTagEventFormat: “GA4”’ as shown below.

<head>
   <script src="https://www.booxi.com/booknow/booknow.js"></script>
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
</head>

<body>
<script type="text/javascript">

  // Google Tag Manager boilerplate.
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  // Configure Google Analytics property. Remember to use your own measurement ID
  gtag('config', 'G-XXXXXXX');

</script>

 // Assign your GA property and open the widget when a button is pressed
 <button onclick="BookNow.open({apiKey: 'YOUR_API_KEY_HERE', 
                                  googleTag: gtag,
                                  googleTagEventFormat: 'GA4'})">
 Book Now</button>;

</body>

What Booxi will send to Google Analytics

Booxi will automatically log the user’s actions as events. Each action of the user in the Book Now widget will generate an event, with 2 additional parameters.

Event generated by the user
- Event Label - containing the value of the selection made by the user
- Booxi App - value indicating which app

Each value returned by the event label will be prefixed with the country of the merchant, for instance “CA” for Canada. This can be useful for merchants located in several countries.

Booxi doesn’t send any personal data during that process; user’s confidentiality is preserved at all times.

Event Definition

Using the current naming convention, service selection and client availability events are reported as:

Select Category
- event_label : “hair cut” (identifying the service selected)
- event_category : “Book Now”
Select Client Availability
- event_label: “2023-05-11T08:00:00.000-04:00 - 2023-05-11T12:00:00.000-04:00,2023-05-11T12:00:00.000-04:00 - 2023-05-11T17:00:00.000-04:00”
- event_category : “Book Now”

Benefits of using the GA4 naming convention:

Event and parameter names comply with GA4 requirements of not using space “ “.
Simpler filtering and identification of events generated by the booking widget:
- We prefixed the events with “book_now” to filter by event name.
- We renamed “event_category” for “booxi_app” to filter by parameter.
Better reporting of client availability:
- Time slots are now reported individually under booking_availability_1 to booking_availability_5 instead of being concatenated in one string.
- The total number of selected time slots is reported by the parameter booking_availability_count.

Using the GA4 naming convention, the service selection and client availability events will be reported as such:

book_now_select_category
- book_now_event_label : “hair cut”
- booxi_app : “Book Now”
book_now_select_client_availability
- Booking_availability_1: “2023-05-11T08:00:00.000-04:00 - 2023-05-11T12:00:00.000-04:00”
- Booking_availability_2: “2023-05-11T12:00:00.000-04:00 - 2023-05-11T17:00:00.000-04:00”
- Booking_availability_count: 2
- booxi_app : “Book Now”

Google Analytics Events

All events are currently sent with the category "Book Now". The following events are generated.

Event Name (Current Format)	Event Name (GA4 Format)	Event Label Value	Description
Booking Started	book_now_opened	(none)	Book Now has opened.
Select Store	book_now_select_store	Location code or business name	When location is selected. Label is location code if present, otherwise business name.
Select Category	book_now_select_category	Category name	When a category is selected.
Select Service	book_now_select_service	Service name	When service is selected.
Select Client Availability	book_now_select_client_availability	See note above	Provides the details of the time slots selected
Select Client Count	book_now_select_client_count	Client/participant count	After selecting the number of participants for a group event or for appointment services using per person pricing.
Select Staff	book_now_select_staff	Staff name	When staff is selected.
Select Date	book_now_select_date	Date	When a booking date is selected. In (ISO-8601) format.
Select Time	book_now_select_time	Start and end date + time	When a time slot or group event is selected. In (ISO-8601) format.
Client Info	book_now_client_info	Email / SMS Reminder	When client information is entered.
Attendee Info	book_now_attendee_info	Email / SMS Reminder	When attendee information is entered.
Survey Completed	book_now_survey_completed	Client or participant #	When a survey is completed.
Booking Requested	book_now_booking_requested	(none)	When "Confirm Booking" is pressed.
Booking Complete	book_now_booking_complete	(none)	After the booking has been made.
Booking Error	book_now_booking_error	Error type	If an error occurs confirming the booking.
Booking Abort	book_now_abort	(none)	If the user closes Book Now without booking.
Move Back	book_now_move_back	Form type	When the user navigates backwards from a form.

How to access the data reported to Google Analytics

Using the Google Analytics account you created previously, you can go to Reports > Realtime to see the events being logged as bookings are being made. See this Google reference on how to use Real time reports.

Be reminded that the events reported by the booking widget are custom events, therefore you will need to create a custom dimension to report on these events, and build more advanced reports. Please look at this Google article to learn how to create custom dimensions and build reports.

Troubleshooting - Error Events

Booxi will log a “book_now_booking_error” event along with a descriptive label when encountering errors. Such events will be triggered by one of the below problems.

Network error - temporary service interruption

At the time of sending a booking request, the server cannot be reached.

Labels: NetworkError

Server not available

The server returns an internal error.

Label: Unknown

Service set offline when trying to book

During the booking process (booking not yet confirmed), a service selected by the client has been turned off by a member of staff in the Back Office and is no longer available online. Upon confirmation, the booking request will be rejected.

Label: OnlineBookingDisabled

Booking same time slot at the same time - race condition

Two clients are booking the same time slot at the same time. The first booking will be successful while the second one will fail.

Labels: StaffNotAvailable

Booking an appointment too close from current date/time

If a booking is initiated before but completed after the starting time of the appointment (booking initiated at 11:58AM for an appointment starting at 12:00PM but completed at 12:01PM), it will result in an error as the booking time is now in the past.

Labels: TimeTooEarly, TimeTooLate