Cabinet Office Cookie Consent Module for Node.js

The purpose of this module is to provide common Cookie Consent components (UI and functionalities) for speedy development. It is targeted for node.js application that uses govuk-frontend module as part of GOV.UK Design System.

This module also setup and dispatch Google Analytics events.

Quick Start

• Follow GOV.UK Frontend Instructions to install govuk_frontend module.

• Install co-cookie-consent module with npm and save it as dependencies:

  npm install "github:cabinetoffice/co-cookie-consent" --save
  

• Import the Sass source file to include co-cookie-consent styling:

  @import "node_modules/co-cookie-consent/cocc/all";
  

• Access client side cookie using Cookie Parser for example, this is required to retrieve user saved settings. See Cookie Banner Usage and Preference Centre Usage for more detail.

• Source the Javascript code js.all using a script tag. Alternatively, compile the source file if the target project already has browserify for example setup.

  <script src="<YOUR-JAVASCRIPT-FOLDER>/all.js"></script>
  <script>
      window.COCookieConsent.init(GA_ID, GA_DOMAIN)
  </script>
  

  • Google Analytics Id and Domain are expected as parameters to the init() function.
  • Google Analytics Id is needed to initialse Google Analytics where Google Analytics Domain is needed for removal of the cookies.

UI Components

co-cookie-consent offers 3 components including Cookie Banner, Preference Centre and Cookie Policy. All of them are written in Nunjucks and can be customised by the following variables:

• cocc_service_name - Name of the service.

• cocc_policy_href - href link to the cookie policy page.

• cocc_pref_href - href link to the preference centre page.

• cocc_privacy_href - href link to the privacy notice page.

• cocc_last_updated - Used at the end of cookie policy page as the last updated date.

Note: declaration of getCookieByName() used in the following subsection can be found in Appendix.

Cookie Banner Usage

The banner template shall be wrapped around by a variable based on the seen boolean filed in the seen_cookie_message cookie. This is to ensure the banner will be not be rendered again after user cookie preference is made:

{% if not coccSeenCookie %}
  {% include "cocc/banner.njk" %}
{% endif %}

The coccSeenCookie variable shall be passed by the pages that include the banner template, for example:

module.exports = function(req, res) {
  var seenCookieMsg = getCookieByName(req, 'seen_cookie_message')
  var coccSeenCookie = seenCookieMsg ? seenCookieMsg.seen : false

  res.render('app/main/index', { coccSeenCookie })
}

Preference Centre Usage

{% include "cocc/preference.njk" %}

The preference template expects an coccOptedIn variable to determine which is the selected radio button. This variable shall be set based on the usage boolean filed in the cookie_policy cookie, for example:

module.exports = function(req, res) {
  var seenCookieMsg = getCookieByName(req, 'seen_cookie_message')
  var coccSeenCookie = seenCookieMsg ? seenCookieMsg.seen : false

  var cookiePolicy = getCookieByName(req, 'cookie_policy')
  var coccOptedIn = cookiePolicy ? cookiePolicy.usage : false

  res.render('app/cookies/preference/index', { coccSeenCookie, coccOptedIn })
}

Cookie Policy Usage

{% include "cocc/policy.njk" %}

A section in the Cookie Policy is service specific and can be overridden by extending co-cookie-consent/policy.njk and defining the service_specific_policy block as follows:

{% extends "cocc/policy.njk" %}
{% import "cocc/marcos.njk" as coccMarcos %}

{% block service_specific_policy %}
  <p class="govuk-body">
    Service specific policy description
  </p>
    {{ coccMarcos.cookieTable([
	    [
		    "Cookie name",
		    "Purpose of cookie",
		    "12 hours"
	    ]
    ]) }}
{% endblock %}

Appendix

Get Cookie By Name

var getCookieByName = function (req, name) {
  var cookies = req.cookies
  var cookie

  if (cookies && cookies[name]) {
    try {
      cookie = JSON.parse(cookies[name])
    } catch(e) {
      console.error('Failed to parse cookie:', name, '.', e)
    }
  }
  return cookie
}