Smart Data Protector¶

Introduction¶

The Usercentrics Smart Data Protector is a service that blocks third-party technologies you added to your website and activates them only for customers that gave their consent to do so. This service is not limited to cookies and can prevent multiple types of resources from being loaded, thus preventing data to be sent to the third-party service.

For example, for a visual service like an embedded YouTube Video, the Smart Data Protector will not only prevent any data from being sent to the YouTube server but also provide your users with a preview image of the video, provided by our server. Similarly for a non-visual service like Google Analytics, it will block the scripts and prevent data from being sent to the servers of the service provider.

Browser Support for the Smart Data Protector¶

The number always states the minimum version supported by Usercentrics.

Desktop Browsers¶

Browser	Version
Chrome	80
Edge	79
Firefox	78
Safari	13

Mobile Browsers¶

Operating System	Browser	Version
Android	Google Chrome Firefox	Android 7+ Android 7+
iOS	Safari Chrome Firefox	iOS 13.0 iOS 13.0 iOS 13.0

Installation¶

Important

Add the following elements before all other script in your header. Do not set the asynchronous flag for the Smart Data Protector script, or else other scripts may load in parallel and are activated before the Smart Data Protector can block them.

1: If not done already, add the Usercentrics CMP script tag to the <head> section of your website.

Settings-IDRuleset-ID

Add the Settings-ID Javascript tag

<script
    id="usercentrics-cmp"
    data-settings-id="YOUR_SETTINGS_ID"
    src="https://web.cmp.usercentrics.eu/ui/loader.js"
>
</script>

Add the Ruleset-ID Javascript tag

<script
    id="usercentrics-cmp"
    data-ruleset-id="YOUR_RULESET_ID"
    src="https://web.cmp.usercentrics.eu/ui/loader.js"
>
</script>

2: Add the templates of used Data Processing Services (e.g. YouTube) to your Settings in the Admin Interface. This step is required for the Smart Data Protector to be able to unblock the technologies after the user consented.

3: Add the Smart Data Protector script in the <head> section as well.

Add the latest SDP Javascript tag

<script 
    type="application/javascript"
    src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js"
>
</script>

The script must load synchronously to block technologies before they are executed. Do not add attributes like async, defer or type="module".

4: To improve performance, it is recommended to add the following statements at the top of your <head> section

Preload the latest SDP Javascript code

<link 
    rel="preconnect" 
    href="//privacy-proxy.usercentrics.eu"
>
<link 
    rel="preload"
    href="//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js"
    as="script"
>

Finally, your <head> section should have a structure similar to this

Final head section structure

<head>
    <title>Page title</title>
    <meta name="description" content="Description">
    <!-- [...] other meta tags -->

    <!-- BEGIN Usercentrics related code -->
    <link rel="preconnect" href="//privacy-proxy.usercentrics.eu">
    <link rel="preload" href="//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" as="script">
    <script id="usercentrics-cmp" data-settings-id="XXXXXXX" src="https://web.cmp.usercentrics.eu/ui/loader.js" async></script>
    <script type="application/javascript" src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js"></script>
    <script>
        // (optional) additional configs for the Smart Data Protector 
        uc.reloadOnOptIn('BJz7qNsdj-7'); // reload page on YouTube opt-in
    </script>
    <!-- END Usercentrics related code -->

    <!-- IMPORTANT: all other scripts are added **after** the Smart Data Protector -->
    <script type="application/javascript" src="//..."></script>
</head>

Noscript protection¶

If a user visits your website with JavaScript disabled in the browser, the Usercentrics Smart Data Protector can not prevent the iframe source (e.g. Youtube Video) from loading the data. To be GDPR compliant for this case, replace the src attribute in your iframe with uc-src.

Example: A Youtube Video iframe with adjusted attribute <iframe uc-src="https://www.youtube.com/embed/XXX" /> will not be loaded even when JavaScript is disabled in the browser of the visitor.

Known limitations¶

Due to how modern web browsers work, the Usercentrics Smart Data Protector currently has the following limitations:

The Usercentrics technology is based on JavaScript. If your customers have JavaScript deactivated in their web browser and you have a <noscript> tag added to your website, transferring data to a third party can not be blocked. We suggest not using <noscript> tags at all.
Although the execution of JavaScript code is blocked, the Smart Data Protector cannot prevent the download of the referenced JavaScript files. Because the IP address is sent during such a request, a third party company will still receive the IP address of your visitors.
The previous statement also holds true for CSS code. The Smart Data Protector cannot prevent the download of CSS files. A complete blocking is only possible for iframes.
References to third party servers inside CSS files using the @import statement can not be blocked.
The support for entire JavaScript libraries is not possible, as this would block or unblock all services implemented via the respective library and prevent a granular choice by the users.

Support for TCF 2.2¶

The Smart Data Protector (SDP) is a stand-alone product and works independently of the CMP version. When implemented on your website, the SDP will automatically block all supported technologies and replace them with a placeholder, regardless of whether the technology is part of the TCF 2.2 Global Vendor List or not. In order to respect the TCF 2.2 logic, the scripts of TCF 2.2 vendors should however not be blocked automatically. As a user, you must therefore ensure that the Smart Data Protector only blocks technologies / vendors that you do not wish to manage via TCF 2.2. We therefore do not recommend using the Smart Data Protector in combination with TCF 2.2.

Support for custom service templates¶

The Smart Data Protector only recognizes the predefined service templates by default. Custom service templates can be supported by mapping the template ID of the custom template with the respective predefined template. Please add the following script under your Smart Data Protector script.

Service template mapping

<script>
uc.setServiceAlias({'BJz7qNsdj-7': 'XXXXX'}) 
// XXXXX needs to be the templateId of custom Youtube service template
// ... you can also map more service IDs similarly
</script>

Please note that custom service templates must be mapped to the correct predefined service template in order for this feature to work correctly.

Deactivate Smart Data Protector for specific services¶

The following scripts help to deactivate or activate Smart Data Protector for specific services.

Important

The Smart Data Protector will ignore deactivated Services completely. Whereas, when using blockOnly SDP will only block/unblock the mentioned services and ignore the rest.

The methods deactivateBlocking and blockOnly should not be used together.

Deactivate specific Services:

Deactivating a specific service

<script>
uc.deactivateBlocking([
  'BJz7qNsdj-7', // YouTube is not blocked
  'HkocEodjb7', // Google Analytics is not blocked
  // ... you can also add more service IDs similarly
]);
</script>

Only activate specific Services:

Ignore non-defined services

<script>
uc.blockOnly([
  'BJz7qNsdj-7', // YouTube is blocked
  'HkocEodjb7', // Google Analytics is blocked
  // ... all other technologies will be ignored!
]);
</script>

Please note that this script is only relevant for pre-defined Data Processing Services. If you want to use a custom service, kindly use the service ID for the corresponding pre-defined service

Display overlay for custom elements¶

For visually-supported services, the Smart Data Protector provides overlays with contextual opt-ins for iframe elements by default, in case consent is not given. For non-iframe or custom elements that have a visual component, an overlay can be displayed using the following script:

Custom overlay implementation

<script>
uc.blockElements({
  'BJz7qNsdj-7': '#custom-container', // Show youtube overlay over the element with ID 'custom-container'
  'SJFe9NousWX': '.another-example' // Show Adition overlay over the element with class 'another-example'
});
</script>

Example - if Google Maps is injected under a div tag <div id="12345"></div> then the SDP script would be as follows:

Show Google Maps overlay on specific selector

<script>
uc.blockElements({
  'S1pcEj_jZX': '#12345' // Show google maps overlay over the element with ID '12345'
});
</script>

Please note that this will still be applicable only for the currently supported technologies listed here.

Set custom texts on SDP overlays¶

For the currently supported technologies, you can change the text displayed on the overlay by using the uc.setCustomTranslations() method. There are two ways to use this method, either with JavaScript variables or hosting files remotely.

To enable the method via Javascript variables, add the following code to your html:

Configuring custom translations

<script>
    uc.setCustomTranslations({
      en: {
        ACCEPT: "Custom EN Accept",
        DEFAULT_DESCRIPTION: "Custom EN Description",
        DEFAULT_TITLE: "Custom EN Title"
      },
      de: {
        ACCEPT: "Custom DE Accept",
        DEFAULT_DESCRIPTION: "Custom DE Description",
        DEFAULT_TITLE: "Custom DE Title"
      }
    });
</script>

To enable the method via remote files, you need to host the files with the custom translations on your server and provide the Smart Data Protector with the host. For example, to set custom English texts, follow the steps mentioned below:

1: Create a file with English version and name it en.json

2: Fill it with following content:

en.json

{
 "ACCEPT": "Accept",
 "DEFAULT_DESCRIPTION": "We use %TECHNOLOGY_NAME% to embed content that may collect data about your activity. Please review the details and accept the service to see this content.",
 "DEFAULT_TITLE": "We need your consent to load the %TECHNOLOGY_NAME% service!"
}

3: Host this file on your server (e.g. https://website.com/translations/en.json)

4: Repeat these steps for each language you want to change. Use the supported language ISO codes mentioned here.

5: Add this script to your website:

Linking remote custom translations

<script>
uc.setCustomTranslations('https://website.com/translations');
</script>

Note

The value in function should point to the directory where the language json file is stored.

The Smart Data Protector will then try to fetch the custom translations for the selected language. In case some texts are missing for some languages, the default text provided by us will be displayed.

List of all available text options: ACCEPT, DEFAULT_DESCRIPTION, DEFAULT_TITLE, FACEBOOK_DESCRIPTION, MAP_DESCRIPTION, MIXCLOUD_DESCRIPTION, MORE_INFO, NOT_PERMITTED_TEXT, PAYPAL_DESCRIPTION, POWERED_BY, RECAPTCHA_ALERT, RECAPTCHA_DESCRIPTION, VIDEO_DESCRIPTION, XING_DESCRIPTION

The following diagram shows some of above options:

Illustration - Overlay labels

In case something is wrong with CMP, NOT_PERMITTED_TEXT is shown instead of DEFAULT_DESCRIPTION.

In order to provide more context, some technologies use different texts instead of the default ones. Find the list of these technologies below

Option	Template Id	Description
`FACEBOOK_DESCRIPTION`	XYQZBUojc	Facebook
`MAP_DESCRIPTION`	S1pcEj_jZX	Google Maps
`MIXCLOUD_DESCRIPTION`	4UGBLUJUN	Mixcloud
`PAYPAL_DESCRIPTION`	JiFH1ubU	PayPal
`RECAPTCHA_DESCRIPTION`	Hko_qNsui-Q	Recaptcha overlay description
`RECAPTCHA_ALERT`	Hko_qNsui-Q	For recaptcha 3 we have to use some specific functionality (alert is shown instead of overlay). So above text option is used for this alert description
`VIDEO_DESCRIPTION`	BJz7qNsdj-7, HyEX5Nidi-m, SJ1aqNjOs-m	For some services (YouTube, Vimeo, Wistia) we use another type of embedding - video embedding. This option is used for the overlay description of above technologies
`XING_DESCRIPTION`	BJREqEiOiZQ	Xing

Examples of custom translations:

en.json

de.json

After implementing all the necessary installation steps, certain technologies (especially implemented via Javascript libraries, like Lightbox) might still not be enabled correctly after the consent is given. In such cases, we provide the fallback option to trigger a page reload in order to restore the technologies correctly.

Please add the following script to your website to trigger a page reload, after the consent is given.

Reloading when opting in to specific service

<script type="application/javascript" src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js">
</script>
<script>
 uc.reloadOnOptIn('BJz7qNsdj-7'); // reload page on YouTube opt-in
 // ... you can also add more service IDs similarly
</script>

Similarly, in case the consent is revoked, we also provide the fallback option to trigger a page reload in order to block the technologies correctly.

Please add the following script to your website to trigger a page reload, after the consent is revoked.

Reloading when opting out of specific service

<script type="application/javascript" src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js">
</script>
<script>
 uc.reloadOnOptOut('BJz7qNsdj-7'); // reload page on YouTube opt-out
 // ... you can also add more service IDs similarly
</script>

Styling Customization (CSS)¶

In case the overlay is not displayed correctly on your website or the design does not fit, the layout of the overlays can be customized with your individual CSS code. We recommend to use the descendant combinator to make your rules more specific, for example to change the 'Accept' button color use the parent container as a reference:

Targeting the accept button

.uc-embedding-container .uc-embedding-buttons .uc-embedding-accept {
  background-color: green;
}

The following diagram shows all available CSS classes:

Illustration - Overlay CSS classes

Currently supported technologies¶

We support as many implementations as possible of the technologies listed below. Technologies are sorted alphabetically.

Add This (ByOJZ54odjW7)
Adition (SJFe9NousWX)
Adobe Experience Cloud (f6nkjdUL)
Adobe Typekit (HJy4c4s_jbX)
Airtable (IdaQw5cVN)
Amazon advertising (N2spyFPL)
anchor.fm (6znewg1hW)
ArcGIS Map (aXnTc_Y3n)
AT Internet (fiQX6mqi)
Audioboom (c6lt-aZ0)
Audiocon (mdM6tHJ4s)
Bing Maps (abGHajF1)
Bitmovin (SkdccNsdj-X)
Bookingkit (Ewb9uz1Rp)
Bryter (A91MHlBY6)
Calendly (vdUe2GDtm)
Civey (xI9qM4Yhk)
Criteo (HyeqVsdjWX)
Dailymotion (VJNO26pZe)
DataWrapper (8Nxb4ZtSa)
Discord (hvWNhpF0T)
Disqus (r1rX94i_iZX)
eKomi (MEXztGXoM)
Facebook Audience (rkUcEjuoWm)
Facebook Pixel (ko1w5PpFl)
Facebook Social Plugin (XYQZBUojc)
Facebook Videos (r5-Z_erQ0)
Flickr (X0wJtpzqX)
Flockler (uJyv6-Nm)
Flourish (kbmJpLAUf)
Giphy (RuWQqICz)
Glomex (BySu54sOjZQ)
Google Ads (S1_9Vsuj-Q)
Google AdWords Remarketing (S1_9Vsuj-Q)
Google Analytics (HkocEodjb7)
Google Analytics 4 (87JYasXPF)
Google Calendar (n1jiXg1v)
Google Forms (wgTnPe7i1)
Google Maps (S1pcEj_jZX)
Google Syndication (SkPc5EjOsWm)
Google Tag Manager (BJ59EidsWQ)
Google Fonts (HkPBYFofN)
Here (0V-E5N_GQ)
HubSpot (ry0QcNodoWQ)
HubSpot forms (r1Fhc4iOoWX)
Instagram (SyUQ54odobQ)
Intercom (ryDQcVoOoZQ)
Issuu (dwkRM0PG)
JotForm (J9V5VBp3y)
Juicer (-ONUgPRHp)
Juris (YiVeMG4Ma)
JW Player (ppPIzs4e)
Klaviyo (m5uB6gnoW)
Leadinfo (eSE_HHXnI)
LinkedIn Plugin (Hkx754i_iWm)
Livestorm.io (KpU9UXKjc)
Machineseeker (ukU5jpn0K)
Mapbox (U8QkTd2W)
Matomo (zqWojrT0P)
Matomo (self hosted) (u6fxocwTs)
Matterport (7bFNv7DLf)
Media Math (SJ6xqVidi-X)
Mixcloud (4UGBLUJUN)
News Anwaltblatt (SJ_6Qo9DJ)
Outdooractive (15h3IBCa8)
Open as App (nTiHcYnDd)
Open Street Map (j7Igy6o8D)
Opinion Stage (pNOkVRbV6)
Paypal (JiFH1ubU)
Pinterest (9Q2qrmB3)
Piwik Pro - Duda (ze3Iyetr)
Playbuzz (cv9bw3QAq)
Podigee (nhLMP6qX)
Prescreen (Sy1naC5nN)
PriceHubble (FB_cLNwjQ)
reCAPTCHA v1/v2 (Hko_qNsui-Q)
reCAPTCHA v3 automatically bind variant (Hko_qNsui-Q)
ShareThis (B1639EiOs-7)
Shore (W0apH00t)
Site Analytics - Duda (wkt-Vgmf7)
Site Personalization - Duda (8u-otMeLg)
Slideshare (jhJqRRPUe)
Smart-rechner (lr0gmwVMY)
Snatchbot (t-J9SUrOD)
SoundCloud (HyP_q4sdobm)
Sovendus (Di_NMaFOX)
Splicky (1dU2WuKlq)
Spotify (CguMb4Rq)
Taboola (HkMucNoOjWX)
Taggbox (RyDAUe7cq)
Thinglink (T7-yEXGyq)
TikTok (Z0TcXjY0P)
TwentyThree (1rXAPWvo)
Twitch (FPZz1xJI)
Twitter Plugin (BJTzqNi_i-m)
Typeform (r1PkZcEs_iWQ)
Videoask (VtnVCeUzx)
Videolyser (SDFUIfvK_)
Vidyard (KRDJ6FLgY)
Vimeo (HyEX5Nidi-m)
Walls.io (FtE1AC6zU)
Mapp Intelligence Full Feature Tracking (Ouzxu26Rv)
Wetter (rerXlW9h2)
Wigeogis (uJRRy9uiQ)
Wistia (SJ1aqNjOs-m)
Xing Plugin (BJREqEiOiZQ)
Yelp (5qKtc_BS)
YouTube Video (BJz7qNsdj-7)
Yumpu (6LdBYXdAl)
Zoho SalesIQ (sKBym34ck)
3Q Video (qxiCD5aN_)

In addition to the above, we support Fancybox 3 implementation of Lightbox JavaScript library.

Disclaimers

Service providers might update implementations of services that we already support. Please contact us if a specific implementation needs to be supported, we will evaluate and get back to you as soon as possible.
Except the above mentioned services, technologies implemented via JavaScript libraries are not supported out of the box. When using a JavaScript library, it might be required to reload the page after consent changes or build your own solution with our API (see known limitations).