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.
Requirements
Before using Google Analytics, you will need the following:
A valid Google account
Sign up to Google Analytics
Your Google Tag ID (aka measurement 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 Google Analytics 4
First, make sure the following script has been included in the <head> tag of your webpage. Make sure to add the Google Tag ID "G-XXXXXXXX" at the end of the yellow line.
When including “booknow.js”, remember to select the right URL based on your hosting region.
North America | Europe |
<head>
<script src="https://www.booxi.com/api/booknow.js" async=""></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
</head>
Then, you will need to add the code below, google tag ID "G-XXXXXXXX" to the booking widget code. Do not forget to add your API key.
<body>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXXX');
var bnHandler = null;
window.bxApiInit = function () {
bnHandler = booxiController.configure({
apiKey: "YOUR_API_KEY_HERE",
googleTag: gtag
});
};
</script>
<!-- The Book Now button code -->
<div class="bx_bn_button use_bx_ico" onclick="booxiController.book();">Book Now</div>
</body>
What Will Booxi Send to Google Analytics
Booxi will automatically log the user’s actions as events. Each action the user performs 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.
List of events the booking widget will log, and associated event label value.
Event | Event Parameters | Value | Description | Examples |
book_now_opened | book_now_event_label
| “Book Now Widget” | Name of the application having opened. | “FR Book Now Widget” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_category | book_now_event_label | Category name | Name of the category selected. | "FR Beauty Services" * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_service | book_now_event_label | Service name | Name of the service selected. | "FR Hair cut" * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_staff | book_now_event_label | Staff name | Name of the staff selected, if the service configuration requires a staff selection. | “FR John Do” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_date | book_now_event_label | Scheduling method | Provides visibility on how scheduling has been done either using date/time slots or client availability
Note : Does NOT provide the actual date/time or client availability value | “FR Open booking” (ie client availability) *
“FR Calendar date” (ie specific date selected) * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_time | book_now_event_label | Time selection mode | Confirm if a time selection has been made
Note: Does NOT provide the actual value of the time slot | “FR Time interval” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_user_form_submit | book_now_event_label | Confirm if the user provided his information | Indicates the user provided its contact information during booking. | “FR User Info Submit” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_booking_requested | book_now_event_label | Event triggered if booking requires a staff approval | Indicates a booking requiring assignment requested. | “FR New appointment” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_booking_complete | book_now_event_label | Approved appointment submitted | Indicates an approved booking was submitted. | “FR New appointment” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_send_rental_request | book_now_event_label |
| Indicates the submission of a new rental request. | “FR New Rental event” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_select_rental_resource | book_now_event_label | Resource name | Name of the requested resource, applicable only for rentals. | “FR Bicycle” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_booking_request_fail | book_now_event_label | An error occurred during the booking process. | Informs on the action that failed when the error occurred | “FR new appointment” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_form_validation_error | book_now_event_label | The user provided invalid address, or phone number | An error occurred while validating a user’s data. | “FR User Info Submit” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
book_now_close_book_now | book_now_event_label | User canceled while booking, or after booking completed | The booking widget has been closed | “FR Booking Canceled” * “FR Booking Complete” * |
booxi_app | “Book Now” | Application used to book | “Book Now” |
|
(*): Each value returned by book_now_event_label will be prefixed with the country of the merchant, for instance “CA” for Canada. This can be useful for merchants being located in several countries.
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.
Remember that the events reported by the booking widget are custom events, which means 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.