Sending Data From a Website Using Custom HTML Tag in Google Tag Manager

Important!Learn more about the advantages and disadvantages of this data collection method. If you are unsure that you correctly understand the specifics of setting up the Custom HTML tag, we advise you to choose another option – the GA4 configuration tag.

 

Overview

Your website has a standard JavaScript code for collecting and sending events to Google Analytics 4. Sending data from the website to the Google Analytics servers is implemented by Navigator.sendBeacon() JavaScript method, which is supported by all modern browsers. 

This method can be modified for simultaneously sending events to the Google Analytics and OWOX BI access points. As a result, the data collected by OWOX BI will completely match the data in Google Analytics 4.

The Navigator.sendBeacon() method can be modified using the Javascript code below on this page, which is loaded into your website using the Custom HTML Tag in Google Tag Manager. This option has pros and cons compared to sending data via the GA4 configuration tag.

 

Benefits of using the custom HTML tag

You will set up sending data in three simple steps in the Google Tag Manager interface. This is the main advantage of this method compared to the setting GA4 configuration tag because:

  • In Google Analytics 4, you don't need to create a new data stream to get a separate MEASUREMENT ID for OWOX BI streaming.
  • In Google Tag Manager, you don't need to duplicate the GA4 config tag and copy all tags for your custom events (even new tags you will create in the future).
    As a result, in OWOX BI streaming, you will get the same data as in Google Analytics 4. For example, even 'clientId' and 'sessionId' will be the same.

 

Potential risks of using the Custom HTML Tag

There is a slim chance of stopping the data sending, which means their irretrievable loss. We know three reasons why this might happen:

  • Sending data to Google Analytics 4 and the OWOX BI access point can be blocked by other Javascript code snippets on the web page. If they also modify the default behavior of the Navigator.sendBeacon() method.
  • Data will not be sent from older browser versions that do not support the Navigator.sendBeacon() method.
  • Google may change the server address where events are sent, and sending data to Google Analytics 4 may be interrupted. In this case, you should change the Javascript code in the Custom HTML tag.

 

Requirements

Before configuring data collection through the Custom HTML Tag, check the following statements:

  • One Google Analytics 4 counter should be already implemented on your website via Google Tag Manager (setup instructions).
  • In the OWOX BI interface, you've created a new GA4 event-based web streaming (step-by-step guide).
  • The 'Send to server container' option is disabled in the GA4 Configuration tag settings.
  • You are not using Javascript code that modifies Navigator.sendBeacon() method on your website. If you use it, write to bi@owox.com, and we will help you modify our Javascript code for sending events correctly from the website.

 

Step-by-step setup

Step 1. Create a new Custom HTML Tag

1.1. Go to Google Tag Manager to the tags section. Create a new Custom HTML Tag.

1.2. Name the tag, e.g. OWOX GA4 Custom HTML.

1.3. Copy the Javascript code below:

!function(){if(navigator.sendBeacon&&-1!==navigator.sendBeacon.toString().indexOf("native code"))try{var a=window.navigator.sendBeacon;window.navigator.sendBeacon=function(){var n,o,t=Array.prototype.slice.call(arguments);return t&&t[0].match(/analytics\.google\.com|google-analytics\.com.*v\=2\&/)&&(n=(t[0].split("?")[1]||document.location.search).replace(/(^\?)/,"").split("&").map(function(n){return this[(n=n.split("="))[0]]=decodeURIComponent(n[1]),this}.bind({}))[0],t[0]=["https://streaming.bi.owox.com/ga4/...",(o=n,Object.keys(o).map(function(n){return n+"="+encodeURIComponent(o[n])}).join("&"))].join("?"),a.apply(this,t)),a.apply(this,arguments)}}catch(n){return a.apply(this,arguments)}}();

Paste it to the ‘HTML’ section. Find ‘https://streaming.bi.owox.com/ga4/…’ and replace it with a full link to the OWOX BI access point, which you can copy from the Settings tab on the Streaming page:

16.png

1.4. Add the ‘All pages’ firing trigger.

1.5. And you will get settings like on the screen below:

01_new.png

Click the ‘Save’ button and go to the next step.

 

Step 2. Set up tag sequence

2.1. Go to your ‘Google Analytics 4 Configuration Tag’.

2.2. Open the 'Advanced Settings -> Tag Sequencing’ section and enable the option ‘Fire a tag before…’.

Specify your new tag ‘OWOX GA4 Custom HTML’.

02.png

2.3. Save the changes.

 

Step 3. Publish GTM container

To start sending data to the OWOX BI access point, publish a container with a new tag.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.