Smart Data Protector: Intro and FAQ

Google Maps can only be unblocked by the CMP if the "Google Maps" data processing service has been added in your Usercentrics Admin Interface. Please make sure in your settings that "Google Maps" is listed as a data processing service.

The issue is caused by network requests that the Builder sends, but which block our SDP. We recommend using the plugin: Termageddon + Usercentrics in order to ensure that the page is processed correctly.

Configure the plugin as follows:

1. Remove our UC script tag from Divi (Divi > Theme Options > Integration)
2. Add the script tag on the Embed Code section within the plugin instead
3. Save and then choose to hide Usercentrics at least on “Editors” (Choose the toggle that will fulfill your position. If needed toggle the option “Logged-In Users”)

As a rule, directly embedding Google Maps in an iframe will allow Usercentrics' Privacy Shield to work without further adjustments.

If Google Maps is to be rendered via the API, there are two scenarios:

1. User visits the website with consent given to Google Maps
2. User visits the website without consent given to Google Maps

In case 1, add the two scripts for Google Maps as follows:

<script type="text/javascript" src="js/googlemaps.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&callback=init_map"></script>

Replace XXXXXXXXXX with your API key. In the example above, the script googlemaps.js controls the functionality of Google Maps. If the name of the script differs from yours, change it accordingly.

One problem caused by this implementation is that you don't know where to display the content. We therefore recommend this form of integration only for experienced users.

To establish the functionality for the second case, edit the script googlemaps.js as follows and replace the values for zoom, lat and lng with those of your own implementation:

function init_map() {
  if(!consentIsGiven()) {
    // MOCK IMPLEMENTATION
    var zoom = 12,
        lat = 50.9271,
        lng = 11.5892,
        map = new google.maps.Map(document.getElementById("map-container"), {
          zoom: zoom,
          center: {
            lat: lat,
            lng: lng
          }
        });
  } else {
    // REAL IMPLEMENTATION
  }
}

You will also need to manually check for Google Maps approval in this script. For this purpose we offer window events and the corresponding documentation can be found here.

The previously mentioned example works because we have imitated the google.maps.Map functionality (code section "Mock Implementation"). This way we can find out where the SDP has to be integrated. If consent was given, init_map is called again by the actual Google Maps API script, which is set in the callback parameter of the URL. In this case the API is ready and the actual implementation (code section "Real Implementation") is integrated.

Please see our technical documentation: SDP

For blocking iframes of many technologies (e.g. Youtube Video, Google Maps etc.) we provide an out of the box solution - the so-called Smart Data Protector. All information regarding the implementation and the supported technologies of the SDP can be found in our technical documentation.

Result:

The Steps

1. Use an event listener to build a wrapper, allowing you to also react to consent changes done by the user after the initialisation of the CMP. In the event listener, check for the consent of the service that the iframe belongs to. Information on event listeners in the Usercentrics CMP can be found in our technical documentation (CMP v2 | CMP v1). For checking the consent of a specific service we recommend using our API (see CMP v2 | CMP v1).

2. If desired create a visual overlay on your website for a specific DPS (e.g. Google Maps). This overlay should hold the information that will be shown to visitors who have not yet given their consent for this DPS. Buttons on this overlay can give the users the possibility to open the privacy settings for reviewing / changing his consent or to agree directly to the service (see API for CMP v2 | CMP v1).
   In CMP v2 you can directly open the privacy settings of a specific service by adding its template-ID to the global method: UC_UI.showSecondLayer("Template-ID")
3. If consent was given, replace the overlay with the actual iframe you want to show on your website. For example, this can be done by programmatically creating the iframe and appending it to the overlay you created (e.g. using appendChild()).
4. If the user changes their consent you can use the event listener to remove the iframe again (e.g. using removeChild()) and reshow the overlay.

With our SDP, you can easily block a list of data processing services. The full list of supported technologies can be found here.

Nevertheless, we do not block ALL scripts on a website automatically with it. Here are the reasons for that:

• Usercentrics works directly on a data processing service level. We do not block cookies but the service that may then set them. If we simply block all scripts by default, we will not be able to tell which script belongs to which data processing service.
• If we blocked all scripts, this would most likely break your website. To prevent that, we block each data processing service individually and also give you the option to decide for each single service whether or not it should be accepted by default.
• For visual services like YouTube, Google Maps, and others, we show an overlay with legal content that’s relevant for this specific service. This would not be possible when blocking everything that we find on your website.
• Further, you can decide for each supported service whether or not it should be blocked by the SDP.

Because the SDP is missing.

To fix this, see: Usercentrics Documentation

If you would like to use our SDP to block the Google Tag Manager, please use their Tag Manager script with the URL www.googletagmanager.com/gtm.js. This URL will be blocked when the SDP is used and no consent is given for the Google Tag Manager service. The update will enable precise detection of the service and avoid conflicts with services using similar domains (such as gtag.js).

Note that the services listed in our public documentation as supported by the SDP will remain being identified and blocked individually.

With the code below it is possible to replicate the SDP banner to technologies that are implemented via an event listener.

For iFrames:

To implement this code it is only necessary to replace the Google Maps template ID with the template ID of the Data Processing Service that is to block and replace the Google Maps iFrame with the Data Processing Service iFrame:

<script>
  //replace the S1pcEj_jZX to the technology template id that you want!
  var templateID = "S1pcEj_jZX";
  uc.blockElements({
    [templateID] : '#log' // Show google maps overlay over the element with ID '12345'
  });
  window.addEventListener('UC_UI_INITIALIZED', function(event) {
    var technologyName = UC_UI.getServicesBaseInfo().find(data => (data.id === templateID)).name;
    window.addEventListener("ucEvent", function (e) {
      if(e.detail.type == "explicit" && e.detail[technologyName.toString()]){
        //replace the iframe to the code that you want show
        document.getElementById('log').innerHTML = '<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d2965.0824050173574!2d-93.63905729999999!3d41.998507000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sWebFilings%2C+University+Boulevard%2C+Ames%2C+IA!5e0!3m2!1sen!2sus!4v1390839289319" width="100%" height="200" frameborder="0" style="border:0"></iframe>';
      }
    });
  });
</script>
<div id="log"></div>

 

HubSpot Forms error when SDP is enabled.

“Uncaught (in promise) DOMException: Document.querySelector: '' is not a valid selector”

HubSpot Forms overrides the DOM, making the Document.querySelector() not available.

 

Solution

We recommend using our functionality deactivateBlocking for the technology HubSpot Forms, more information can be found here: Deactivate SDP for specific services.

<script>
  uc.deactivateBlocking([
    'r1Fhc4iOoWX', // HubSpot form is not blocked
    // ... you can also add more service IDs similarly
  ]);
</script>

After this step the error will stop happening, however, if you need to adjust the technology and prevent it from being executed if there isn’t any consent from the user, please follow this: Adjust existing scripts.