With the help of Google Analytics 4, you can easily track your clients' actions while booking online using the Booxi 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 this page for instructions. 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, since it will be needed to configure the booking widget.
Configuring Google Analytics 4 with Booxi
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 URL based on your hosting region.
North America | Europe |
<head> <script src="https://www.booxi.com/api/booknow.js" async=""></script> </head> |
Then, add the code below to the booking widget code. Do not forget to add your API key.
<body> <script> window.dataLayer = window.dataLayer || []; function gtag() { window.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> </body> |
At this point, the booking widget is configured and ready to send events to Google Analytics using the GA4 standard.
What Booxi will send to Google Analytics
Booxi will automatically log the user’s actions as events.
**Booxi doesn’t send any personal data during this process; user confidentiality is preserved at all times.
Data is sent to Google Analytics using the following Google Analytics 4 data model:
Event Name :
Parameter 1 : value
Parameter 2 : value
Therefore, users’ actions will have 2 parameters associated with it:
Event generated by the user :
book_now_event_label - containing the value of the selection made by the user.
booxi_app : “Book Now” - this value won’t change, and can be used for filtering.
Each value returned by book_now_event_label will be prefixed with the country of the store, for instance “CA” for Canada. This can be useful for stores being located in several countries.
Here’s an example of how selecting a category will be reported in Google Analytics:
book_now_select_service
book_now_event_label : “CA Massage”
booxi_app : “Book Now”
Here are the events the booking widget will log along with their associated event label value.
Event | Description and value returned in “book_now_label_event” |
book_now_opened | Name of the application having opened.
|
book_now_select_category | Name of the category selected. |
book_now_select_service | Name of the service selected. |
book_now_select_staff | Name of the staff selected, if the service configuration requires a staff selection. |
book_now_select_date | Date of the requested booking
|
book_now_select_time | A time slot has been selected requested booking
|
book_now_user_form_submit | Indicates the user provided its contact information during booking.
|
book_now_booking_requested | Indicates a booking requiring assignment requested.
|
book_now_booking_complete | Indicates an approved booking was submitted.
|
book_now_send_rental_request | Indicates the submission of a new rental request.
|
book_now_select_rental_resource | Name of the requested resource, applicable only for rentals. |
book_now_booking_request_fail | An error occurred during the booking process. |
book_now_form_validation_error | An error occurred while validating a user’s data.
|
book_now_close_book_now | The booking widget has been closed
|
How to Access the Data Reported to Google Analytics
Using the Google Analytics account you created previously, 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.
Events reported by the booking widget are custom events, which means that you will need to create a custom dimension to report on these events, and build more advanced reports. Read this Google article to learn how to create custom dimensions and build reports.