Direct integration of the Usercentrics-script into your website
Table of contents
The Usercentrics Consent Management Platform (CMP) can be quickly and easily integrated into your website so that your scripts are only executed if you have the consent of your visitor.
In this step-by-step guide, we’ll show you how to:
- Integrate the Usercentrics script into your website
- Execute your scripts only after a consent of your visitors
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="Name Data Processing Service", where “Name Data Processing Service” corresponds to the exact name of the Data Processing Services you created in your Settings dashboard under “Data Processing Services“.
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, upon page load, the Google Analytics script will only be executed if your visitor has consented to the “Google Analytics” Consent with the same name.
Note: If a user revokes consent after a service was already loaded, then you must ensure the service is disabled or not used anymore. If appropriate, you can alternatively simply reload the page after the user revokes consent, in which case the CMP will be able to block it upon page load.
