This guide explains how to report events to GA4 through Tag Manager(GTM).
This applies to the booking widget v3, not v2.
Requirements
To make use of 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.
<!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, 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 the “new” button, selecting “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, then repeat the same process until all 8 variables are created.
Once complete, 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 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 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 the preview button found in the top-right corner of Google Tag Manager’s main interface.
In the Google Tag Assistant dialog, paste the URL of your webpage.
Click "Connect".
The assistant will load your webpage.
Upon loading, make sure the assistant popup displays “Tag assistant" as connected. Otherwise, go back and review your settings.
Click 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, 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.
Select any event. | This reveals the parameters associated with the selected event. | Selecting the event label reveals the item selected in the Booking Widget. |