Manual cookie blocking

• Intro
• Using the data-cookieconsent attribute
  • Inline scripts
  • External elements
• Consent dependent content using CSS
  • Displaying alternative content
• Using Javascript
• Serverside

Intro

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

Manually blocking cookies has a far lesser impact to website performance and will prevent cookies from being set even if the Cookiebot scripts fails to load. 

There are also situations where auto blocking is not a viable solution, as it impacts the website to an extent that requires so many adjustments that manually marking up becomes a lesser ordeal.

For example, if you need to assign more elements the data-cookieconsent="ignore" attribute than elements 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

Mark up consists of 2 parts; the disabler and the enabler. The former 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 was given.

To mark up an inline script:

1. Set the type attribute to "text/plain".
   As this tells the browser to regard the script as plain text, this 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>

To mark up this iframe to require consent to cookies 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. As described above, scripts are prevented from setting cookies by setting the type to "text/plain".
Iframes and images do not have a type attribute though, which is why another approach is used for elements of this type::

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>

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

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

• Hide and show content based on the visitor's consent
• Iframe cookie consent with YouTube example

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 will only run the code that set a cookie 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 trigger, 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.