Filipe Lourenco : How to set up a manual markup on cookies - Setting attributes for the cookie control

When a website is scanned, there will be a list of cookies available on the Monsidos platform, those cookies will be displayed under the Data privacy module. For more information regarding the cookies on Monsidos platform, please click hereEach cookie should have a category that is defined by the user and also by the type of cookie that is being set. For example for Google Analytics, the selection should be Statistics because normally the cookies set for Analytics contain tracking information.

(Take note that our product does not provide the information from which source the cookie is set (script, Iframe, link or image), should be from the users responsibility to find it)

To have those cookies prevented from loading before the consent, 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. This is to ensure that the website user is not tracked without its consent.Only if the cookie is strictly necessary for the website, the user should be able to let the cookie load before the consent.Please avoid using the attribute data-mon-consent-required="other" as Monsido is using that attribute as a test attribute. If it is added to an element, it won't load regardless of consent choice.

Here are the available categories/ 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.

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><script> - Scripts tag<iframe> - Iframe tag<img> - image tag<a> - link tag

Set up of the attributes for the cookie consent

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.Attributes used by Monsido for the markup of the elements:

type="text/plain"

data-src

data-mon-consent-required="Replace with the category"

data-type="text/javascript"

data-href

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.type="text/plain" it will prevent the execution on the script while keeping it in the source

  • 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.

  • Category/ attribute - data-mon-consent-required="Replace with the category" - will prevent the cookie to be set until the category of the cookie is consented

  • 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 the 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>

For Scripts of type text/javascript

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

  • The script must have type="text/plain" set.

  • The source attribute src should be replaced by data-src 

  • The presence of the category - data-mon-consent-required="Replace with the category

  • data-type: You'll need to prefix type="text/javascript" with data- in order to prevent it from loading prior to visitor consent. - data-type="text/javascript"

  • Example

In this example, we have the following script that we want to load on our website if Statistics cookies have been consented 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:

  • The source attribute src should be replaced by data-src  

  • The presence of the category - data-mon-consent-required="Replace with the category

  • 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>

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

  • The source attribute src should be replaced by data-src  

  • data-href: The href attribute needs to be prefixed with data- in order to prevent it from loading prior to visitor consent - Replace href for data-href

  • 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>

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. In order to do that the user will need to have a space between the categories chosen)

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" data-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>