Skip to main content

Connecting Google Analytics 4 with Noibu

  • Updated

There are several ways to integrate Google Analytics 4 with Noibu. This process outlined here assumes you use a combination of Google Tab Manager and Google Analytics 4, as they work well together. However, if your company does not use Google Tab Manager, you can still integrate with Google Analytics 4 through a manual method.

As long as the NoibuJS script is being loaded on all pages, there is no action required on the Noibu side. The Noibu Session ID mentioned below is the Browser ID. In the Noibu console, you can filter sessions using the Browser ID filter.

This integration can be done in both directions, passing the Google Analytics Session ID as a Custom Attribute in Noibu and also sending the Noibu Browser ID as a User Preference in Google Analytics.

 

Use Cases for the Integration

By integrating the GA ID into Noibu, users can achieve a harmonized ecosystem for their e-commerce platforms. This integrated approach has the following benefits:

  1. Unified Reporting: Users can access consolidated reports where data from Noibu can be correlated with Google Analytics data, giving a clearer picture of user interactions, issues, and conversions.
  2. Improved Error Tracking: Noibu can use the GA ID to tag errors or issues specific to user sessions tracked under that GA ID. This makes it easier for teams to trace back errors to specific user interactions.
  3. Enhanced User Experience: By understanding user behavior from GA and correlating it with Noibu's error detection, businesses can fine-tune their e-commerce platform, leading to better user experiences and potentially higher conversion rates.

Capturing Google Analytics Session ID as a Noibu Custom Attribute

When a user visits your page that has Google Analytics also watching there are a couple cookies that get set. Inside these cookies will contain a string which involves the Google Analytics Session ID, knowing this, we are able to extract that value and pass it along to Noibu with the NoibuJS SDK. 

Prerequisite: Navigate to your website, open up the Developer Tools and move to the Application tab. Under Storage, select the top level domain of your website where all the cookies will be displayed, and use the filter menu along the top and look for '_ga' 

There will be 1 cookie that will have an ID associated, will look like "ga_DTR0JXYKPC". Take note of the "DTR0JXYKPC"

Deploying this through a tag manager would be the quickest means at deployment but can also be deployed directly. 

  1. In the default workspace, navigate to the Tags tab and create a new Tag. Tag Type will be 'Custom HTML'
  2. <script>
    function sendToNoibu(sessionIdData){
    window.NOIBUJS.addCustomAttribute("GASessionID", sessionIdData['ga_session_id'])
    }
    function getSessionData(callback) {

    // Use your own ID here ↓
    var pattern = /_ga_DTR0JXYKPC=GS\d\.\d\.(.+?)(?:;|$)/;
    var match = document.cookie.match(pattern);
    var parts = match ? match[1].split(".") : [];

    if (!parts || !window.NOIBUJS) {
    // Cookie not yet available; wait a bit and try again.
    window.setTimeout(function() {
    getSessionData(callback);
    }, 200);
    return;
    }

    var data = {
    ga_session_id: parts.shift(),
    ga_session_number: parts.shift()
    };
    callback(data);
    }
    getSessionData(sendToNoibu)
    </script>
  3. Ensure that you replace the ID found in the 'var pattern' with the ID that you found in the pre-requisites from the Google Analytics Cookie
  4. Trigger on all pages or on specific events that you are interested in tracking
  5. Save and Submit the changes to push to your site.

What this will give you is the ability to find sessions in Noibu by using the Google Analytics Session ID. You can also filter on all sessions that contain a GA Session ID if you are triggering on a specific event. 
Custom ID Name: GASessionID

Custom ID Value: (value pulled from the GA cookie)

Google Tag Manager Method 

This process assumes you've established a Google Tag that points back to your Google Analytics 4 container ID.

  1. In the default workspace, navigate to the Variable tab and create a new variable.

  2. Select the Custom JavaScript variable type.



  3. Rename the variable to Noibu Session ID.

  4. Insert the block of code below into the text box provided.

    function getNoibuSessionId() {
    // Retrieve the Noibu session ID from local storage
    var noibuData = JSON.parse(localStorage.getItem('n_browser_data'));
    var noibuSessionId = noibuData ? noibuData.BrowserId : '';

    // Return the Noibu session ID
    return noibuSessionId;
    }
  5. Switch to Google Tag Manager, and use the Preview function to ensure the variable is being captured properly. 
    Screenshot 2023-10-04 at 9.22.28 AM.png

With this variable configured, you can pass it along as a User Property when a GA4 event triggers. You can also use it as part of your debugging workflow. The variable is set every time a user visits any page. To capture this on every page, use the page_view event name in the Tag Configuration.



Once the variable has been set as a User Property on a GA4 Event, you will also find the NoibuSessionID in the Debug tool in Google Analytics. It is not in Google's best practices to use this variable as a dimension in Google Analytics as it will slow reports down substantially.

Articles in this section