Direct integration of the Usercentrics-script into your website

Step 1: Integration of Usercentrics-script into your website

To execute your scripts only after your visitors have given their consent, you must first integrate the Usercentrics script into your website.

Implement the Usercentrics-script in the head area

In your Settings dashboard you can find under "General" your personal script with your Settings-ID. Except for the ID, the script looks like this:

<script type="application/javascript" src="https://app.usercentrics.eu/latest/main.js" id="XXXXXXXXX"></script>

Copy your script from the Settings dashboard or replace "XXXXXXXXX" with your personal Settings ID in the above code example.

You then implement this code in the head section of your website so that our Consent Management Platform (CMP) is triggered on your website.

Please note: Make sure that in your settings the correct domain is stored (under "General" -> "Domain"). Only if this is ensured, the Usercentrics script can be executed on your website.

Step 2: Adjust existing scripts

Once the Usercentrics script has been integrated into your website, all existing scripts need to be customized. This step is necessary so that scripts are executed only after explicit permission of your visitors.

Change script type - "text / javascript" becomes "text / plain"

To customize your scripts, two small adjustments are necessary. The first one refers to the script type. Change the type from type="text/javascript" to type="text/plain" in your scripts.

If your script does not explicitly specify type="text/javascript" as it can be interpreted by the browser without naming it, you still have to adjust it to type="text/plain".

This adjustment is necessary so that the script is not automatically interpreted and executed by the browser when the page is called.

Assign data attributes

To connect to our Consent Management Platform and query consent status on a script-based basis, your scripts still require a custom data attribute.

This data attribute is constructed according to the principle data-usercentrics="Consentname", where "Consentname" corresponds to the exact name of the Consents you created in your Settings dashboard under "Consents“.

Please note: Capital and lower case letters as well as spaces are also considered!

Here's an example from the Google Analytics script:

Original:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>

becomes

Customized Version:
<script type="text/plain" data-usercentrics="Google Analytics" async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script type="text/plain" data-usercentrics="Google Analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>

From now on, the Google Analytics script will only be executed if your visitor has consented to the "Google Analytics" Consent with the same name.