Ketch Consent Management

Integrate RudderStack with the Ketch consent management platform.

  •   3 minute read  

Ketch is a consent and preference management platform. It offers APIs and a robust infrastructure to ensure users’ privacy choices across internal and external systems.

RudderStack’s JavaScript SDK seamlessly integrates with the Ketch consent manager, letting you map Ketch’s consent purposes to RudderStack’s consent purposes. RudderStack, in turn, uses the consent information to turn user tracking on/off and sends data to the destinations accordingly.

Integration overview

This section explains how the Ketch Smart Tag integration with RudderStack works.

  1. Websites with the Ketch Smart Tag present a consent experience for users to decide the consent purposes depending on the applicable regulatory framework.
  2. User consent is stored in the Ketch backend and cached in the user’s browser.
  3. RudderStack’s JavaScript SDK fetches the consented purposes and Ketch consent purpose mappings specified in the RudderStack dashboard.
  4. Depending on the settings, the JavaScript SDK filters the destinations to load on the website.
  5. If the user maps more than one consent purpose to a destination in the dashboard, the SDK forwards the events to the destination if one of the consent purposes is granted.

Limitations

The Ketch consent management integration supports only the following destinations (in both cloud mode and device mode:

Set up Ketch integration

The following steps highlight the JavaScript SDK integration with Ketch Smart Tag:

Step 1: Configure Ketch Smart Tag

  1. Create a Ketch account.
  2. Create and deploy the Ketch Smart Tag. See Ketch documentation or their video tutorial for more information.

To enable Ketch for your JavaScript source, specify the Ketch consent purposes (defined in Step 1) for each destination connected to the source in RudderStack.

The following image highlights a consent purpose created in the Ketch dashboard:

Ketch consent purposes

The Ketch consent purpose mapped in the RudderStack dashboard:

Ketch consent mapping in RudderStack dashboard

Step 3: Set up your website

Place the scripts in your web page’s <head> section in the following sequence:

  1. Place the Ketch script. You can get the script by going to your Ketch dashboard and navigating to Experience Server > Properties. Select your Ketch Smart Tag and click Export Code to get the script. For more information, see Ketch documentation.

The following snippet highlights a sample script:

<script>
  ! function() {
    window.semaphore = window.semaphore || [], window.ketch = function() {
      window.semaphore.push(arguments)
    };
    var e = new URLSearchParams(document.location.search),
      o = e.has("property") ? e.get("property") : "<your-ketch-tag>",
      n = document.createElement("script");
    n.type = "text/javascript", n.src = "https://global.ketchcdn.com/web/v2/config/xxxxxxx/".concat(o, "/boot.js"), n.defer = n.async = !0, document.getElementsByTagName("head")[0].appendChild(n)
  }();
</script>
  1. Place the RudderStack SDK script. Remove the load() function from the script as it needs to be loaded conditionally as mentioned below:
<script type="text/javascript">
!function(){var e=window.rudderanalytics=window.rudderanalytics||[];e.methods=["load","page","track","identify","alias","group","ready","reset","getAnonymousId","setAnonymousId","getUserId","getUserTraits","getGroupId","getGroupTraits","startSession","endSession","getSessionId"],e.factory=function(t){return function(){e.push([t].concat(Array.prototype.slice.call(arguments)))}};for(var t=0;t<e.methods.length;t++){var r=e.methods[t];e[r]=e.factory(r)}e.loadJS=function(e,t){var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a)},e.loadJS(),
e.page()}();
</script>
  1. Call the SDK load() function as per the below script. RudderStack calls the load() function immediately if user consent is available. Otherwise, it registers the load function callback using the Ketch SDK to wait for user consent.
<script>
function getCookie(key) {
  return window.document.cookie.split('; ').reduce((r, v) => {
    const parts = v.split('=')
    return parts[0] === key ? decodeURIComponent(parts[1]) : r
  }, '')
}

if (getCookie('_ketch_consent_v1_')) {
  rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
    cookieConsentManager: {
      ketch: {
        enabled: true
      }
    },
    //other options
  });
} else {
  // waiting for consent
  ketch('once', 'hideExperience', () => {
    rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
      cookieConsentManager: {
        ketch: {
          enabled: true
        }
      },
      //other options
    });
  });
}
</script>

Replace WRITE_KEY and DATA_PLANE_URL in the above snippet with their actual values.

warning

Note the following:

  • If user updates their consent settings, refresh the web page for the changes to take effect in the SDK.
  • For JavaScript SDK v3, the load option for configuring consent management has changed. See Breaking Changes for more information.

Questions? Contact us by email or on Slack