Conditionally loading an iframe using an event listener

Some Data Processing Services load via iframes, instead of a script. To ensure that no data processing can occur prior consent you must ensure that this iframe only is added to the DOM if consent has been given. Conversely, when consent is withdrawn, the iframe must be removed to prevent further data processing without consent.
To achieve this, you can create a custom event, which allows you to execute a script at the exact moment the user's consent preferences are known.

Creating a custom event

To define a custom consent event, you need to log into the Admin interface and access the configuration with the settings ID used on your website.

Select Implementation from the main menu, select the Data Layer & Events tab, and press the Add Window Event button.

Expand the Window Event section, enter a custom event name, and hit the Enter key on your keyboard to add the event.

This event passes consent data along with the event itself. This means that the consent choices are available immediately when consent is submitted, and on subsequent page loads when prior consent is established.

Requirements

In order to be able to inject an iframe into the DOM in a particular position, you will need to have an element you can reference to, and append the iframe to.
You will need to ensure the element can be referenced to, so it should be assigned a unique id.

For example a div:

<div id="dpsPlaceholder"></div>

Script example

In this example, the iframe is injected when the user gives consent.
If the user gave consent in the past, the iframe will be injected during page load at the moment when the CMP establishes previously given consent preferences.

If a user does not consent, the iframe will also be removed immediately without needing a page reload.

Replace the placeholder values, which are identifiable by the double handlebars: {{value}}

<script type="text/javascript">
  window.addEventListener('ucEvent', function (e) {
    const ref = dpsIframe = document.createElement('iframe'),
        document.getElementById('{{placeholder id}}'),
        dpsName = '{{The EXACT name of the Data Processing Service}}';
    dpsIframe.src = '{{URL to the Data Processing Service}}';
    dpsIframe.height = '{{iframe height}}'; // optional
    dpsIframe.width = '{{iframe width}}'; // optional

    // Add the iframe and exit function
    if (e.detail.type == 'EXPLICIT' && e.detail[dpsName]) {
      ref.appendChild(dpsIframe);
      return;
    }

    // Remove all the elements added to the placeholder
    while (ref.firstChild) ref.removeChild(ref.lastChild);
  });
</script>

Best practice tip

While it's out of scope for this guide, you should consider using a placeholder that is visible when consent hasn't been given (yet), and is hidden when consent has been given.
This informs the user that certain content isn't currently displayed, and may convince them to update their consent preferences in order to access the blocked content. Furthermore, it avoids layout shift, which may hurt your SEO score.