Integration Guides

Before integrating any service, make sure you've embedded the Consenter script in your website's <head> section. You can find the embed code in Consenter Manager by going to Sites → Your Site and clicking the Embed code button. This script must be placed before any third-party integration code.

Contextual consent

For the following services, we provide step-by-step integration guides:

Matomo

Google Analytics 4

eTracker

Optimizely

Criteo

Custom Integration

If your service is not listed above, you can integrate it manually using the Consenter API.

How It Works

Once the Consenter script is loaded, you can use window.consenter.subscribe() to listen for consent changes for any service.

The Consenter API may not be available immediately when your script runs. Always listen for the consenter:ready event on the document to know when window.consenter is ready. If the API is already loaded, you can call it directly. The code examples below show the recommended pattern.

index.html

function subscribeToConsenter() {
  window.consenter.subscribe(
    function (hasConsent) {
      if (hasConsent) {
        // Enable the service
      } else {
        // Disable the service
      }
    },
    "SERVICE_ID", // The service ID
    "PURPOSE_ID", // The purpose ID
  );
}

if (window.consenter) {
  subscribeToConsenter();
} else {
  document.addEventListener("consenter:ready", subscribeToConsenter);
}

Parameters:

Callback function: Receives true when user grants consent, false when consent is withdrawn
Service ID: The unique identifier for the third-party service
Purpose ID: The purpose identifier

Finding Your Service and Purpose IDs

To find the correct IDs for your integration:

Go to Consenter Manager
Select your website
Click on your active banner version in the table
You'll see the Technologies Configuration page with all your configured purposes, services, and data categories
To find the Purpose ID: Hover over the purpose label (e.g., "Improve the website") and click the copy button in the tooltip
To find the Service ID: Hover over the service label (e.g., "Google Analytics") and click the copy button in the tooltip
Use both IDs in your integration code

Example

Here's a complete example showing how to integrate any service:

index.html

<script>
  var serviceApiKey = "YOUR_API_KEY"; 
  var serviceId = "YOUR_SERVICE_ID"; 
  var purposeId = "YOUR_PURPOSE_ID"; 

  // Initialize your service with consent requirement
  // (Each service has its own initialization method)
  initializeService({
    apiKey: serviceApiKey,
    requireConsent: true, // Prevent loading without consent
  });

  // Subscribe to consent changes
  function subscribeToConsenter() {
    window.consenter.subscribe(
      function (hasConsent) {
        if (hasConsent) {
          // User granted consent - enable the service
          enableService();
        } else {
          // User rejected or withdrew consent - disable the service
          disableService();
          removeServiceData();
        }
      },
      serviceId,
      purposeId,
    );
  }

  if (window.consenter) {
    subscribeToConsenter();
  } else {
    document.addEventListener("consenter:ready", subscribeToConsenter);
  }
</script>

Consult your service's documentation for the specific methods to enable and disable tracking or functionality.

How is this guide?

Integration Guides

Contextual consent