Using event listeners to load resources

Some services use resources other than scripts, for example images or iframes. These resources cannot be blocked the same way scripts can (by setting the type attribute to text/plain). Instead, you can use a window event listener to wait for the visitor's consent before loading the resource at all.

This approach works for any service whose content is delivered as an image, iframe, or other non-script resource.

Before you start

You will need:

• Access to the Usercentrics Admin Interface
• The exact service name as it appears in your Usercentrics Admin Interface under Service Settings > Data Processing Services, including spelling, capitalization, and hyphenation
• A developer (or developer access) to add the event listener code to your website

How it works

When a visitor submits their consent choices or when the Usercentrics CMP detects their previously stored preferences, it fires a consent event on the browser window. Your page listens for this event and only injects the resource (image, iframe, etc.) if the visitor has consented to that specific service.

This means:

• On a first visit: the resource loads only after the visitor submits the consent banner
• On a returning visit: the resource loads immediately on page load, because the visitor's stored preferences are already known, no banner interaction is needed

Step 1: Create a Window Event in Usercentrics

First, set up the consent event in your Usercentrics Admin Interface. This creates the event your page will listen for.

1. Log into the Usercentrics Admin Interface.
2. Select Implementation from the main menu.
3. Select the Data Layer & Events tab.
4. Click the Add Window Event button.
5. Expand the new Window Event section.
6. Enter a name for the event. We recommend using ucConsent, this is the name you will reference in your code.

Step 2: Add the Event Listener to Your Page

Ask your developer to add the following code to your page. It listens for the consent event and injects the resource only if the visitor has consented to the specific service.

Replace the three placeholder values before using this code:

• Name of the service: the exact service name from your Usercentrics Admin Interface (e.g. Google Maps)
• Link to resource: the URL of the image, iframe, or other resource you want to load
• servicePlaceholder: the id of the HTML element on your page where the resource should be injected

<div id="servicePlaceholder"></div>
<script type="text/javascript">
  window.addEventListener("ucConsent", function (e) {
    if (!e.detail || e.detail.event !== "consent_status") return;
    if (e.detail["Name of the service"] === true) {
      const serviceIframe = document.createElement("iframe");
      serviceIframe.src = "Link to resource";
      document.getElementById("servicePlaceholder").appendChild(serviceIframe);
    }
  });
</script>