With Google Analytics 4, you can easily track your clients' actions while booking online using the booking widget, and see how often they completed or abandoned the booking and at which steps.
Basic implementation
Requirements
To make use of this feature, you will need the following:
A Google Analytics account
A Google Tag ID
If you haven’t created a google account yet, please consult the following page. Once you've created your account, 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 since 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”, remember to select the URL based on your hosting region.
North America | Europe |
<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 generated the event
Note that we (Booxi) don’t send any personal data during this process; user confidentiality is preserved at all times.
Event Definition
Event Name | Event Parameters | Value | Description | Examples |
book_now_opened | book_now_event_label | (none) | Book Now has opened. | N/A |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_store | book_now_event_label | Location code or business name | When location is selected. Label is location code if present, otherwise business name. | "West Valley Spa" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_category | book_now_event_label | Category name | When a category is selected. | "Beauty Services" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_service | book_now_event_label | Service name | When service is selected. | "Hair cut" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_client_availability | Booking_availability_1 to Booking_availability_5 | Up to 5 availabilities can be selected while booking, which generates one parameter per selection | Provides the details of the time slots selected - each selection contains a start date/time and end date/time | “2023-05-11T08:00:00.000-04:00 - 2023-05-11T12:00:00.000-04:00”
|
Booking_availability_count | Number of selected availabilities | Client can select up to 5 client availabilities | 1,2,3,4,5 |
|
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_client_count | book_now_event_label | Client/participant count | After selecting the number of participants for a group event or for appointment services using per person pricing. | "5" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_staff | book_now_event_label | Staff name | When staff is selected. | "John Smith" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_date | book_now_event_label | Date | When a booking date is selected. In (ISO-8601) format. | "2022-09-27" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_time | book_now_event_label | Start and end date + time | When a time slot or group event is selected. In (ISO-8601) format, local time* | "2024-11-27T09:00:00.000-05:00 - 2024-11-27T10:00:00.000-05:00" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_client_info | book_now_event_label | Email / SMS Reminder | When client information is about reminders being requested or not. | “”, or "Email Reminder”, or “SMS Reminder", or "Email Reminder SMS Reminder" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_attendee_info | book_now_event_label | Email / SMS Reminder | When client information is about reminders being requested or not. | “”, or "Email Reminder”, or “SMS Reminder", or "Email Reminder SMS Reminder" |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_survey_completed | book_now_event_label | Client or participant # | Who completed a survey while booking. | “Client”, “Participant # 1”, “Participant # 2”... |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_booking_requested | book_now_event_label | (none) | When "Confirm Booking" is pressed. | N/A |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_booking_complete | book_now_event_label | (none) | After the booking has been made. | N/A |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_booking_error | book_now_event_label | Error type | If an error occurs confirming the booking. | “Unknown”, “OnlineBookingDisabled”, “BookingHasPassed”, “BookingIsCompleted”, “TimeTooEarly”, “TimeTooLate”, “ClientBlocked”, “GroupEventOvercapacity”, “StaffNotAvailable”, “NetworkError”, “BlockedByCaptcha” |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_abort | book_now_event_label | (none) | If the user closes Book Now without booking. | N/A |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_move_back | book_now_event_label | Form type | When the user navigates backwards from a form. It provides the name of the screen the user is going back to. | “Service”, “Category”, “Client”, “Groupevent”... |
booxi_app | “Book Now” |
| “Book Now” |
|
*: The timezone depends on the location of the service (see" Services > "Service details" > Location).
If the service location is "At my business" or "At home", the time is based on the store timezone.
If the service location is "By videoconference" or "By phone", the time is based on the timezone the user chose at the time of booking.
See here to learn how timezones work in Booxi.
Omnichannel tracking
In addition to tracking the booking flow steps as mentioned in the previous section, it is also possible to track the events happening AFTER the booking (see here for the list of events).
The purpose of this feature is to link a client's online journey to outcomes in Booxi. Broadly, it will allow you to:
Optimize your digital experience by tracking which pages or CTAs lead to desired or undesired booking outcomes. For example:
Track which pages or CTAs lead to the highest amount of approved bookings.
Track which pages or CTAs lead to cancellations or rescheduling requests.
Track client journeys that don’t end in an online purchase but result in a booked appointment—so you can recover conversions that might otherwise be lost.
Attribute the proportion of digital conversion to in-store completed appointments.
etc.
Requirements
This is an add-on feature. To activate it, contact your Booxi representative.
A Google Analytics account
A data stream
You must contact your Booxi representative and provide them the following information:
A stream API key
To create one, go to Admin > Data streams > {select a data stream} > Measurement Protocol API secrets > Create secret
Stream measurement ID
To obtain it, go to Admin > Data streams > {select a data stream} > Measurement Id
Event definition
Here is the list of Booxi events that will be sent to GA:
Event | Description |
booxi_appointment_approved | Sent whenever a new appointment was booked with an approved status. |
booxi_appointment_requested | Sent whenever a new appointment was booked with a pending approval status. |
booxi_appointment_pending_client | Sent whenever an existing appointment was updated with options set to request a confirmation from the client, to approve the changes. |
booxi_appointment_rescheduled | Sent whenever an existing appointment was updated. |
booxi_appointment_ongoing | Sent whenever a staff member marks an appointment as "Client arrived" |
booxi_appointment_canceled | Sent whenever an existing appointment was cancelled by the staff. |
booxi_appointment_canceled_client | Sent whenever an existing appointment was cancelled by the client. |
booxi_appointment_noshow | Sent whenever an existing appointment was marked as a no-show. |
booxi_appointment_closed | Sent whenever an existing appointment was marked as completed by the staff or automatically. |
booxi_appointment_unknown | The default value for any status not explicitly listed. |
Event parameters
Each event listed above contains the following parameters:
Title | Description | Example value |
ga_session_id | The user's session ID. A session is a group of user interactions (pageviews, events, etc.) that take place on your website within a given time frame. | 1750368289 |
booxi_event_type | The event type. See here for the list of possible events. | booxi_appointment_requested |
booxi_booking_method | The booking method. *Note: "schedule" denotes that the booking is of type "Appointment". | schedule |
booxi_booking_status | The status of the booking in Booxi. | REQUESTED |
booxi_booking_confirmation_number | The Booxi booking ID. | A13118759 |
booxi_store_location_code | The store number (if applicable) | N/A |
booxi_merchant_id | The merchant ID. | 12345 |
booxi_merchant_group_id | The ID of the merchant group that the merchant is a part of (if applicable.) | 123 *Note: "-1" will be listed If the merchant is not part of a merchant group. |
Limitations
This feature is compatible with the booking widget v3, not v2.
Only appointments are supported currently.
Notes
NO PII is included in any GA4 event.
Clients must accept cookies for events to be sent to GA.
How to access the data reported to Google Analytics
To access Google Analytics data, go to Reports. See this Google reference on how to use Real time reports.
Note that 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. Consult this Google article to learn how to create custom dimensions and build reports.
To see events happening in real-time, you can use Google Analytics' DebugView. To access, go to Admin > Property Settings > Data display > Debug view. For this to work, you must install a debugger extension on your browser, and it must be enabled at the time you are performing the action(s).
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