Skip to main content
 

Manual cookie blocking

  • Updated

Manual cookie blocking

Manual cookie blocking

 

Intro

While auto-blocking is a quick and easy way to prevent cookies from being set, there are several reasons to consider manual blocking. This means manually marking up elements to prevent them from setting cookies prior consent.

Manually blocking cookies has much less impact on website performance and will prevent cookies from being set even if the Cookiebot script fails to load. 

There are also situations where auto-blocking is not a viable solution. If it impacts the website to an extent that requires several adjustments, then manually marking up becomes a more efficient way of handling consent.

For example, if you need to assign the data-cookieconsent="ignore" attribute to several elements, possibly more than scripts that actually need to be blocked, manually marking up elements becomes the logical choice.

Lastly, you have full control over what elements are blocked and under which circumstances they should be loaded.

 

Using the data-cookieconsent attribute

Inline scripts

Markup consists of two parts: one that disables and one that enables the script. The first is what prevents the element from loading (and setting cookies) and the latter is what allows the Cookiebot CMP script to enable it if the appropriate consent is given.

To mark up an inline script:

  1. Set the type attribute to "text/plain".
    This tells the browser to read the script as plain text, it essentially disables the script. 
  2. Add the data-cookieconsent attribute and assign it one of these values: "preferences", "statistics" or "marketing".
    This attribute defines the condition under which the Cookiebot script needs to enable and load the script.

An example of marking up a script:

This basic inline script sets a cookie named username:

<script type="text/javascript">
  document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
</script>

This is the markup applied to the script to require consent in the "preferences" category:

<script type="text/plain" data-cookieconsent="preferences">
  document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
</script>

Valid values for data-cookieconsent are: "preferences", "statistics", "marketing" or "ignore". You can also use a combination of these categories (with the exception of "ignore"), for example data-cookieconsent="statistics, marketing". 
"Ignore" only affects automatic blocking and is not relevant in this context. For more details, see this article. 
"necessary" or "unclassified" are not valid values and should  never be used. Instead necessary scripts should simply not be marked up.

 

External elements

External elements are usually scripts, iframes, or images that reference an external resource with the src attribute. Scripts are prevented from setting cookies by setting the type to "text/plain".
However, iframes and images do not have a type attribute, which is why another approach is used for these elements:

  1. Change the src attribute to data-cookieblock-src. This disables the image/iframe since the src attribute, which defines what content to display, is now technically missing.
  2. Add the data-cookieconsent attribute and assign it one of these values: "preferences", "statistics" or "marketing".
    This attribute defines the condition under which the Cookiebot script needs to enable and load the script.

An example of marking up an iframe:

This iframe loads a video from YouTube:

<iframe src="https://www.youtube.com/embed/fyvwLAPNfXY"></iframe>

This is the markup applied to the iframe to require consent in the "marketing" category:

<iframe
  data-cookieconsent="marketing"
  data-cookieblock-src="https://www.youtube.com/embed/fyvwLAPNfXY"
> </ iframe >

 

Consent-dependent content using CSS

The Cookiebot script also defines classes, that can be used to hide (or display) content, based on the user's consent choices.

To hide elements of a category that the user has not given consent to, add one of the following CSS classes to the class attribute of the element:

  • .cookieconsent-optin-preferences
  • .cookieconsent-optin-statistics
  • .cookieconsent-optin-marketing

Conversely, you can also display content if consent has not been given to a specific category:

  • .cookieconsent-optout-preferences
  • .cookieconsent-optout-statistics
  • .cookieconsent-optout-marketing

An example of content that only is displayed when the visitor accepts cookies in the "marketing" category:

This iframe loads a video from YouTube:

<iframe src="https://www.youtube.com/embed/fyvwLAPNfXY"></iframe>

Marked up with the CSS class .cookieconsent-optin-marketing, the element is not visible until the website visitor has given consent to Marketing cookies:

<iframe
  class="cookieconsent-optin-marketing"
  src="https://www.youtube.com/embed/fyvwLAPNfXY"
></iframe>

Alternatively, you can add a <div> around the content:

<div class="cookieconsent-optin-marketing">
  <iframe src="https://www.youtube.com/embed/fyvwLAPNfXY"></iframe>
</div>

 

Displaying alternative content

Similar to hiding content based on the website visitor's consent, you can also show content in the absence of consent - E.g. "To display this content, please give consent to Preference cookies" or similar. For more information and examples, see these two articles:

 

Using JavaScript

The preferred way of executing code while respecting the visitors' consent is to use either code attached to one of our custom event listeners or callbacks. This ensures that the code will be executed if the consent changes while browsing the page, as the events and callbacks fire on both consent change and page (re)load.

Both examples below contain code that sets cookies, but will only run when consent to statistics is given.

Using the CookiebotOnAccept event listener:

<script type="text/javascript">
  window.addEventListener('CookiebotOnAccept', function (e) {
    if (!Cookiebot.consent.statistics) return;
    // Execute code that set a cookie
    document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
  }, false);
</script>

Using the CookiebotCallback_OnAccept Callback:

<script type="text/javascript">
  function CookiebotCallback_OnAccept() {
    if (!Cookiebot.consent.statistics) return;
    // Execute code that set a cookie
    document.cookie = "username=John Smith; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
  }
</script>

For more information on which custom events and callbacks the Cookiebot script triggers, please see our Developer guide.

 

Server-side

If your web server builds the content server-side (such as PHP does) and you need to determine the website visitors' consent when building the content, you can examine the CookieConsent cookie. For examples, please see our Developer guide.

Comments

0 comments

Please sign in to leave a comment.