De ‘privacy by design’ cookiebanner handleiding

<script id="consent-bundle" async>
    (function () {
      var config = {
        content: {
          "nl-nl": {
            main: {
              contentParagraph: [
                "We maken gebruik van cookies en vergelijkbare technieken om onze diensten en advertenties te leveren, te onderhouden en te verbeteren. We verzamelen hiervoor ",
                {
                  type: 'personal-data-popover',
                  text: 'informatie',
                  title: 'Welke informatie verzamelen we over je surfgedrag?',
                  list: [
                    {
                      name: 'Identifiers betreffende je apparaat',
                      contentParagraphs: [
                        'Dit zijn identifiers welke worden opgeslagen in een cookie.',
                      ]
                    },
                    {
                      name: 'Gebruiksinteracties',
                      contentParagraphs: [
                        'Met informatie over interacties wordt bedoeld:',
                        {
                          type: 'list',
                          list: [
                            'de weergave van specifieke pagina’s;',
                            'alle scroll-, touch-, klikacties;',
                            'specifieke gebeurtenissen, zoals het delen of lezen van een artikel; of',
                            'de doorgebrachte tijd op een pagina of de website als geheel.'
                          ]
                        },
                        'Alle interacties worden gekoppeld aan een tijdstip en datum.'
                      ]
                    },
                    {
                      name: 'Browser- en Apparaatgegevens',
                      contentParagraphs: [
                        'Bij een bezoek aan de website wordt er informatie over je browser en apparaat verzameld. Het gaat dan in ieder geval om:',
                        {
                          type: 'list',
                          list: [
                            'het type-/versie browser, apparaat of bestuurssysteem (user-agent);',
                            'de gebruikte link om op deze website te komen (referrer);',
                            'de taalinstelling van de browser (accept-language);',
                            'de scherm- en venstergrootte;',
                            'de laadtijd van een pagina; en',
                            'je onnauwkeurige locatiegegevens op het niveau van land, regio en/of woonplaats.'
                          ]
                        },
                      ]
                    }
                  ]
                },
                " over je surfgedrag. Klik op ",
                {
                  type: 'consent-popover',
                  text: "akkoord ",
                  title: 'Waarvoor geef je akkoord?',
                  purposeLists: [
                    {
                      type: 'first-party',
                      purpose: 'Het gebruik van je surfgedrag voor het tonen van meer relevante content en advertenties op onze website. Bijvoorbeeld:',
                      list: [
                        'een banner op de homepage welke aansluit op je eerdere surfgedrag',
                        '...'
                      ]
                    },
                    {
                      type: 'third-party',
                      purpose: 'Voor het tonen van gepersonaliseerde advertenties delen we gegevens met:',
                      list: [
                        {
                          name: 'Facebook',
                          privacyNotice: 'https://www.facebook.com/about/privacy'
                        },
                        {
                          name: 'Google Ads',
                          privacyNotice: 'https://policies.google.com/technologies/ads?hl=nl'
                        },
                        {
                          name: 'Twitter',
                          privacyNotice: 'https://twitter.com/en/privacy'
                        }
                      ]
                    }
                  ]
                },
                " als je wilt dat we de content en advertenties die je ziet aan de hand van je surfgedrag personaliseren. Meer informatie in het ",
                {
                  type: 'inline-url',
                  text: 'privacy beleid',
                  url: "/privacy"
                },
                "."
              ],
              btnOoptions: "Weigeren",
              btnAgree: "Akkoord"
            }
          }
        },
        settings: {
          domain: '{{COOKIE-DOMAIN (const var)}}',
          path: '/',
          secure: true,
          httpOnly: false,
          maxAge: 15552000,
          sameSite: 'none'
        }
      };
      window.addEventListener("biscuit-init", function () {
        window._biscuit(config)
      });

      var gtm = window.google_tag_manager[{{Container ID}}];

      function addContainer() {
        var container = document.createElement('div');
        container.id = "consent";
        document.body.appendChild(container);
      }

      if (document.getElementById("consent-style") === null) {
        addContainer();
      } else {
        var container = document.getElementById("consent-style");
        container.parentElement.removeChild(container);
      }

      if (document.getElementById("consent-style") === null) {
        var style = document.createElement('link');

        style.id = "consent-style";
        style.rel = "stylesheet";
        style.href = "{{CDN-DOMAIN (const var)}}/bundle.css";
        style.media = "print";
        style.addEventListener('load', function () {
          style.media = 'all'
        });

        document.body.appendChild(style);
      }

      if (document.getElementById("gtm-consent-script") !== null) {
        var el = document.getElementById("gtm-consent-script");
        el.parentElement.removeChild(el);
      }

      var el = document.createElement('script');
      el.id = "gtm-consent-script";
      el.async = true;
      el.src = '{{CDN-DOMAIN (const var)}}/bundle.js';
      el.addEventListener('load', function () {
        gtm.onHtmlSuccess({{HTML ID}});
      });
      document.head.appendChild(el);
    })();
	</script>

<div id="personal" class="wordart rainbow">
</div>
<style>
  .wordart {
  top: 400px;
  font-family: Arial, sans-serif;
  font-size: 4em;
  font-weight: bold;
  position: relative;
  z-index: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
}

.wordart.rainbow {
  transform: scale(1, 1.5);
  -webkit-transform: scale(1, 1.5);
  -moz-transform: scale(1, 1.5);
  -o-transform: scale(1, 1.5);
  -ms-transform: scale(1, 1.5);
}

.wordart.rainbow .text {
  background: red; 
  background: -webkit-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af);
  background: -o-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af);
  background: -moz-linear-gradient(left, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af);
  background: linear-gradient(to right, #b306a9, #ef2667, #f42e2c, #ffa509, #fdfc00, #55ac2f, #0b13fd, #a804af); 
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>

<script type="text/javascript">

var txt = "<p class=\"text\">Your device info:</p>"
txt+= "<p class=\"text\">Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p class=\"text\">Browser Name: " + navigator.appName + "</p>";
txt+= "<p class=\"text\">Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p class=\"text\">Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p class=\"text\">Platform: " + navigator.platform + "</p>";
txt+= "<p class=\"text\">User-agent header: " + navigator.userAgent + "</p>";

document.getElementById("personal").innerHTML=txt;

</script>