HTML attributes must be added to content elements on your website if you only want them to load once a consent choice has been provided by the visitor. For example, if you are using Google Analytics on your website and only want the script to load once a visitor has accepted Statistics cookies, you will need to mark up the Google Analytics script with an HTML attribute.

Here are the available attributes:

Please avoid using the attribute data-mon-consent-required="other" as Web Governance is using that as a test attribute. If it is added to an element, it will not load regardless of consent choice.

Example

In this example, we are embedding a Youtube video and set it to load only if Marketing cookies have been accepted by the visitor. We do this by adding the data-mon-consent-required="marketing" attribute inside the <iframe> tag.

<iframe data-mon-consent-required="marketing" width="560" height="315" src="https://www.youtube.com/embed/A2JmGBbRrQQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Setting multiple cookie categories within the same attribute​

Some content may require consent to multiple categories before it can be loaded. To do this, you can add multiple category values within the same attribute.

Example

In this example, we are embedding a Youtube video and set it to load if Marketing and Statistics cookies have been accepted by the visitor. We do this by adding the data-mon-consent-required="marketing statistics" attribute inside the <iframe> tag.

<iframe data-mon-consent-required="marketing statistics" width="560" height="315" src="https://www.youtube.com/embed/A2JmGBbRrQQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Which elements can attributes be added to?​

The attributes in the table above can be added to the following HTML elements: <script> <iframe> <img> <a>

Specific requirements for the various HTML elements​

Apart from adding an HTML attribute to an element to prevent it from loading prior to consent, you may need to make additional modifications to the element. Read more about this below.

For scripts​

In order to prevent a <script> from loading prior to consent, it must have the following attributes:

• type="text/plain": If your script doesn't have a type set, then make sure to add type="text/plain". If it already has a type, then replace it with type="text/plain". If the script has a different type set, then it will load immediately on the page before consent has been given.
• data-src: If your script references an external source, you'll need to prefix it with data- in order to prevent it from loading prior to visitor consent. See example below.

Example

In this example, we have the following script from Google Analytics that we want to load on our website:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>

In order for it to work with Consent Manager and only load if the visitor accepts Statistics cookies, we'll need to add type="text/plain", change src to data-src, and add data-mon-consent-required="statistics". It should look like this:

<script data-mon-consent-required="statistics" type="text/plain" async data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>

Scripts of type text/javascript

For scripts with type="text/javascript", the above attributes must be added as well as the following:

• data-type: You'll need to prefix type="text/javascript" with data- in order to prevent it from loading prior to visitor consent. See example below.
• The script must have type="text/plain" set.

Example

In this example, we have the following script that we want to load on our website if Statistics cookies have been accepted by the visitor:

<script type="text/javascript" src="testScript.js"></script>  

In order for it to work with Consent Manager and only load if the visitor accepts Statistics cookies, we'll need to add type="text/plain", change src to data-src, change type to data-type and add data-mon-consent-required="statistics". It should look like this:

<script data-mon-consent-required="statistics" type="text/plain" data-type="text/javascript" data-src="testScript.js"></script>  

For iframes and images​

In order to prevent an <img> or <iframe> element from loading prior to consent, it must have the following attribute:

• data-src: If your image or iframe references an external source, you'll need to prefix it with data- in order to prevent it from loading prior to visitor consent. See example below.

Example

In this example, we have the following iframe that we want to load on our website:

<iframe src="http://www.example.com/demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

In order for it to work with Consent Manager and only load if the visitor accepts Marketing cookies, we'll need to change src to data-src, and add data-mon-consent-required="marketing". It should look like this:

<iframe data-mon-consent-required="marketing" data-src="http://www.example.com/demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

For links​

In order to prevent an <a> element from loading prior to consent, it must have the following attributes:

• data-href: The href attribute needs to be prefixed with data- in order to prevent it from loading prior to visitor consent. See example below.

Example

In this example, we have the following link element that we want to load on our website:

<a href="https://www.google.com" title="Go to Google">Find it on Google</a>

In order for it to work with Consent Manager and only load if the visitor accepts Preferences cookies, we'll need to change href to data-href, and add data-mon-consent-required="preferences". It should look like this:

<a data-mon-consent-required="preferences" data-href="https://www.google.com" title="Go to Google">Find it on Google</a>