N.Rich Tag Installation using HubSpot CMP

Learn how to install the N.Rich tag if you are using HubSpot CMP for cookie management.

Overview

The following guide aims to help you install the N.Rich Tag if you use HubSpot Cookie banner and Google Tag Manager to manage tags on your website.

It assumes that you are familiar with basic Google Tag Manager concepts and HubSpot Cookie banner was already installed on your website.

Explanation for the concept

This setup involves creating two tags:

1. N.Rich Bootstrap Tag: A “safe” tag that initializes the N.Rich script without enabling cookies, allowing it to fire before user consent is granted.

2. N.Rich Consent Grant Listener Tag: This tag is used to register a listener for a cookie consent grant from HubSpot. There is a handler function which is using N.Rich tag API to allow cookies if consent was granted.

By following these steps, you’ll ensure the N.Rich tag complies with GDPR and other privacy regulations while delivering effective marketing data.

How-to

The implementation of the N.Rich Website Tag is divided into three steps to ensure proper functionality and compliance with consent management. Each step is essential for a compliant and effective implementation. Follow the steps carefully to set up the N.Rich tag.

Step 1 (optional): Creating Trigger in GTM

This step uses Hubspot Cookie Banner API to register a handler function which will analyze consent status and will send a signal to the GTM if analytics cookies category is granted. As you are using other tags in your GTM setup it’s quite possible that you already have a similar trigger. In that case feel free to use the existing one.

Create the HubSpot consent listener's Tag

1. From the left panel of your GTM account, select Tags > In the Tags section, click New.

2. Click Tag Configuration > Choose Custom HTML as the tag configuration type.

3. Copy the following code and paste it into the HTML box 

   <script> var _hsp = window._hsp = window._hsp || []; _hsp.push([ 'addPrivacyConsentListener', function (consent) { if (consent.categories.analytics) { window.dataLayer.push({ event: 'analytics-accepted' }); } }, ]); </script>

4. Under Triggering click Add Trigger and select All pages

5. Name the tag, e.g. HubSpot consent listeners Click Save

Creating a custom event trigger

1. From the left panel of your GTM account, select Triggers > In the Triggers section, click New.

2. Click Trigger Configuration > Choose Custom Event as the trigger type.

3. In the Event Name text box, enter analytics-accepted.

4. Under This trigger fires on, choose All Custom Events.

5. Name Trigger, e.g. HubSpot Analytics accepted and click Save

Step 2: Creating N.Rich Bootstrap Tag

The N.Rich Bootstrap Tag initializes the N.Rich script in its safe mode (cookies disabled) and must fire on all pages. Follow these steps to create it:

1. Create a new tag.

   • In the left-hand menu of GTM, go to Tags and click New.

   • Click Tag Configuration and select Custom HTML.

2. Add the N.Rich code.

   • Obtain the N.Rich script from your N.Rich platform account.

   • Copy the script and paste it into the HTML box in GTM.

3. Set the trigger.

   • Under Triggering, click Add Trigger.

   • Select the existing All Pages trigger.

4. Save the tag.

   • Name the tag (e.g., “N.Rich Bootstrap”) and save it.

Step 3: Create the N.Rich Allow Cookies Tag

The N.Rich Consent Grant Listener Tag uses Hubspot Cookie Banner API to register a handler function which will analyze consent status and will allow N.Rich Tag to use cookies if analytics cookies category was granted:

1. Create a new tag.

   • In the left-hand menu of GTM, go to Tags and click New.

   • Click Tag Configuration and select Custom HTML.

2. Add the N.Rich code.

   • Use code below to use as a listener. 

     <script> window._nrich = window._nrich || []; window._nrich.push(["enableCookies",true]); </script>

   • Copy the script and paste it into the HTML box in GTM.

3. Set the trigger.

   • Under Triggering, click Add Trigger.

   • Choose HubSpot Analytics accepted trigger which was created in Step 1.

4. Save the tag.

   • Name the tag (e.g., “N.Rich Allow Cookies”) and save it.

Step 4: Test Your Implementation

Before publishing your changes, we strongly recommend testing your setup using Preview Mode in Google Tag Manager. This helps ensure that everything works as expected and prevents issues caused by misconfiguration or conflicts.

1. Enable Preview Mode.

   • In GTM, click Preview in the top-right corner to activate Preview Mode.

2. Verify the tags.

   • Navigate to your website while Preview Mode is active.

   • Use the GTM debugging panel to confirm that:

   • The N.Rich Bootstrap Tag fires on all pages.

   • The N.Rich Allow Cookies Tag fires only when analytics consent is granted.

3. Check for conflicts or errors.

   • Ensure both tags load without errors or conflicts with other scripts on your website.

4. Publish the changes.

   • Once you’ve verified the setup, return to GTM and click Submit to publish your container.

5. The final step is to ensure that N.Rich is receiving both cookieless and standard signals from your website. You can check this in the Setup section of your N.Rich platform account.