How to enable or disabled elements based on a visitor's consent with Consent Studio
When you embed a piece of an external website (like an X post or a YouTube video), you will most likely want the content to be hidden based on the consent of your website's visitor. In this guide, we will explain how this can be achieved.
Disable elements with an src attribute (like iframe, script and img)
Short explanation
Make sure that the
srcattribute is renamed todata-src, rendering thesrcattribute empty.Add a
data-consent-categoryattribute, filled with eitherfunctional,analyticsormarketing.
Example:
<script
src=""
data-src="https://consent.studio/my-marketing-script.js"
data-consent-category="marketing"
></script>
Click to expand the list of the exact elements that we expect to have an src attribute
Click to expand the list of the exact elements that we expect to have an src attribute
iframe
script
img
source
audio
video
embed
track
Step by step explanation
When an element has a src attribute, like...
<iframe src="https://consent.studio/my-awesome-iframe-with-marketing-cookies"></iframe>
...or like...
<script src="https://consent.studio/my-awesome-script-with-analytics-cookies.js"></script>
...you can disable the src attribute by default and only enable it when the user consents to the relate purpose (such as functional, analytics or marketing).
This can be easily done by making sure that on page load, the contents of the src attribute is empty and set instead within the data-src attribute.
Let's take the examples from earlier:
<!-- Iframe example (not finished yet) -->
<iframe data-src="https://consent.studio/my-awesome-iframe-with-marketing-cookies"></iframe>
<!-- Script example (not finished yet) -->
<script data-src="https://consent.studio/my-awesome-script-with-analytics-cookies.js"></script>
We now need to instruct the Consent Studio CMP script to only load the contents of data-src depending on the consent category that we want it to.
This is done by adding the data-consent-category attribute. You can fill it with either functional, analytics or marketing.
This is the final product:
<!-- Iframe example (complete) -->
<iframe data-src="https://consent.studio/my-awesome-iframe-with-marketing-cookies" data-consent-category="marketing"></iframe>
<!-- Script example (complete) -->
<script data-src="https://consent.studio/my-awesome-script-with-analytics-cookies.js" data-consent-category="analytics"></script>
How to identify disabled elements using CSS
Elements that are disabled will have the insufficient-consent CSS class. You can use this to style elements that are disabled and therefore might not have the desired width or height that they would otherwise have in a state where they could have loaded the contents of the src attribute.
Good to know: with the :contains pseudo class, you can target any parent element that contains an element that has the insufficient-consent class. For example: body:contains(.insufficient-consent) .extra-consent-required-notice { display: block; }