Using event listeners to load resources

Some services are served from other resources than scripts, for example images or iframes. These resources aren't affected by setting the type attribute to "text/plain" instead of "text/javascript".
In such cases you could simply wait with adding such a resource to the page until you know that the visitor consents to the service associated with the resource. For that you can use an event listener.

To know whether the element should be injected into the DOM, it's necessary to wait for a visitor to submit their consent preferences via the consent banner.
To do this you need to create a "consent event". This will trigger when the visitor submits consent initially, or when the CMP has determined earlier submitted consent.

To create a new consent event follow these steps:

1. Select Implementation from the main menu.
2. Select the Data Layer & Events tab.
3. Click the Add Window Event button.
4. Expand the new Window Event section.
5. Enter a name for the consent event.
   For the purpose of this demo we've chose "ucEvent", but you can use any name you like.

The event listener will check if the visitor consented to the use of a specific service.

Below you can see an example of a resource being added to a placeholder div element.

<div id="servicePlaceholder"></div>
<script type="text/javascript">
  window.addEventListener("{{Your consent event name}}", 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>