Migrate from UA to GA4 on Booking Widget v3

This article explains how to migrate from Universal Analytics (UA) to Google Analytics 4 (GA4).

Before going further, it is assumed that you have already signed up to Google Analytics and have obtained a Google Tag ID. If it is not the case, please see these instructions.

Updating Your Webpage

Replace Analytics Script

First, replace the previous Universal Analytics script with Google Analytics 4 script as shown below. Make sure to replace “G-XXXXXXX” with your Google Tag ID.

Universal Analytics

// UA
<script src="https://www.booxi.com/booknow/booknow.js"></script>
<script src="https://www.google-analytics.com/analytics.js"></script>

Replace the above code with ↓

Google Analytics 4

// GA4
<script src="https://www.booxi.com/booknow/booknow.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>

Configure Google Analytics and the Booking Widget

In the body of your webpage, replace the code as shown below. 

Universal Analytics

<script type="text/javascript">

  // Create a tracker instance. Remember to use your own tracking ID
  ga('create', 'UA-XXXXXXXX-XX', 'auto');

  // Let Book Now know which tracker to use.
  BookNow.configure({
    apiKey: "YOUR_API_KEY_HERE",
    googleAnalytics: ga
  });
</script>

Replace the above code with ↓

Google Analytics 4

<script type="text/javascript">

  // Google Tag Manager boilerplate.
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  // Configure Google Analytics property. Remember to use your own measurement ID
  gtag('config', 'G-XXXXXXX');

  // Let Book Now know which Google Analytics property to use.
  BookNow.configure({
    apiKey: "YOUR_API_KEY_HERE",
    googleTag: gtag,
    googleTagEventFormat: 'GA4'
  });
</script>

Google Analytics 4 suggests a new naming convention for event names and parameters. If you wish to follow the GA4 naming convention, simply add the parameter ‘googleTagEventFormat: “GA4”’ as shown below, otherwise the current naming will be kept. See document for more details about the naming conventions introduced with GA4.