Cookies page
Experimental
This pattern is currently experimental because more research is needed to validate it.
This pattern is currently experimental because more research is needed to validate it.
Tell users about the cookies you’re setting on their device and let them accept or reject different types of non-essential cookies.
When to use this pattern
Use a cookies page to tell the user about any cookies your service uses - or any other technologies that work in a similar way and store information on the user’s device. For example, HTML5 local storage or service workers.
How it works
A cookies page helps you to be transparent about the cookies you’re using. The Service Manual has guidance on how and when to use cookies.
Preparing your cookies page
You must publish a cookies page by the time your service goes into public beta. The cookies page must be unique to your service: do not link to the cookie policy for the main GOV.UK website.
Follow the steps below to create a cookie policy.
- Audit your cookies.
- Categorise your cookies.
- Write your cookies page.
Auditing and categorising your cookies
List all the cookies you’re using in the service. Divide the list into:
- essential cookies - these are cookies you need to set so the service will work
- functional cookies - the service will work without them, but the user will not be able to take advantage of some functionality (for example, remembering the settings they’ve chosen between different visits)
- analytics cookies - cookies that let you collect analytics data to use within your own organisation
- any other types of cookie you’re using
You should also identify if each cookie is set on the server or client.
The result of your audit will guide your cookie policy and how the service should use a cookies page and cookie banner.
The cookie banner component shows several options for using a cookie banner for services that:
- only set essential cookies
- sets non-essential cookies on the server - including services that also set non-essential cookies on the client
- sets non-essential cookies - but only on the client
Writing your cookies page
Work with your organisation’s privacy expert to write the cookies page.
The cookie policy must be written in plain English and it must explain:
List the cookies individually on the cookies page, under the relevant category. For each cookie, give:
- the cookie name
- a brief description of what the cookie does
- for third party cookies, who is setting the cookie (for example, social media websites may require users to accept their cookies in order to provide their functionality as part of your service)
- when the cookie will expire
You can see an example on the GOV.UK Notify cookies page.
Do not bury your cookie policy in a ‘terms and conditions’ page.
Have an agreed process for updating the cookie policy when you add or remove a cookie. Make sure the relevant people on your team know what the process is.
Which cookies you need consent for
You do not need the user’s consent to set essential or ‘strictly necessary’ cookies. A cookie is ‘strictly necessary’ if the service will not work without it.
The Information Commissioner’s Office (ICO) has guidance on what types of cookie are likely to be considered ‘strictly necessary’. For example, load balancing cookies are likely to be strictly necessary - but cookies that collect analytics data are not.
You must get the user’s consent before you set any cookies that are not strictly necessary.
You can get the user’s consent:
- by using a cookie banner
- by letting the user change and save their settings on the cookies page
Publishing your cookies page
Link to the cookies page from the service footer and from the cookie banner.
Letting users accept or reject cookies on the cookies page
Use radios and a button to let users accept or reject non-essential cookies.
Load the page with the radios set to ‘no’ on the user’s first visit. If they’ve previously used the service and set their preferences, load the page with those preferences selected.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/cookies-page/cookies-form/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">cookie preferences form - cookies page</span>
example in a new tab
</a>
</div>
<iframe title="Cookie preferences form - Cookies page example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/cookies-page/cookies-form/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-cookie-preferences-form-cookies-page-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#cookie-preferences-form-cookies-page-example-html" role="tab" aria-controls="cookie-preferences-form-cookies-page-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#cookie-preferences-form-cookies-page-example-nunjucks" role="tab" aria-controls="cookie-preferences-form-cookies-page-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#cookie-preferences-form-cookies-page-example-html" aria-controls="cookie-preferences-form-cookies-page-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="cookie-preferences-form-cookies-page-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
<div class="govuk-grid-column-two-thirds"> <h2 class="govuk-heading-l">Change your cookie settings</h2> <form action="/form-handler" method="post" novalidate> <div class="govuk-form-group"> <fieldset class="govuk-fieldset"> <legend class="govuk-fieldset__legend govuk-fieldset__legend--s"> Do you want to accept functional cookies? </legend> <div class="govuk-radios" data-module="govuk-radios"> <div class="govuk-radios__item"> <input class="govuk-radios__input" id="functional-cookies" name="functional-cookies" type="radio" value="yes"> <label class="govuk-label govuk-radios__label" for="functional-cookies"> Yes </label> </div> <div class="govuk-radios__item"> <input class="govuk-radios__input" id="functional-cookies-2" name="functional-cookies" type="radio" value="no" checked> <label class="govuk-label govuk-radios__label" for="functional-cookies-2"> No </label> </div> </div> </fieldset> </div> <div class="govuk-form-group"> <fieldset class="govuk-fieldset"> <legend class="govuk-fieldset__legend govuk-fieldset__legend--s"> Do you want to accept analytics cookies? </legend> <div class="govuk-radios" data-module="govuk-radios"> <div class="govuk-radios__item"> <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes"> <label class="govuk-label govuk-radios__label" for="analytics-cookies"> Yes </label> </div> <div class="govuk-radios__item"> <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked> <label class="govuk-label govuk-radios__label" for="analytics-cookies-2"> No </label> </div> </div> </fieldset> </div> <button class="govuk-button" data-module="govuk-button"> Save cookie settings </button> </form> </div> </div>
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#cookie-preferences-form-cookies-page-example-nunjucks" aria-controls="cookie-preferences-form-cookies-page-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="cookie-preferences-form-cookies-page-example-nunjucks" role="tabpanel"><div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/radios/macro.njk"</span> <span class="hljs-keyword">import</span> govukRadios %}
{% from "govuk/components/button/macro.njk" import govukButton %} <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <h2 class="govuk-heading-l">Change your cookie settings</h2> <form action="/form-handler" method="post" novalidate> {{ govukRadios({ name: "functional-cookies", fieldset: { legend: { text: "Do you want to accept functional cookies?", classes: "govuk-fieldset__legend--s" } }, items: [ { value: "yes", text: "Yes" }, { value: "no", text: "No", checked: true } ] }) }} {{ govukRadios({ name: "analytics-cookies", fieldset: { legend: { text: "Do you want to accept analytics cookies?", classes: "govuk-fieldset__legend--s" } }, items: [ { value: "yes", text: "Yes" }, { value: "no", text: "No", checked: true } ] }) }} {{ govukButton({ text: "Save cookie settings" }) }} </form> </div> </div>