Integration Guide for Book Now v3
The purpose of this document is to provide guidance on how to report events generated by the Booking Widget to GA4 through Tag Manager(GTM). Take note that this document is intended for Book Now v3.
Requirements
Before using Google Tag Manager, you will need the following:
- A valid Google account
- You must sign up to Google Analytics
- You must have a Google 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 Measurement ID “G-XXXXXXX”. Make sure to copy your Google Measurement ID at the end of the setup process as it will be needed to configure the Booking Widget.
Integration Flow
The integration process is divided into 4 steps:
- Integrating GTM code to your webpage or website.
- Configuring Google Analytics and Tag Manager.
- Test in Google Tag Manager.
- Data validation in Google Analytics GA4.
GTM Code Integration
First, set up your GTM account and get your GTM container code by following step 1 and 2 as listed in this article.
- Paste the code snippet as instructed in the article.
- Add the following code required by the Booking Widget.
Code for Booking Widget
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
<!DOCTYPE html>
<html>
<head>
<!-- Booxi Widget Code-->
<script src="https://www.booxi.com/booknow/booknow.js"></script>
<script>window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }</script>
<!-- End Booxi Widget Code-->
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
<title>Book Now and GTM integration example Webpage</title>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Booxi Widget code -->
<button onclick="BookNow.open({apiKey:'YOUR_MERCHANT_API_KEY_HERE', googleTag: gtag, googleTagEventFormat: 'GA4'})""> Book Now</button>
<!-- End Booxi Widget code -->
</body>
</html>
You should end up with the following code. Make sure to insert your Google GTM key, and Booxi API key.
GA and GTM Configuration
Step 1 - In Google Analytics
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 Measurement ID “G-XXXXXXX”. Make sure to copy your Google Measurement ID at the end of the setup process as it will be needed to configure the Booking Widget.
Step 2 - In Google Tag Manager
As stated in the Google Analytics 4 integration guide, the Booking Widget pushes data to GA4 using a set of 8 variables found under the eventModel. These variables are:
- eventModel.book_now_event_label
- eventModel.booxi_app
- eventModel.booking_availability_count
- eventModel.booking_availability_1
- eventModel.booking_availability_2
- eventModel.booking_availability_3
- eventModel.booking_availability_4
- eventModel.booking_availability_5
It is necessary to create a GTM Data Layer variable matching each of the above variables. To do so, access the Tag Manager workspace and follow the instructions below.
In the Variables section:
Create a new variable by clicking on the “new” button, select “Data Layer Variable” as its type.
- Set the Data Layer Variable Name to one of the 8 variables listed above.
- From the dropdown list, select “Version 2”.
- Save your changes and repeat the same process until all 8 variables are created.
Once done, the variable list should be as shown below.
Next, click on the new button and create a variable of type “Google Tag: Event Settings”. Add a new event parameter by clicking on “add parameter”.
- Assign the parameter a name. Take note that its name is how the parameter will appear in GA4.
- Map the parameter to its corresponding variable in the eventModel.
- Repeat for all 8 variables.
Once done, the event settings should be as shown below.
In the Triggers section:
Click on the new button and create a new trigger of type “Custom Event”.
- In the text box, type in book_now.*
- Check Use regex matching.
- Save your changes under “BookNow - All events”.
In the Tags section:
Click on the new button and create a new tag.
- Set its tag configuration to Google Analytics: GA4 Event.
- Assign your Measurement ID in the appropriate field.
- Set a name by clicking on the + button and select the variable named “Event” of type Custom Event.
- Under Event parameters, from the dropdown menu select the Google Events Setting variable created earlier.
- Save your changes.
Add a trigger, editing the “triggering section”
- Add the “BookNow - All events” trigger created previously
- Save your Triggering configuration
- Save your Tag
Test in Google Tag Manager
To test the integration and configuration, click on the preview button found on the top right corner of Google Tag Manager’s main interface.
- In the Google Tag Assistant dialog, paste the URL of your webpage.
- Click on connect.
The assistant will load your webpage.
- Upon loading make sure the assistant popup displays “Tag assistant connected. Otherwise, go back and review your settings.
- Click on the continue button when prompted to do so.
On your webpage, open the Booking Widget and start creating a booking.
- As you browse the Booking Widget, you should see events being generated on the left, matching your current actions.
- The Data Layer variables are visible in the Section “Output of GTM-XXXXXX”, in the “Variables” tab
Validate Data Reported in GA4
While testing the Booking Widget, connect to your Google Analytics report. Under the Realtime section, you should notice that the “Event count by Event name” widget reflects your actions done in the Booking Widget.
Review the events generated by the Booking Widget as reported in GA4.
