Google Tag Manager - Advanced "Bubble Up" Method

Advanced method for event tracking on embedded NBI Widget

For complete control of your Google Analytics or Google Tag Manager events (or potentially another 3rd party event tracking tool), we recommend using the below “Bubble Up“ method.

Instead of trying to pass information from the host website down to the NBI Widget before sending the tracking event, you can instead send the event data up to the host website and track it however you like. This setup is a bit more complicated, but give you the freedom to edit the events before they even reach GTM or GA and still retain the built in host website’s information, such as query string parameters. This can make things like tracking advertising campaigns much easier.

To activate this behaviour you need to add this parameter to the embedded iFrame's url&analytics=bubbleand then add the following JavaScript to your host page to handle the tracking data and pass it to the relevant tracking library there.

For Google Tag Manager add the below JavaScript snippet to the page

<script>

var GTM_DATA_LAYER = window.dataLayer || parent.window && parent.window.dataLayer;
  if (GTM_DATA_LAYER) {
    window.addEventListener('message', function(e) {
      if (e.origin === 'https://bookings.nowbookit.com' && e.data && typeof e.data === 'string' && e.data.indexOf("NBIWidget2GoogleAnalytics") !== -1) {
        var data;
        try {
          data = JSON.parse(e.data);
        } catch (error) {
          // add custom logging here
        }
        if (data && data.type === 'NBIWidget2GoogleAnalytics' && data.event) {
          GTM_DATA_LAYER.push(data.event);
        }
      }
    });
  }

</script>

View Codepen example here.

Archived Legacy approach

Google Analytics 3 (Universal Analytics) add the below JavaScript snippet to the page

<script>
window.addEventListener('message', function(e) {
      if (e.origin === 'https://bookings.nowbookit.com' && e.data && typeof e.data === 'string' && e.data.indexOf("NBIWidget2GoogleAnalytics") !== -1) {
        var data;
        try {
          data = JSON.parse(e.data);
        } catch (error) {
          // add custom logging here
        }
        var GA = window.ga || parent.window && parent.window.ga;
        if (GA) {
          if (data && data.type === 'NBIWidget2GoogleAnalytics' && data.event) {
            var eventData = data.event;
            if (data.event.page_title) {
              GA('send', {hitType: 'pageview', title: data.event.page_title, page: data.event.page_url});
            } else {
              GA('send', {hitType: 'event', eventCategory: data.event.event_category, eventAction: data.event.event_action, eventLabel: data.event.event_label});
            }
          }
        }
      }
    });
</script>

View Codepen example here.

For Google Analytics 4 add the below JavaScript snippet to the page

<script>

window.addEventListener('message', function(e) {
      if (e.origin === 'https://bookings.nowbookit.com' && e.data && typeof e.data === 'string' && e.data.indexOf("NBIWidget2GoogleAnalytics") !== -1) {
        var data;
        try {
          data = JSON.parse(e.data);
        } catch (error) {
          // add custom logging here
        }
        var GA = window.ga || parent.window && parent.window.ga;
        if (GA) {
          if (data && data.type === 'NBIWidget2GoogleAnalytics' && data.event) {
            var eventData = data.event;
            if (data.event.page_title) {
              gtag('event', 'page_view', {
                  title: data.event.page_title, page: data.event.page_url, ...eventData
              });
            } else {
              gtag('event', data.event.event, {
                  eventCategory: data.event.event_category, eventAction: data.event.event_action, eventLabel: data.event.event_label, ...eventData
              });
            }
          }
        }
      }
    });

</script>

View Codepen example here.

Alternative tracking software

If you're using a 3rd party tracking library the implementation will vary, but you can access the data the same way, using

<script>

window.addEventListener('message', function(e) {
      if (e.origin === 'https://bookings.nowbookit.com' && e.data && typeof e.data === 'string' && e.data.indexOf("NBIWidget2GoogleAnalytics") !== -1) {
        var data;
        try {
          data = JSON.parse(e.data);
        } catch (error) {
          // add custom logging here
        }
        if (data && data.type === 'NBIWidget2GoogleAnalytics' && data.event) {
          // implememt custom 3rd party tracking here, using data.event object
        }
      }
    });

</script>