Google Analytics (GA4) Integration Guide for Booking Widget v2

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

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”, please be reminded to select the right URL based on your hosting region.

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

<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>
</body>

At this point, the booking widget is configured and ready to send events to Google Analytics using the GA4 standard.

What Will Booxi Send to Google Analytics

Booxi will automatically log the user’s actions as events. Please, take note that Booxi doesn’t send any personal data during that process, user’s 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 merchant, for instance “CA” for Canada. This can be useful for merchants being located in several countries.

Here’s an example of how selecting a category will be reported in Google Analytics:

book_now_select_category

book_now_event_label : “CA Massage”
booxi_app : “Book Now”

List of events the booking widget will log, and 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 Widget”
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 “Open booking” (ie client availability) “Calendar date” (ie specific date selected)
book_now_select_time	A time slot has been selected requested booking “Time interval” (ie 8:00 - 9:00)
book_now_user_form_submit	Indicates the user provided its contact information during booking. “User Info Submit” (ie first name, last name…)
book_now_booking_requested	Indicates a booking requiring assignment requested. “New appointment” (ie staff needs to approve)
book_now_booking_complete	Indicates an approved booking was submitted. “New appointment”
book_now_send_rental_request	Indicates the submission of a new rental request. “New Rental event”
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. “User Info Submit” (ie invalid address, phone number…).
book_now_close_book_now	The booking widget has been closed “Booking Canceled” when “X” got selected. “Booking Complete” after completing a booking.

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_request_fail” 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.

Server not available

The server returns an internal error.

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.

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.

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.