print

TRUENDO & HubSpot Standalone Integration Guide

Overview#

  • HubSpot: Offers tracking scripts, analytics, and a built-in cookie consent banner.
  • TRUENDO: Acts as a dedicated third-party Consent Management Platform (CMP).
  • Goal: Use TRUENDO’s consent settings to govern when HubSpot tracking and cookies are enabled or disabled, effectively replacing HubSpot’s own banner with TRUENDO’s.

Since TRUENDO will manage user consent instead of HubSpot, you must disable HubSpot’s banner to avoid duplicate consent prompts. As per HubSpot’s documentation, add the following script before HubSpot’s tracking code loads:

<script>
// Disable HubSpot’s built-in cookie banner
window.disableHubSpotCookieBanner = true;
</script>

This prevents HubSpot from automatically showing its banner or storing consent in its own cookies.

2. Include HubSpot’s Tracking Code#

Next, install HubSpot’s standard tracking code on your page(s). Typically, this is placed in the <head> or before the closing </body> tag:

<!-- Example HubSpot Tracking Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/YOUR_HUBSPOT_PORTAL_ID.js"></script>

Note: Keep the tracking code in place, even though the banner is disabled. HubSpot cookies will only be set or updated when we later grant consent via TRUENDO’s callbacks.

TRUENDO provides two methods to detect changes in user consent:

  1. Global Callback Function: TruendoCookieControlCallback(cookieSettings)
  2. Event Listener: Listening for the TruendoCookieControl event on window.

Either approach allows you to run custom code whenever a user changes their settings in TRUENDO’s banner.

A. Global Callback Approach

<script type="text/javascript">
  function TruendoCookieControlCallback(cookieSettings) {
    // Example: console.log each consent category:
    if (cookieSettings.ack) {
      console.log('Cookie dialog acknowledged');
    }
    if (cookieSettings.necessary) {
      console.log('Necessary cookies enabled');
    }
    if (cookieSettings.preferences) {
      console.log('Preference cookies enabled');
    }
    if (cookieSettings.statistics) {
      console.log('Statistics cookies enabled');
    }
    if (cookieSettings.marketing) {
      console.log('Marketing cookies enabled');
    }
    if (cookieSettings.social_content) {
      console.log('Social Content cookies enabled');
    }

    // 4. Pass consent status to HubSpot
    updateHubSpotConsent(cookieSettings);
  }
</script>

B. Event Listener Approach

<script type="text/javascript">
  window.addEventListener('TruendoCookieControl', function (event) {
    var cookieSettings = event.detail; // The user's current consent choices

    // Example: console.log each consent category:
    if (cookieSettings.ack) {
      console.log('Cookie dialog acknowledged');
    }
    if (cookieSettings.necessary) {
      console.log('Necessary cookies enabled');
    }
    if (cookieSettings.preferences) {
      console.log('Preference cookies enabled');
    }
    if (cookieSettings.statistics) {
      console.log('Statistics cookies enabled');
    }
    if (cookieSettings.marketing) {
      console.log('Marketing cookies enabled');
    }
    if (cookieSettings.social_content) {
      console.log('Social Content cookies enabled');
    }

    // 4. Pass consent status to HubSpot
    updateHubSpotConsent(cookieSettings);
  });
</script>

Note: You only need one of these approaches (global function OR event listener) in your final implementation.

HubSpot’s API allows you to set the visitor’s consent through _hsp.push(['setHubSpotConsent', {}]). This function takes an object describing whether each category of cookies is allowed (true) or disallowed (false).

HubSpot’s categories and TRUENDO’s categories might not match one-to-one. Decide how you want to map TRUENDO categories to HubSpot’s analytics, advertisement, and functionality. Below is a simple example:

<script>
// Example function to map TRUENDO settings to HubSpot’s categories
function updateHubSpotConsent(cookieSettings) {
  // Example mapping:
  // - TRUENDO’s "necessary" → HubSpot’s "functionality"
  // - TRUENDO’s "statistics" → HubSpot’s "analytics"
  // - TRUENDO’s "marketing" → HubSpot’s "advertisement"
  // Other categories are optional, depending on your needs.

  var hubspotConsent = {
    analytics: cookieSettings.statistics || false,
    advertisement: cookieSettings.marketing || false,
    functionality: cookieSettings.necessary || false
  };

  // Use HubSpot’s 'setHubSpotConsent' method to update the current visitor’s consent
  window._hsp = window._hsp || [];
  window._hsp.push([
    'setHubSpotConsent',
    hubspotConsent
  ]);
}
</script>
  1. Disable HubSpot Banner: window.disableHubSpotCookieBanner = true;
  2. Wait for TRUENDO Callback: Either via TruendoCookieControlCallback() or the TruendoCookieControl event.
  3. Update HubSpot: _hsp.push(['setHubSpotConsent', { ... }]) with the mapped consent states.

Once this process is in place:

  • HubSpot tracking scripts will run or remain blocked based on the user’s TRUENDO consent settings.
  • You can optionally call _hsp.push(['revokeCookieConsent']) if you need to remove all HubSpot cookies upon a user’s revocation of consent.
  • If you want to prevent all data from being sent to HubSpot for certain users, you can also leverage _hsq.push(['doNotTrack']).

Adjust TRUENDO Settings

Similarly, TRUENDO can re-display its consent dialog if you want users to adjust preferences anytime (e.g., via a “Cookie Settings” button). Once TRUENDO updates the settings, it will automatically trigger your chosen callback method (TruendoCookieControlCallback or the TruendoCookieControl event), which will then update HubSpot with the latest consent state.

5. Verifying the Integration#

  1. Load the Page: Ensure window.disableHubSpotCookieBanner is set to true, so no HubSpot banner appears.
  2. Check TRUENDO: Verify TRUENDO’s banner loads and captures consent.
  3. Open Console: Interact with TRUENDO’s cookie preferences. Observe console logs for messages confirming each category has changed.
  4. Check Network Requests: When a user grants analytics or marketing consent in TRUENDO, HubSpot scripts should begin collecting data (as verified in your dev tools or with test accounts).

6. Example Consolidated Snippet#

Below is an illustrative minimal HTML snippet to show the entire flow in one place:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- TRUENDO Script Insert (example) -->
   <script id="truendoAutoBlock" type="text/javascript" src="https://cdn.priv.center/pc/truendo_cmp.pid.js" data-siteid="YOUR_SITE_ID"></script>
  <meta charset="UTF-8" />
  <title>TRUENDO & HubSpot Integration</title>

  <!-- 1. Disable HubSpot Banner -->
  <script>
    window.disableHubSpotCookieBanner = true;
  </script>

  <!-- 2. HubSpot Tracking Code -->
  <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/YOUR_HUBSPOT_PORTAL_ID.js"></script>

  <!-- 3. (Option A) Implement TRUENDO Global Callback -->
  <script>
    function TruendoCookieControlCallback(cookieSettings) {
      console.log('TRUENDO settings updated:', cookieSettings);
      updateHubSpotConsent(cookieSettings);
    }

    function updateHubSpotConsent(cookieSettings) {
      var hubspotConsent = {
        analytics: cookieSettings.statistics || false,
        advertisement: cookieSettings.marketing || false,
        functionality: cookieSettings.necessary || false
      };
      window._hsp = window._hsp || [];
      window._hsp.push([
        'setHubSpotConsent',
        hubspotConsent
      ]);
      console.log('HubSpot consent updated:', hubspotConsent);
    }
  </script>
</head>
<body>
  <!-- TRUENDO automatically injects its banner; user interacts to accept/reject. -->
  <!-- Example: Button to revoke cookies -->
  <button onclick="revokeHubSpotCookies()">Revoke HubSpot Cookies</button>
  <script>
    function revokeHubSpotCookies() {
      var _hsp = window._hsp = window._hsp || [];
      _hsp.push(['revokeCookieConsent']);
    }
  </script>
</body>
</html>


Disclaimer: This is just an example skeleton. You must place, load, and configure scripts according to your specific project structure and domain setup.

Summary#

  1. Disable HubSpot’s banner (window.disableHubSpotCookieBanner = true;).
  2. Load TRUENDO to capture user consent.
  3. Use TRUENDO’s callbacks (TruendoCookieControlCallback or TruendoCookieControl event) to listen for changes in user consent.
  4. Map TRUENDO settings to HubSpot’s analytics, advertisement, functionality categories via _hsp.push(['setHubSpotConsent', {...}]).

  5. Optionally handle advanced scenarios:

    • Removing cookies: _hsp.push(['revokeCookieConsent'])
    • Do not track: _hsq.push(['doNotTrack'])
    • Re-opening TRUENDO banner for user preference changes.

By following these steps, HubSpot’s tracking scripts will fully respect the consent states managed by TRUENDO—ensuring your website is both compliant and user-friendly.

×