Skip to main content

Direct implementation and markup guide

Updated

Usercentrics CMP can be implemented in a variety of methods, for example via plugins, tag management systems, and by directly adding the script(s) to the source code of your website.
This guide will focus on the latter method and will also show you how to modify scripts to ensure that the corresponding data processing service only loads when a visitor has consented to its use.

Adding the Web Consent Management Platform

One of the core features of the CMP is preventing data processing services from executing prior consent. To achieve this you can utilize the auto-blocking feature. This approach is referred to as "Auto-blocking mode".
Alternatively, you can modify scripts in such a way that they can't load prior consent and can be identified and enabled by the CMP once consent has been given. This approach is referred to as "Manual blocking mode.

Auto-blocking mode is the recommend approach, Manual blocking mode is intended for advanced users.

To add the script which will surface the consent banner, and control whether services can run based on a visitor's choices, you must copy the CMP script snippet and add it to your website's template.

Auto-blocking mode
Manual blocking mode

When using the auto-blocking feature, the CMP script must load before any other scripts!

Here is an example of how that might look:

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Usercentrics Web CMP -->
    <script src="https://web.cmp.usercentrics.eu/modules/autoblocker.js"></script>
    <script
      id="usercentrics-cmp"
      src="https://web.cmp.usercentrics.eu/ui/loader.js"
      data-settings-id="XxxXXXxx"
      async
    ></script>
    <!-- End Usercentrics Web CMP -->

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Consent Mode implementation demo</title>

    ...

  </head>
  <body>

    ...

  </body>
</html>

When you enable auto-blocking, no additional steps are required. Adjustments needed to ensure services only load when the end-user has consented to their use are performed by the auto-blocking feature.

Here is an example of how that might look:

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Usercentrics Web CMP -->
    <script
      id="usercentrics-cmp"
      src="https://web.cmp.usercentrics.eu/ui/loader.js"
      data-settings-id="XxxXXXxx"
      async
    ></script>
    <!-- End Usercentrics Web CMP -->

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Consent Mode implementation demo</title>

    ...

  </head>
  <body>

    ...

  </body>
</html>

Modifying scripts to ensure "consent awareness"

Unless you enable the auto-blocking feature, scripts must be modified in order for them to be blocked prior consent. Failure to apply these modifications without enabling auto-blocking may result in data processing occurring without consent.

The modification consists of two parts; Setting the type to "text/plain", and adding the data-usercentrics attribute with the exact name of the data processing service as it's added in the Usercentrics Admin Interface that will be loaded via this script.

Changing the type tricks the browser into seeing the script as a text file, which prevents the script from executing. So this turns the script "off" by default and failure to make this change will cause the script to execute as it normally would.
The data-usercentrics attribute is used to assess whether the service should be turned "on". Omitting this attribute would cause the script to never be executed, even if consent is given.

An example of enabling consent awareness

Here's a fictional data processing service, aptly named "Data Processing Service". In its current state, nothing prevents it from loading, so it will load even if a visitor doesn't consent to the use of this service.

Currently the type is not set, which will apply the default for script elements, which is type="text/javascript".

<script src="https://dataprocessingservice.com/resource/service.js"></script>

To ensure that our fictional service respects our visitors' choices, we need to apply some changes as described above:

<script
  src="https://dataprocessingservice.com/resource/service.js"
  type="text/plain"
  data-usercentrics="Data Processing Service"
></script>