Main content area

Implementing DWP GOV.UK cookie consent pattern in Drupal

In this blog post we provide instructions on how to enable, configure and use the DWP consent pattern in a Drupal 8/9 based website.

Implementing the DWP consent pattern, in a Drupal module, heavily depends on the contributed CIVIC Cookie Control module, as its shares the actual Cookie Control script and a number of essential configuration options.

Step 1 : Enable CIVIC GovUK Cookie Control module

The process of configuring the DWP GovUK pattern is initiated by downloading the Cookie Control module from the Drupal repository and installing it in the filesystem of an active Drupal 8/9 based website, either manually or by using Composer:

composer require 'drupal/civicccookiecontrol:^4.4'.

Two new modules (CIVIC Cookie Control, CIVIC GovUK Cookie Control) will now appear in the “Extend” section of the Drupal website at hand. At this stage you need to enable the CIVIC GovUk Cookie Control module. In case the CIVIC Cookie Control module is not already enabled you will asked to also enable it, as it is mandatory for GDPR compliant cookie handling.

Screenshot of Drupal admin interface, module installation
Screenshot 1: Drupal admin interface, module installation

Once the Cookie Control modules are enabled two menu items will be added in the configuration section of the Drupal administration toolbar. These menu items direct dully authorised users users to the corresponding “CIVIC Cookie Control” and “GovUK Cookie Control” configuration pages. 

Screenshot of Drupal admin interface, configure module
Screenshot 2: Drupal admin interface, module configuration

Step 2 : Configure Cookie Control and GOV.UK Cookie Control

At this stage Cookie Control needs to be activated and configured. A valid Cookie Control API key, if not already available, should to be obtained and the Cookie Control license information form should be filled.

Screenshot of module interface, enter API Key
Screenshot 3: Module interface, Cookie Control API Key 

As already noted the DWP GovUK cookie consent pattern implementation heavily depends depends on Cookie Control and shares some crucial configuration elements. Thus once the Cookie Control license is validated and the widget is actually activated the following common configuration elements/fields should be provided:

  • Customising Appearance, Text and Behaviour 
    • Title text,
    • Introductory text,
    • Accept Settings Text,
    • Reject Settings Text
    • On Text
    • Off Text
  • Privacy Statement
    • Statement description
    • Statement name
    • Privacy policy link
  • Cookie categories (i.e. analytics, marketing etc) along with their corresponding cookies that Cookie Control will handle needs to be defined. If the GovUK module is properly configured the DWP cookie categories will be displayed in the privacy policy page with buttons to opt-in/opt-out.  Otherwise the well known Cookie Control widget will employ the same cookie categories. 
Screenshot of module interface, cookie categories
Screenshot 4: Module interface, cookie categories

The configuration is actually spread in two places, the Cookie Control module configuration tabs and the Gov.Uk configuration form. To further assist users in properly configuring the DWP pattern in the following images we provide a numerical mapping of textual elements in DWP banner and details blocks with the configuration place a user may find them.

Screenshot of the front-end user interface
Screenshot 5: Front-end user interface
  1. Cookie Control Settings / Customising Appearance, Text and Behaviour / Title text
  2. Cookie Control Settings / Customising Appearance, Text and Behaviour / Introductory text
  3. Cookie Control Settings / Privacy Statement / {Statement Description, Statement Name, Privacy policy link}
  4. Cookie Control Settings / Customising Appearance, Text and Behaviour / {Accept text, Reject text}
  5. GOV UK Cookie Control Texts / GOV UK Texts in {language} / Accepted cookies text,
  6. GOV UK Cookie Control Texts / GOV UK Texts in {language} / Change cookie settings {prefix, link, suffix},
  7. GOV UK Cookie Control Texts / GOV UK Texts in {language} / Rejected cookies text,
  8. GOV UK Cookie Control Texts / GOV UK Texts in {language} / Hide button text.
Screenshot of optional cookie settings
Screenshot 6: Front-end user interface, optional cookie settings
  1. GOV UK Cookie Control Texts / GOV UK Texts in {language} / Optional Cookies text.
  2. Cookie Control Categories / edit cookie category / Cookie Name.
  3. Cookie Control Categories / edit cookie category / Cookie description.
  4. GOV UK Cookie Control Texts / GOV UK Texts in {language} / Allow cookies question prefix text.
  5. Cookie Control Categories / edit cookie category / Cookie Name.
  6. GOV UK Cookie Control Texts / GOV UK Texts in {language} / Allow cookies question suffix text.
  7. Cookie Control Settings /  Customising Appearance, Text and Behaviour / On Text.
  8. Cookie Control Settings /  Customising Appearance, Text and Behaviour / Off Text.
  9. GOV UK Cookie Control Texts / GOV UK Texts in {language} / Save and Continue Text

Step 3 : Provide translations

Should the need arise for configuring the DWP in multiple languages the textual elements translations should be provided in two places:

  1. In the Cookie Control alternative language configuration section and
  2. In the corresponding sections of the GOV UK Cookie Control Texts. The DWP Gov UK submodule is actually integrated with the translations and locale modules. Thus whenever a new language is added the corresponding section will appear in the GOV UK Cookie Control form. In addition the translated strings may also be amended by the user interface translation section  (admin/config/regional/translate).
Screenshot of module interface, translations
Screenshot 7: Module interface, translations

Step 4 : Add blocks in theme regions

At this stage we have configured the interface for DWP pattern using cookie control and the corresponding translations. However we can’t yet see the banner in the website front-end. This task is fairly simple as it exploits Drupal’s versatile block configuration interface. Upon DWP module installation two blocks are created:

  1. The GovUk CookieControl Banner block, and

Screenshot of the module interface, GovUk CookieControl Banner block

  1. The GovUk CookieControl Details block

Screenshot of the module interface, GovUk CookieControl Details block

The GovUk CookieControl Banner bock should be attached in one of the top areas of the theme and the GovUk CookieControl Details block in the content area of the privacy policy page. 

Screenshot of front-end user interface, top block

Once the blocks are placed we flush Drupal caches and we have now the DWP GOV.UK implemented in the website at hand.

Screenshot of front-end user interface, optional settings on the Privacy Page