Attributes

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:

Name	Description
data-mon-consent-required="essential"	An element with this attribute only loads once the visitor has accepted cookies of the type Essential.
data-mon-consent-required="basic"	An element with this attribute only loads once the visitor has accepted cookies of the type Basic.
data-mon-consent-required="marketing"	An element with this attribute only loads once the visitor has accepted cookies of the type Marketing.
data-mon-consent-required="statistics"	An element with this attribute only loads once the visitor has accepted cookies of the type Statistics.
data-mon-consent-required="preferences"	An element with this attribute only loads once the visitor has accepted cookies of the type Preferences.
data-mon-consent-required="none"	An element with this attribute loads before any consent choice is made by the visitor.

Please avoid using the attribute data-mon-consent-required="other" as Monsido is using that as a test attribute. If it is added to an element, it won't 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>