How does Usercentrics block services whose tracking works via an Image Tag?

Services that load through an image (<img>) tag are commonly know as "Pixel Trackers".
To ensure that these services only load with your visitors' consent you can take the steps detailed in this guide. 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.

Adding the service

Setup the Data Processing Service that provides the tracking pixel in the Service Settings section of the Usercentrics Admin Interface.

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.

Loading the service

In order to ensure that the pixel tracker only gets added to the page when consent has been given you'll need to use a script with an event listener. This essentially waits for the signal the CMP sends when it has established the user's consent preferences, and decides whether to add the pixel to the page based on the consent data that is transmitted within the event you've created in the previous step.

Implement the following script to load a service that loads through an image if consent has been given:

<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 serviceImg = document.createElement("img");
      serviceImg.src = "{{Link to resource}}";
      serviceImg.height = 1;
      serviceImg.width = 1;
     document.body.appendChild(serviceImg);
    }
  });
</script>