How to prevent HubSpot tracking prior consent

How does it work with the Usercentrics dataLayer?

Standard Package

1. Add the Data Layer Name e.g. dataLayer in the Usercentrics Admin Interface. You can find find this in the Implementation section, on the DataLayer & Events tab.
   
2. Use the code below:

   The full code needs to be added in the body or the footer of the page or directly into the template's body.

   <script>
     dataLayer = window.dataLayer || [];
     function removeHsCookies() {
       _hsp.push(['revokeCookieConsent']);
       _hsq.push(['doNotTrack']);
     }
     function addHsCookies() {
       _hsq.push(['doNotTrack', { track: true }]);
     }
     var waitForDataLayerObjHubSpot = function (dataLayer, callback) {
       if (dataLayer.length > 0) {
         callback();
       } else {
         setTimeout(function () {
           waitForDataLayerObjHubSpot(dataLayer, callback);
         }, 1000);
       }
     }
     waitForDataLayerObjHubSpot(dataLayer, function () {
       dataLayer.map(function (ele) {
         if (ele.event === 'consent_status') {
           if (ele['HubSpot'] === true) {
             addHsCookies();
           } else {
             removeHsCookies();
           }
         }
         return ele;
       })
     });
   </script>
   

Business & Enterprise Package

1. Add the Window Event Name e.g. ucEvents in the Usercentrics Admin Interface:
   

First we add the removeHsCookies() function which does two things:

revokeCookieConsent - Remove the hubSpot cookie consent as the page is a HubSpot hosted page and the tracking code is embedded on the page that’s why it gets automatically dropped. So we need to remove it.

doNotTrack - When the cookie drops on the page with the do not track cookies data becomes anonymised and we don’t track the user

function removeHsCookies(){
  _hsp.push(['revokeCookieConsent']);
  _hsq.push(['doNotTrack']);
}

Then we create a second function addHsCookies() where we set the doNotTrack = true for the cookie to be removed and HubSpot tracking code to collect data again.

function addHsCookies() {
  _hsq.push(['doNotTrack', { track: true }]);
}

Now we need to call these two functions based on the user consent. To do that we will use EventListener

window.addEventListener('ucEvent', function (e) {
  if (e.detail.action == 'onAcceptAllServices' ) {
    addHsCookies();
  } else if (e.detail.event == 'consent_status') {
    if (e.detail['HubSpot'] === true) { 
      // check for consent status of service "HubSpot"
      addHsCookies();
    } else {
      removeHsCookies();
    }
  } else {
    removeHsCookies();
  }
});

<script>
  function removeHsCookies(){
    _hsp.push(['revokeCookieConsent']);
    _hsq.push(['doNotTrack']);
  }
  function addHsCookies() {
    _hsq.push(['doNotTrack', { track: true }]);
  }
  window.addEventListener('ucEvents', function (e) {
    if (e.detail.action == 'onAcceptAllServices' ) {
      addHsCookies();
    } else if (e.detail.event == 'consent_status') {
      if (e.detail['HubSpot'] === true) { 
        // check for consent status of service "HubSpot"
        addHsCookies();
      } else {
        removeHsCookies();
      }
    } else {
      removeHsCookies();
    }
  });
</script>

How to test it:
Test page: Contact - Open your HubSpot page → Dev tools → Application → Cookies

You will see hubspotutk and few more cookies to drop there and that is expected behaviour as it is a hosted page.

Click Deny All → The hubspotutk cookie will no longer be there and the __hs_do_not_track cookie will drop in the visitors browser, which will prevent the HubSpot tracking code from sending any information for the visitor.

Click Accept All or give consent to the HubSpot DPS and Save Services (It might need to reloading the page)