How to Display a Cookie Compliance Banner in a Drupal 8 Site

Since 2018, European site-builders have a legal obligation to meet a specific requirement. Their sites must display a banner to inform people about the use of cookies.

This European requirement is mandatory in order to comply with the GDPR (General Data Protection Regulation).

In other words, you must ask user permission if you want to store cookies on the browser of a European (EU) citizen.

The EU Cookie Compliance D8 module provides an easy way to manage this type of functionality. In this tutorial, you will learn about the installation and basic configuration of this module.

Let’s start!

---

Step #1. – Install the Required modules

Perhaps the most popular method to download Drupal modules is Composer

• Open your terminal application and type:

composer require drupal/eu_cookie_compliance

After downloading the module, it is necessary to enable it.

• Click Extend.
• Scroll down until you find the EU Cookie Compliance module and check it.
• Click Install.

You don’t need to install any further modules.

---

Step # 2. Configuring the Module

• Click Configuration > System > EU Cookie Compliance.

This screen has multiple configurations. Let’s take them one by one.

• The first configuration allows you to enable/disable the banner. After that, you can choose if you want to display this banner only to anonymous users, only to authenticated users or for both. By default, all these options are checked.

• After that comes the Consent section. This is the most important part, if you want your site to be GDPR compliant, you have to check the second option (opt-in) Opt-in. Don’t track visitors unless they specifically give consent. (GDPR compliant)

Be aware that you won’t be able to collect information from users who don’t accept the use of cookies by their web browsers. That is the law.

• The third section deals with JavaScripts that will not load if the user has not given her consent. If you use the opt-out method, scripts will load until the user chooses to opt out.

You have to enter the full path to the scripts, each in one separated line into the text area. One example here is the Google Analytics script.

• If you scroll down, you will find the Whitelisted cookies section. You can enter here the cookies that are mandatory for your site and have to be installed, despite the fact that the user has denied her consent. These cookies do not have anything to do with the personal information of the user or their browser.

• The next section deals with the storage of the users, who have given their consent. The default option is Do not store. If you choose Basic Storage, the following information will be saved to your database:
  • User ID.
  • IP address.
  • Timestamp.
  • Consent method.
  • The actual revision of the privacy policy page.

• The next section lets you configure the text to be displayed on the banner. You can also have a different version of these texts to make them look better on mobile screens. Pay attention to the HTML tags you are allowed to use (those are more than enough, to be honest). Let’s change these texts!

Cookie information banner message: <h2>Yes, we use cookies too</h2><p>By clicking <strong>any</strong> link on this page you agree with this.</p>

Consent button label: That's ok with me

Cookie policy button label: Our policy

Disagree button label: No way!

• According to the GDPR, people have to be able to withdraw their consent in an easy way. That is why this module provides a floating tab that displays after the user has given her consent. Make sure the floating privacy settings tab option is checked. You are free to change these texts if you want to.

• The Thank you Banner section lets you configure a banner that will be displayed right after the user gives her consent. I’m going to uncheck this option.

• After the Thank you Banner section you will find the input field for the Privacy policy page of your site. You can enter the link to that page here.

• In the Appearance section, you can tweak the look of the banners to match the colors of your site. Notice that the only mandatory value is the width of the banners. Feel free to play around with these options.

• If you want to display the Cookie Compliance Banner only in European countries, you will have to install the smart_ip module or enable the geoip_country_code_by_name() PHP function on your Drupal installation. That goes out of the scope of this tutorial.

• The Advanced settings section lets you exclude domains and paths you don’t want to be tracked. The /admin path is by default excluded. You can also set the domain of the cookie to a specific (global) URL in case you have multiple domains and want to track them in a consistent manner. I’m going to leave the default values here since I’m working on a development environment. The only two mandatory options here are:
  • Banner sliding animation time
  • Cookie lifetime (how long the cookie is going to be stored

• Click Save Configuration

---

Step #3. – Testing the module

• Open your site in a new browser as an anonymous user
• The cookie compliance banner will appear on top of the site
• Click the “opt-in” Button

The banner will disappear and the private settings floating tab will be visible on top of your browser (you’ll have to refresh the page if this does not happen).

• Click the Privacy settings tab
• Click Withdraw consent

This will make the banner disappear. It will appear again after 100 days (or the time you set in the cookie lifetime option). The cookie will not be tracked anymore.

I hope you liked this tutorial. Thanks for reading!