Cookie consent

Open2b provides built-in tools that make it easier to collect consent for cookies and other tracking systems, and that enable preventive blocking with asynchronous reactivation once consent is given.

• Track whether consent was given or denied
• Preemptively block tracking code

Track consent

On any template page you can call the JavaScript function Open2b.trackingConsent to track the user’s choice, whether consent was granted or denied, and to check its status.

Below you can see how to use this function to easily implement your own cookie banner.

When the user gives consent, for example by continuing to browse or by clicking an “accept” button, you can record the consent like this:

Open2b.trackingConsent(true);

The recorded consent will be kept for the entire session.

Similarly, if the user denies consent, for example by clicking a “reject” button, you can record the refusal:

Open2b.trackingConsent(false);

At any time and from any page you can check whether consent was granted or denied:

Open2b.trackingConsent().then(function(given) {
    if ( given ) {
        // consent was granted.
    } else {
        // consent was denied.
    }
});

When called without arguments, Open2b.trackingConsent returns a promise that stays pending until consent is granted or denied. If consent has already been given or denied at the time of the call, the promise resolves immediately.

Example

The following is a simple cookie banner that requires explicit user consent and calls Open2b.trackingConsent to track it.

<div class="cookie-banner">
  <div>Do you consent to tracking?</div>
  <div class="buttons">
    <button onclick="Open2b.trackingConsent(true)">Allow</button>
    <button onclick="Open2b.trackingConsent(false)">Deny</button>
  </div>
</div>

Preemptively block tracking code

To preemptively block tracking code and enable it asynchronously if and when the user has given consent, wrap the HTML code inside one or more template elements with the data-cookie-consent attribute:

<template data-cookie-consent>
  <!-- put the code to be blocked here -->
</template>

The code inside a template element is not rendered by the browser (except images, as explained below), so it is “blocked.” To unblock it, call Open2b.trackingConsent with argument true, or ensure it was already called earlier during navigation.

Example

You want to place Analytics tracking code on the site and keep it blocked until the user gives consent. Put the Analytics code inside a template element with the data-cookie-consent attribute:

<template data-cookie-consent>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'GA_MEASUREMENT_ID');
  </script>

</template>

The Analytics code will remain blocked until Open2b.trackingConsent is called with true, i.e. until consent is given. This can be done with your own cookie banner or by installing the Cookie Policy app from the App Store in the back office.

Once consent is given, throughout the browsing session the code inside template will be automatically unblocked.

Unblock order

Blocked elements are unblocked in the order they appear on the page. When a script element with a src attribute is unblocked, subsequent elements inside the same template are unblocked only after the script has loaded and executed. If an error occurs while loading or executing, subsequent elements are not unblocked.

This dependency between elements within the same template can be extended to other elements on the page. If two template elements have the same value for data-cookie-consent, for example:

<template data-cookie-consent="analytics">
  <script src="//track.analytics.com/visit.js"></script>
  <script>h('visit');</script>
</template>

<template data-cookie-consent="analytics">
  <script>h('order');</script>
</template>

then any given element will not be unblocked until all previous ones are unblocked. In the example above, the code <script>h('order');</script> will not be unblocked until <script src="//track.analytics.com/visit.js"></script> is unblocked.

Images

If the tracking code contains an image, it is also important to rename the src attribute of the img tag to data-src. This is because Firefox loads the image even if the tag is inside a template element. When the img tag is unblocked, the data-src attribute will be renamed to src and the image will be loaded.

For example, the following tracking code

<img src="https://www.tracking.com/track.png">

can be added to the template page like this

<template data-cookie-consent>
  <img data-src="https://www.tracking.com/track.png">
</template>