Set up Cookiebot for cookie consent

Every Foleon Doc has cookies, and according to the GDPR, you need to inform your readers about these cookies. Your company might use Cookiebot as a Consent Management Platform (CMP) to meet additional requirements for your cookie consent. This article shows you how to implement Cookiebot into your Foleon Docs.

How Cookiebot and Foleon work together

The role of a Consent Management Platform (CMP) such as Cookiebot is to ask for consent, give a signal once cookie preferences are given, and store the cookie preferences in the browser as a cookie.

Websites or Foleon Docs need to look for those preferences, listen for that signal that the cookie preferences have been set, and then act accordingly by executing the scripts that are allowed to be executed.

If you want to implement Cookiebot into your Foleon Docs, you'll need to build your custom script.

Build your custom script

• Script 1: Prevent Foleon from placing cookies

  Certain cookies are placed by Foleon once the Doc is loaded. For example, cookies related to:

  • Foleon Analytics

  • Google Analytics

  • Custom scripts you've placed in the remarketing field.

    <script>
      if (!window.localStorage.getItem("cc_settings")) {
        window.localStorage.setItem(
          "cc_settings",
          JSON.stringify({ statistics: 0, marketing: 0, preferences: 1 })
        );
      }
    </script>

• Script 2: Cookiebot banner

  In order to get the Cookiebot banner to work, we need to add another script.
  
  You'll get the second script from Cookiebot, which should look something like this: 

  <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" data-blockingmode="auto" type="text/javascript"></script> 
  
  <script id="CookieDeclaration" src=https://consent.cookiebot.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/cd.js type="text/javascript" async></script> 

• Script 3: Consent changes

  The third script listens to any consent changes and updates the Foleon consent manager accordingly. This ensures that the correct cookies are placed.

  <script>
      // event listener for when the reader accepts cookies
      window.addEventListener('CookiebotOnAccept', function () {
          var statistics = Cookiebot.consent.statistics ? 1 : 0;
          var marketing = Cookiebot.consent.marketing ? 1 : 0;
          var functional = Cookiebot.necessary ? 1 : 0;
          var preference = Cookiebot.preferences ? 1 : 0;
  
          if(typeof CookieConsentAPI !== 'undefined') {
              CookieConsentAPI.update({
              statistics: statistics || 0,
              marketing: marketing || 0,
              preferences: functional || 1
              })
              CookieConsentAPI.save()
            } else {
              localStorage.setItem("cc_settings", JSON.stringify({
              statistics: statistics || 0,
              marketing: marketing || 0,
              preferences: functional || 1
              }))
            }
  
          })
      // event listener for when the reader declines cookies
      window.addEventListener('CookiebotOnDecline', function () {
      var statistics = Cookiebot.consent.statistics ? 1 : 0;
      var marketing = Cookiebot.consent.marketing ? 1 : 0;
      var functional = Cookiebot.necessary ? 1 : 0;
      var preference = Cookiebot.preferences ? 1 : 0;
  
      if(typeof CookieConsentAPI !== 'undefined') {
          CookieConsentAPI.update({
          statistics: statistics || 0,
          marketing: marketing || 0,
          preferences: functional || 1
          })
          CookieConsentAPI.save()
          } else {
          localStorage.setItem("cc_settings", JSON.stringify({
          statistics: statistics || 0,
          marketing: marketing || 0,
          preferences: functional || 1
          }))
          }
      })
  </script>

• Example of a complete script

  With the three scripts we've shared above, we assembled an example of a complete script.

  In the example below, replace the second script with your own Cookiebot script. That's it, you've now built the complete script. Read on to learn how to inject this script into the remarketing field.

  ⚠️ Any custom script you implement is the creator's responsibility, so ensure you know your script inside out. If you're not very experienced, we recommend you consult an expert in Javascript and cookie consent.

  <script>
      // blocks all Foleon scripts from loading and placing cookies
      if (!window.localStorage.getItem('cc_settings')) {
          window.localStorage.setItem('cc_settings',
              JSON.stringify({ "statistics": 0, "marketing": 0, "preferences": 1 }));
      }
  </script>
  ​
  <!-- Cookie bot script: Replace this part only with your cookiebot snippet-->
  <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" data-blockingmode="auto" type="text/javascript"></script> 
  <script id="CookieDeclaration" src=https://consent.cookiebot.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/cd.js type="text/javascript" async></script>
  <!-- end of cookie bot script -->
  ​
  <script>
      // event listener for when the reader accepts cookies
      window.addEventListener('CookiebotOnAccept', function () {
          var statistics = Cookiebot.consent.statistics ? 1 : 0;
          var marketing = Cookiebot.consent.marketing ? 1 : 0;
          var functional = Cookiebot.necessary ? 1 : 0;
          var preference = Cookiebot.preferences ? 1 : 0;
  
          if(typeof CookieConsentAPI !== 'undefined') {
              CookieConsentAPI.update({
              statistics: statistics || 0,
              marketing: marketing || 0,
              preferences: functional || 1
              })
              CookieConsentAPI.save()
            } else {
              localStorage.setItem("cc_settings", JSON.stringify({
              statistics: statistics || 0,
              marketing: marketing || 0,
              preferences: functional || 1
              }))
            }
  
          })
      // event listener for when the reader declines cookies
      window.addEventListener('CookiebotOnDecline', function () {
      var statistics = Cookiebot.consent.statistics ? 1 : 0;
      var marketing = Cookiebot.consent.marketing ? 1 : 0;
      var functional = Cookiebot.necessary ? 1 : 0;
      var preference = Cookiebot.preferences ? 1 : 0;
  
      if(typeof CookieConsentAPI !== 'undefined') {
          CookieConsentAPI.update({
          statistics: statistics || 0,
          marketing: marketing || 0,
          preferences: functional || 1
          })
          CookieConsentAPI.save()
          } else {
          localStorage.setItem("cc_settings", JSON.stringify({
          statistics: statistics || 0,
          marketing: marketing || 0,
          preferences: functional || 1
          }))
          }
      })
  </script>

Place your script in the remarketing field

We're almost there. We’ve prevented scripts from being executed without consent and built the script, so now we're ready to inject the Cookiebot script into the remarketing field.

Once you've correctly configured your custom script, add your custom code in the Foleon Doc settings of your Doc when you scroll down to the Marketing tab.

On the right side, copy-paste the script into the Remarketing code field. Save your changes and (re)publish your Foleon Doc.