Skip to main content

Wordpress: Plugin (V1 CMP) + Direct Implementation (V1 and V2 CMP) and Adjusting Existing Scripts Guide

Richard van der Velde
Updated

In this article we will describe how you can easily implement Usercentrics into your WordPress website. There are 2 different ways to complete the implementation, depending on which CMP version you have:

  1. Simply install and set up the plugin (for CMP v1)

  2. Manually write the Usercentrics script tag into your website without the plugin (for CMP v1 or CMP v2)

Please note the plugin steps for installation of Usercentrics to WordPress are currently available for CMP v1 users. A guide for CMP v2 will be released once the new plugin with additional features is available.

Content

Part 1: Install Usercentrics to your WordPress website

Option 1: Install CMP v1 plugin from your WordPress website (Option only for CMP v1)

  1. Log into your WordPress website

  2. Under “Plugins” select “Add New”

    15ba361b-c241-4278-a473-8cd5b61cdb51.png

  3. In the search bar, search for “Usercentrics CMP” and select it

  4. Select “Activate Plugin”
    1938254f-0324-4b8a-9388-aa10735bd83c.png

 

Option 2: Install Usercentrics tag script manually to your WordPress website without using the plugin (Options for CMP v1 or CMP v2)

It is highly recommended that you use a child theme, that extends the main theme, and install the CMP manually into the child theme. This ensures the next time there is an update for your theme, the changes are not overwritten and lost. That means you do not have to make an update manually every time your theme updates.

We suggest contacting a Wordpress developer to create a child theme and then help you with the manual script integration steps below through the child theme.

  1. Login to your admin section of your WordPress website

  2. Select “Appearance” and then “Theme Editor” under the menu

  3. Find your current theme or child theme (recommended) from the dropdown list and click “Select”

  4. Once under “Edit Themes'', double check you are in the right theme to edit on the top right. Then on the right menu under the “Theme file list”, click “header.php”

    ac306d40-d4bb-4698-a270-4f2d6a3aa325.png

  5. Now add your Usercentrics script tag into header.php file html <head> section

In your Settings dashboard you can find your personal script with your Settings-ID under „General“ (CMP v1) or “Implementation” (CMP v2).

Code for CMP Version 1

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

Code for CMP Version 2

<script id="usercentrics-cmp" data-settings-id="XXXXXXXX" src="https://app.usercentrics.eu/browser-ui/latest/loader.js" async></script>

Copy your unique script from the Admin Interface or replace “XXXXXXXXX” with your personal Settings-ID in the above relevant code example.

Part 2: Usercentrics CMP

After completing the installation in Part 1, you will see Usercentrics CMP in your left side menu in WordPress.

  1. Select “Usercentrics CMP” and enter your Usercentrics Settings-ID. Your unique s
    Settings-ID can be found under your Usercentrics Admin Interface.

  2. If you have Google Tag Manager, you can additionally and optionally add your unique Google Tag Manager Container ID.

To be GDPR/CCPA compliant, it is crucial to embed the Google Tag Manager in a specific manner. Therefore you will have to remove any existing Google Tag Manager inclusions before using this plugin.

889845b8-7a0f-439d-a75b-c15671efb3f0.png

Part 3: Do not forget to block your third party services!

Do you have third party services, such as Google Analytics? If you are unsure, you can find out by using our DPS Scanner in your Admin Interface.

If you have third party services, you will need to manually block each of them until a user gives consent. In order to block third party services and cookies until the user has given consent, you will need to follow the steps below for each third party.

Using Google Analytics as a third party service example, you can follow the steps below:

Step 1: Add Google Analytics Code to WordPress

Add your Google Analytics code to the header section of the current theme. You can get to the header section of your current theme by following the steps:

  1. Select “Appearance” and then “Theme Editor” under the WordPress menu

  2. Find your current theme from the dropdown list and click “Select”

  3. Once under “Edit Themes'', double check you are in the right theme to edit on the top right. Then on the right menu under the “Theme file list”, click header.php
    5762f8e6-a7fc-4bd8-b7cd-4514bf0708d6.png

 

Step 2: Adjust the Existing Google Analytics Script

Once the Usercentrics tag script has been integrated into your website, all existing scripts need to be customized. This step is mandatory to ensure scripts are only executed after a consent has been given.

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 mandatory to ensure the script is not automatically interpreted and executed by the browser when the page is called.

Assign a data attribute

The scripts of the data processing services that you‘re using need to be given a custom data attribute. It is used to connect to our Consent Management Platform and to query consents.

The syntax of this data attribute is 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“.

9b89f1e9-12bc-4e94-9827-353c167eb0e6.png
Please pay attention to upper and lower case as well as blank spaces as those are considered by the CMP.

As an example, we're going to adjust the Google Analytics script.

Here is the original script:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].g||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga')

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
<script>

Once adjusted, it becomes:

<script type="text/plain" data-usercentrics="Google Analytics">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].g||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga')

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
<script>

From now on, upon page load, the Google Analytics script will only be executed if your visitor has given consent to Google Analytics.

⚠ Note: If a user revokes consent after a service was already loaded, then you must ensure the service is disabled or not used anymore. For example, you can force a page reload which will stop dat processing services without consent from being executed.

Repeat the steps above for any other third party services you have.

For questions about third party services using GTM, please see our documentation for CMP v1 here. For questions about third party services using GTM, please see our documentation for CMP v2 here.

Comments

0 comments

Please sign in to leave a comment.