Usercentrics Shopify Implementation Guide (CMP v2)

Usercentrics implements into your Shopify website in just a few minutes. Simply add the Usercentrics script to your theme header, as well as any additional scripts for your tag manager that you use.

Please note this guide is for CMP v2. If you have CMP v1, please migrate to CMP v2 to continue.
Contact our Support Team to assist you if you need help.

An issue with direct implementation of Usercentrics privacy banner (v2) has been identified for Shopify platform: https://usercentrics.atlassian.net/wiki/spaces/SKB/pages/2504687622

Part 1: Installing Usercentrics on Your Shopify Website

When it comes to integrating Usercentrics CMP on your Shopify website, you have two options: you can either implement the CMP directly onto your page or opt for integration via Google Tag Manager.

Direct Implementation:

If you choose to implement the CMP directly onto your page, follow these steps:

Access Your Script: In the Admin Interface of Usercentrics, locate your unique script under the 'Implementation' section.
Add the Script: Insert the following script within the <head> section of your HTML code on Shopify:

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

Integrating Custom HTML Code:

To add custom HTML code to your Shopify store, follow these steps:

Access Theme Editor:
- Log in to your Shopify admin panel.
- Navigate to "Online Store" and then click on "Themes."
Choose Theme:
- Select the theme you want to edit and click on "Actions."
- From the dropdown menu, choose "Edit code."
Locate the Appropriate File:
- In the left-hand sidebar, you'll see a list of files related to your theme.
- Choose the file where you want to add your custom HTML code.
Insert HTML Code:
- Once you've opened the file, find the appropriate place to insert your custom HTML code.
- Paste your HTML code into the desired location within the file.
Save Changes:
- After adding your custom HTML code, click on the "Save" button to save your changes.
Preview and Test:
- Before publishing your changes, it's a good idea to preview your store to ensure that the custom HTML code appears as expected.
- You can use the preview option in the theme editor to see how your changes will look on your live site.
Publish Changes:
- If you're satisfied with how the custom HTML code appears in the preview, you can click on the "Publish" button to make your changes live on your Shopify store.
Check Your Store:
- Once you've published your changes, visit your Shopify store to confirm that the custom HTML code is displaying correctly.

Part 2: Manually Blocking 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 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 Shopify

Add your Google Analytics code to the header section of the layer theme.liquid, like done with Part 1 for the Usercentrics-script.

(Navigate to Shopify - Themes - Current Themes - Actions - Code Editor - Layers - theme.liquid)

Step 2: Adjust the Existing Google Analytics Script

Once the Usercentrics 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“.

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

Here is the original script:

Once adjusted, it becomes:

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

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

For questions about third party services using Google Tag Manager, please see our documentation here.

Do you need further help?

https://usercentrics.atlassian.net/wiki/spaces/SKB/pages/234913848

https://usercentrics.atlassian.net/wiki/spaces/SKB/pages/2504687622

https://usercentrics.atlassian.net/wiki/spaces/SKB/pages/3177316522