Content Blocking

How to implement CMP content blocking.

Updated over a week ago

Enzuzo has content-blocking mechanisms to enforce user consent preferences. If a user opts out of certain data processing activities, content blocking can prevent the loading of scripts or content related to those activities. For example, if a user has not consented to marketing, video ad placements will not run/be visible until the user has given explicit consent to the use of marketing cookies/services. To enable content blocking, you will need to have access to edit the HTML code of the elements you wish to block.

Content blocking will work for any type of DOM element (iframe, video, audio, etc). To enable content blocking you must set ez-cb-cat="category" on any DOM element to trigger the content to be blocked until consent is given in the specified category (marketing, analytics, or preferences).

Some things to keep in mind when using content blocking:

  • On reload, if consent was given in the category, the content will not be blocked.

  • On changing consent without reload, the content should block/unblock based on consent choice

  • Clicking update inside the blocked element should open the Cookie Manager and pre-toggle the category specific to that blocked elements ez-cb-cat.

Here are a couple of examples of content-blocking implementation.

iFrame:

<iframe
ez-cb-cat="marketing"
width="560"
height="315"
src="https://www.youtube.com/embed/u42CyCGGa_4?si=J1J8xsRZXyPEL9iU"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>

Video:

<video
ez-cb-cat="preferences"
controls
width="250"
height="250"
ez-purpose="preferences"
src="https://www.video.com/exampleVideo.webm"
></video>

Audio:

<audio ez-cb-cat="marketing" controls src="/"></audio>

Image:

<img
ez-cb-cat="marketing"
src="https://upload.wikimedia.org/dummyImg.png"
/>

Embed:

<embed
ez-cb-cat="analytics"
type="video/webm"
src="https://www.video.com/exampleVideo.webm"
width="250"
height="200"
/>

Object:

<object
ez-cb-cat="marketing"
type="application/pdf"
data="https://www.africau.edu/images/default/sample.pdf"
width="250"
height="200"
></object>


Picture:

<picture ez-cb-cat="preferences"> 
<source srcset=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/400px-SMPTE_Color_Bars.svg.png " media="(orientation: portrait)" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/400px-SMPTE_Color_Bars.svg.png" alt="" />
</picture>


SVG:

<svg ez-cb-cat="marketing" height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> Sorry, your browser does not support inline SVG. </svg>

Did this answer your question?