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