Cookie Notice

Introduction

This module allows creating an accessible cookie notice on the site with a working form and Google Tag Manager integration.

Usage

"Cookie notice" module is available in the list of modules. We can add it anytime. This is a flexible parent module, which means we can add children modules inside. It makes "Cookie notice" an ultimate modal window builder for cookie consent/notice functionality. It is also a composite module, which means it comes with demo static content and some styling.

After the module is added, it is already a functional dialog window. There are two main settings:

• "Content" - for custom HTML
• "Show in builder" - switch it "on" to display the module in the builder mode regardless of existence of related cookie. We use it when we want to style the dialog window and want to preview the changes instantly.

Using "Content" setting is optional. We either put here a custom HTML - paragraphs, labels, buttons etc. Or we add children modules as it is already done in this composite module.

The main functionality of "Cookie notice" is to inform users about data collecting and make it possible to reject or give consent for data collecting. We should use Google Tag Manager to effectively block or load script upon consent. You might be interested to know how to setup GTM with Google Analytics.

Styling

Since parts of "Cookie consent" module are modules, they can be styled as any other modules by using UI controls in their settings.

In case of using custom HTML and "Content" setting any parts of Accordion module can be styled by using custom CSS selectors.

For developers / API

info

• HTML tag name: <dialog>
• Implements 3rd-party script: none
• Allowed children modules: any
• Available since: 0.12.0 FREE

Module "Cookie notice" includes some accessibility helpers. The composite module includes two children modules named "Cookie label" and "Cookie description" with IDs cookieLabel and cookieDescription. These are used to make the dialog window accessible. So, in case of creating a custom template for the dialog window, we shall add these labels to our own modules/custom HTML were applicable.

The form inside "Cookie notice" has method equal to dialog and two buttons inside with values accept and reject. The module itself listens to the form from dialog window and captures the submitted value. If it is equal to accept then special cookie consent_given (name cannot be changed) will be set for period of 90 days (the value can be changed via data-expiration attr) plus a special method will be fired:

window.dataLayer.push({ 'event': 'consent_given' });

This module works with GTM tag specifically!

In conclusion, the modal window itself will be shown on the site automatically if consent_given cookie is not set. It will not be shown if the cookie is equal to accept or reject. And if the cookie is equal to accept, then special method will be fired automatically.

JS functionality of the module

function giveConsent() {
   if (window.dataLayer) {
      window.dataLayer.push({ 'event': 'consent_given' });
   }
}

document.addEventListener('readystatechange', () => {
   if (document.readyState === 'complete') {
      const COOKIE_NAME = 'consent_given';
      const dialog = document.querySelector('dialog.builderiusCookieNotice');

      if (dialog) {
         const { expiration = 90 } = {...dialog.dataset};
         const cookie = Cookies.get(COOKIE_NAME);

         if (cookie) {
            if (cookie === 'accept') {
               giveConsent();
            }
         } else {
            dialog.show();

            dialog.addEventListener('close', () => {
               const value = dialog.returnValue;
               Cookies.set(COOKIE_NAME, value, { expires: expiration, sameSite: 'strict' });

               if (value === 'accept') {
                  giveConsent();
               }
            });
         }
      }
   }
});

API docs

Similar to other interactive modules, "Cookie consent" module uses HTML attributes, which take part of the module's API. An example: HTML attribute data-content which holds the value of "Content" setting.

Read more the full list of attributes, events and methods below:

Attributes

data-content - (optional) custom HTML;

data-expiration - (optional) a number of days for cookie expiration;

Events

No event

Methods

No methods