Cookie consent

[ajtucker]

As per https://design-system.service.gov.uk/components/cookie-banner/ we need a cookie consent banner with details about what cookies may be used.

[ajtucker]

See https://github.com/collective/volto-cookie-banner and https://github.com/collective/collective.volto.cookieconsent

[charlesons]

Installed, configured and instantiated volto-cookie-banner and collective.volto.cookieconsent and the basic capability gives the following results:

The banner shows at the bottom of the page by default.

Remaining tasks are:

• [x] Gov UK styling
• [x] Introduce Accept and Reject buttons
• [x] Add view cookies link
• [ ] Create cookies page (that shows when above is clicked by the user).
• [x] Adjust implementation of Hotjar and Google Analytics to conform to the user's cookie preferences

[charlesons]

The implementation of volto-cookie-banner is quite basic (offering a simple message and confirmation button by default). To implement more than this would require extending the component.

The cookie banner configuration of volto-cookie-banner also requires the user to specify the html styling of the consent text within the admin interface which may be beyond the ability of some users:

The standard GOV.UK cookie consent banner requires quite detailed functionality and styling compared to a simple cookie banner, requiring Accept and Reject buttons, a header with the service title and also a link to the cookies page.

An existing React cookie banner component from NotGovUK looked like a promising alternative but we encountered some issues with SSR in loading the library.

We we able to amend the razzle config so @not-govuk/cookie-banner is no longer handled as an external dependency by expanding the test in line 55 of razzle.config.js as follows:

if (/(govuk-react-jsx || @not-govuk\/cookie-banner)/.test(request)) ...

A similar SSR issue then arose with the formidable library which is a dependency of @not-govuk/cookie-banner that we were not able to resolve by extending the externals test:

if (/(govuk-react-jsx || @not-govuk\/cookie-banner || formidable)/.test(request))...

A third approach is to use the react-cookie-consent library to create a CcCookieConsent banner component in our own volto-climatechange-elements add on. This approach still proved to be limited for the requirements of the standard GOVUK cookie banner so we proceeded to implement the banner ourselves based on the HTML provided at https://design-system.service.gov.uk/components/cookie-banner/

We also used the HMRC GOV UK website as a reference implementation to understand the behaviour of the cookie banner, cookies and cookies page.

[charlesons]

Example of how the cookie consent banner shows on HMRC

[charlesons]

Example of how the cookies page shows on HMRC

[charlesons]

When JS is not enabled the main gov.uk site cookies page shows a message advising users to enable javascript. We have replicated the same behaviour.

Screenshot from https://gov.uk/help/cookies