Pages Cookies page

Standard content and layout for the cookies page on a DWP service. This page should be used as part of the GOV.UK Cookies page pattern.

Open this example in a new tab

Service name

Cookies on [service name]

Cookies are small text files that we save on your phone, tablet or computer when you use this service. Some cookies on [service name] are essential and others are optional.

We cannot use cookies to identify you.

Essential cookies

Essential cookies are needed to make the service work. If you do not want us to use them you can turn off cookies in your web browser, but the service may not work properly.

We will not set any essential cookies until you start using the service.

Essential cookies used by this service

Security cookies

Name	Purpose	Expires
Cookie 1	Plain language description of cookie purpose	Cookie duration
Cookie 2	Plain language description of cookie purpose	Cookie duration

Functional cookies

Name	Purpose	Expires
Cookie 1	Plain language description of cookie purpose	Cookie duration
Cookie 2	Plain language description of cookie purpose	Cookie duration

Performance cookies

Name	Purpose	Expires
Cookie 1	Plain language description of cookie purpose	Cookie duration
Cookie 2	Plain language description of cookie purpose	Cookie duration

Optional cookies

Optional cookies help us to improve the service, but it will work without them. We will not use them without your permission and you can change your mind at any time.

<div class="govuk-!-margin-bottom-8">
<header class="govuk-header" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
  <div class="govuk-header__logo">
    <a href="#" class="govuk-header__link govuk-header__link--homepage">
      <svg
        focusable="false"
        role="img"
        class="govuk-header__logotype"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 148 30"
        height="30"
        width="148"
        aria-label="GOV.UK">
        <title>GOV.UK</title>
        <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
      </svg>
    </a>
  </div>
  <div class="govuk-header__content">
    <a href="#" class="govuk-header__link govuk-header__service-name">
      Service name
    </a>
  </div>
</div>
</header>
</div>
<div class="govuk-width-container">
<h1 class="govuk-heading-xl">Cookies on [service name]</h1>
<p class="govuk-body">Cookies are small text files that we save on your phone, tablet or computer when you use this service. Some cookies on [service name] are essential and others are optional.</p>
<p>We cannot use cookies to identify you.</p>
<h2 class="govuk-heading-l">Essential cookies</h2>
<div class="govuk-body" id="essential_cookies_desc">
<p>Essential cookies are needed to make the service work. If you do not want us to use them you can turn off cookies in your web browser, but the service may not work properly.</p>
<p>We will not set any essential cookies until you start using the service.</p>
<details class="govuk-details" data-module="essential-cookies-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Essential cookies used by this service
    </span>
  </summary>
  <div class="govuk-details__text">
    <h3 class="govuk-heading-m" id="security_cookies_desc">Security cookies</h3>
    <table class="govuk-table" aria-describedby="security_cookies_desc">
      <thead class="govuk-table__header">
        <tr>
          <th scope="col" class="govuk-table__header">Name</th>
          <th scope="col" class="govuk-table__header">Purpose</th>
          <th scope="col" class="govuk-table__header">Expires</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 1</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 2</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
      </tbody>
    </table>
    <h3 class="govuk-heading-m" id="functional_cookies_desc">Functional cookies</h3>
    <table class="govuk-table" aria-describedby="functional_cookies_desc">
      <thead class="govuk-table__header">
        <tr>
          <th scope="col" class="govuk-table__header">Name</th>
          <th scope="col" class="govuk-table__header">Purpose</th>
          <th scope="col" class="govuk-table__header">Expires</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 1</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 2</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
      </tbody>
    </table>
    <h3 class="govuk-heading-m" id="performance_cookies_desc">Performance cookies</h3>
    <table class="govuk-table" aria-describedby="performance_cookies_desc">
      <thead class="govuk-table__header">
        <tr>
          <th scope="col" class="govuk-table__header">Name</th>
          <th scope="col" class="govuk-table__header">Purpose</th>
          <th scope="col" class="govuk-table__header">Expires</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 1</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 2</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
      </tbody>
    </table>
  </div>
</details>
</div>
<div class="govuk-body" id="optional_cookies_desc">
<h2 class="govuk-heading-l">Optional cookies</h2>
<p>Optional cookies help us to improve the service, but it will work without them. We will not use them without your permission and you can change your mind at any time.</p>
<form action="#">
  <h3 class="govuk-heading-m" id="google_analytics_cookies_desc">Analytics cookies (Google Analytics)</h3>
  <p class="govuk-body">We use Google Analytics software to collect information about how you use this service and help us make it better. We do not allow Google to use or share this data.</p>
  <details class="govuk-details" data-module="analytics-cookies-details">
    <summary class="govuk-details__summary">
      <span class="govuk-details__summary-text">
        Analytics cookies used by this service
      </span>
    </summary>
    <div class="govuk-details__text">
      <table class="govuk-table" aria-describedby="google_analytics_cookies_desc">
        <thead class="govuk-table__header">
          <tr>
            <th scope="col" class="govuk-table__header">Name</th>
            <th scope="col" class="govuk-table__header">Purpose</th>
            <th scope="col" class="govuk-table__header">Expires</th>
          </tr>
        </thead>
        <tbody class="govuk-table__body">
          <tr scope="row" class="govuk-table__row">
            <td class="govuk-table__cell">_ga</td>
            <td class="govuk-table__cell">Checks if you have visited before so we can count how many people use the service.</td>
            <td class="govuk-table__cell">2 years</td>
          </tr>
          <tr scope="row" class="govuk-table__row">
            <td class="govuk-table__cell">_ga_&lt;container-id&gt;</td>
            <td class="govuk-table__cell">Collects information about how you use the service so we can make it better.</td>
            <td class="govuk-table__cell">2 years</td>
          </tr>
        </tbody>
      </table>
    </div>
  </details>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--s govuk-visually-hidden">Can we use analytics cookies?</legend>
      <input value="" type="hidden" name="cookie_preferences_form[ga]" id="cookie_preferences_form_ga">
      <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="google_analytics" name="google_analytics" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="google_analytics">
            Accept analytics cookies
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="google_analytics-2" name="google_analytics" type="radio" value="no" checked>
          <label class="govuk-label govuk-radios__label" for="google_analytics-2">
            Reject analytics cookies
          </label>
        </div>
      </div>
    </fieldset>
  </div>
  <button class="govuk-button">Save cookie settings</button>
</form>
</div>
</div>
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
  <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
    <h2 class="govuk-visually-hidden">Support links</h2>
    <ul class="govuk-footer__inline-list">
      <li class="govuk-footer__inline-list-item">
        <a class="govuk-footer__link" href="#">
          Cookies
        </a>
      </li>
    </ul>
    <svg
      aria-hidden="true"
      focusable="false"
      class="govuk-footer__licence-logo"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 483.2 195.7"
      height="17"
      width="41">
      <path
        fill="currentColor"
        d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
    </svg>
    <span class="govuk-footer__licence-description">
      All content is available under the
      <a
        class="govuk-footer__link"
        href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
        rel="license">Open Government Licence v3.0</a>, except where otherwise stated
    </span>
  </div>
  <div class="govuk-footer__meta-item">
    <a
      class="govuk-footer__link govuk-footer__copyright-logo"
      href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
      © Crown copyright
    </a>
  </div>
</div>
</div>
</footer>

{%- from "govuk/components/header/macro.njk" import govukHeader -%}
{%- from "govuk/components/footer/macro.njk" import govukFooter -%}

{% set pageTitle = "Cookies template" %}

{% block pageContent %}

<div class="govuk-!-margin-bottom-8">
{{ govukHeader({
  homepageUrl: "#",
  serviceName: "Service name",
  serviceUrl: "#"
}) }}
</div>

<div class="govuk-width-container">      
{% include "_cookie-content.njk" %}
</div>

{% block footer %}
{{ govukFooter({
  meta: {
    items: [
      {
        href: "#",
        text: "Cookies"
      }
    ]
  }
}) }}
{% endblock %}

{% endblock %}

Principles

Users must be able to:

• understand how your service uses cookies and which cookies it uses
• easily find and change their consent preferences at any time

When to use this pattern

Use this template on any DWP service that needs consent to set cookies. This usually means any service that is not only used by DWP staff.

When not to use this pattern

Services that are only used by DWP staff do not usually need consent to set cookies. Consult a Performance Analyst if you are not sure whether your service needs cookie consent.

How it works

This content works within the Cookies page pattern and Cookie banner component from the GOV.UK Design System, which include detailed guidance on implementation.

Before you can write your cookies page you will need to audit and categorise the cookies used on your service.

Content

Follow the steps in the GOV.UK Design System Cookies page pattern. When you come to the section ‘Writing your cookies page’, use the examples given here as a template. There are two versions of the sample text:

• if your only optional cookies are Google Analytics cookies
• if you have more than one type of optional cookie

The introductory text explaining cookies is approved for use across DWP so do not change it or add to it unnecessarily.

You will need to:

• replace [service name] with the name of your own service
• change the categories to match those used in your service (identified in your cookie audit)
• write your own description of what each cookie does

Write the cookie descriptions in plain English so that a non-technical user can understand them. For the cookie duration, use the units that are easiest to understand for each cookie: for example, write ‘20 hours’ instead of ‘1200 minutes’.

Google Analytics cookies

Use the following standard names and descriptions for Google Analytics cookies:

Name	Purpose	Expires
_ga	Checks if you have visited before so we can count how many people use the service.	2 years
_ga_<container-id>	Collects information about how you use the service so we can make it better.	2 years

Services with other optional cookies

If your service has more than one category of optional cookie (not just analytics cookies), users should be able to accept or reject each category individually. The following sample shows how to organise multiple optional cookie categories.

Open this example in a new tab

Service name

Cookies on [service name]

Cookies are small text files that we save on your phone, tablet or computer when you use this service. We cannot use them to identify you.

Some cookies on [service name] are essential and others are optional.

Essential cookies

Essential cookies are needed to make the service work. If you do not want us to use them you can turn off cookies in your web browser, but the service may not work properly.

We will not set any essential cookies until you start using the service.

Essential cookies used by this service

Security cookies

Name	Purpose	Expires
Cookie 1	Plain language description of cookie purpose	Cookie duration
Cookie 2	Plain language description of cookie purpose	Cookie duration

Functional cookies

Name	Purpose	Expires
Cookie 1	Plain language description of cookie purpose	Cookie duration
Cookie 2	Plain language description of cookie purpose	Cookie duration

Performance cookies

Name	Purpose	Expires
Cookie 1	Plain language description of cookie purpose	Cookie duration
Cookie 2	Plain language description of cookie purpose	Cookie duration

Optional cookies

Optional cookies help us to improve the service, but it will work without them. We will not use them without your permission and you can change your mind at any time.

<div class="govuk-!-margin-bottom-8">
<header class="govuk-header" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
  <div class="govuk-header__logo">
    <a href="#" class="govuk-header__link govuk-header__link--homepage">
      <svg
        focusable="false"
        role="img"
        class="govuk-header__logotype"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 148 30"
        height="30"
        width="148"
        aria-label="GOV.UK">
        <title>GOV.UK</title>
        <path d="M22.6 10.4c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m-5.9 6.7c-.9.4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4m10.8-3.7c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s0 2-1 2.4m3.3 4.8c-1 .4-2-.1-2.4-1-.4-.9.1-2 1-2.4.9-.4 2 .1 2.4 1s-.1 2-1 2.4M17 4.7l2.3 1.2V2.5l-2.3.7-.2-.2.9-3h-3.4l.9 3-.2.2c-.1.1-2.3-.7-2.3-.7v3.4L15 4.7c.1.1.1.2.2.2l-1.3 4c-.1.2-.1.4-.1.6 0 1.1.8 2 1.9 2.2h.7c1-.2 1.9-1.1 1.9-2.1 0-.2 0-.4-.1-.6l-1.3-4c-.1-.2 0-.2.1-.3m-7.6 5.7c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m-5 3c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s.1 2 1 2.4m-3.2 4.8c.9.4 2-.1 2.4-1 .4-.9-.1-2-1-2.4-.9-.4-2 .1-2.4 1s0 2 1 2.4m14.8 11c4.4 0 8.6.3 12.3.8 1.1-4.5 2.4-7 3.7-8.8l-2.5-.9c.2 1.3.3 1.9 0 2.7-.4-.4-.8-1.1-1.1-2.3l-1.2 4c.7-.5 1.3-.8 2-.9-1.1 2.5-2.6 3.1-3.5 3-1.1-.2-1.7-1.2-1.5-2.1.3-1.2 1.5-1.5 2.1-.1 1.1-2.3-.8-3-2-2.3 1.9-1.9 2.1-3.5.6-5.6-2.1 1.6-2.1 3.2-1.2 5.5-1.2-1.4-3.2-.6-2.5 1.6.9-1.4 2.1-.5 1.9.8-.2 1.1-1.7 2.1-3.5 1.9-2.7-.2-2.9-2.1-2.9-3.6.7-.1 1.9.5 2.9 1.9l.4-4.3c-1.1 1.1-2.1 1.4-3.2 1.4.4-1.2 2.1-3 2.1-3h-5.4s1.7 1.9 2.1 3c-1.1 0-2.1-.2-3.2-1.4l.4 4.3c1-1.4 2.2-2 2.9-1.9-.1 1.5-.2 3.4-2.9 3.6-1.9.2-3.4-.8-3.5-1.9-.2-1.3 1-2.2 1.9-.8.7-2.3-1.2-3-2.5-1.6.9-2.2.9-3.9-1.2-5.5-1.5 2-1.3 3.7.6 5.6-1.2-.7-3.1 0-2 2.3.6-1.4 1.8-1.1 2.1.1.2.9-.3 1.9-1.5 2.1-.9.2-2.4-.5-3.5-3 .6 0 1.2.3 2 .9l-1.2-4c-.3 1.1-.7 1.9-1.1 2.3-.3-.8-.2-1.4 0-2.7l-2.9.9C1.3 23 2.6 25.5 3.7 30c3.7-.5 7.9-.8 12.3-.8m28.3-11.6c0 .9.1 1.7.3 2.5.2.8.6 1.5 1 2.2.5.6 1 1.1 1.7 1.5.7.4 1.5.6 2.5.6.9 0 1.7-.1 2.3-.4s1.1-.7 1.5-1.1c.4-.4.6-.9.8-1.5.1-.5.2-1 .2-1.5v-.2h-5.3v-3.2h9.4V28H55v-2.5c-.3.4-.6.8-1 1.1-.4.3-.8.6-1.3.9-.5.2-1 .4-1.6.6s-1.2.2-1.8.2c-1.5 0-2.9-.3-4-.8-1.2-.6-2.2-1.3-3-2.3-.8-1-1.4-2.1-1.8-3.4-.3-1.4-.5-2.8-.5-4.3s.2-2.9.7-4.2c.5-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.6 2.6-.8 4.1-.8 1 0 1.9.1 2.8.3.9.2 1.7.6 2.4 1s1.4.9 1.9 1.5c.6.6 1 1.3 1.4 2l-3.7 2.1c-.2-.4-.5-.9-.8-1.2-.3-.4-.6-.7-1-1-.4-.3-.8-.5-1.3-.7-.5-.2-1.1-.2-1.7-.2-1 0-1.8.2-2.5.6-.7.4-1.3.9-1.7 1.5-.5.6-.8 1.4-1 2.2-.3.8-.4 1.9-.4 2.7zM71.5 6.8c1.5 0 2.9.3 4.2.8 1.2.6 2.3 1.3 3.1 2.3.9 1 1.5 2.1 2 3.4s.7 2.7.7 4.2-.2 2.9-.7 4.2c-.4 1.3-1.1 2.4-2 3.4-.9 1-1.9 1.7-3.1 2.3-1.2.6-2.6.8-4.2.8s-2.9-.3-4.2-.8c-1.2-.6-2.3-1.3-3.1-2.3-.9-1-1.5-2.1-2-3.4-.4-1.3-.7-2.7-.7-4.2s.2-2.9.7-4.2c.4-1.3 1.1-2.4 2-3.4.9-1 1.9-1.7 3.1-2.3 1.2-.5 2.6-.8 4.2-.8zm0 17.6c.9 0 1.7-.2 2.4-.5s1.3-.8 1.7-1.4c.5-.6.8-1.3 1.1-2.2.2-.8.4-1.7.4-2.7v-.1c0-1-.1-1.9-.4-2.7-.2-.8-.6-1.6-1.1-2.2-.5-.6-1.1-1.1-1.7-1.4-.7-.3-1.5-.5-2.4-.5s-1.7.2-2.4.5-1.3.8-1.7 1.4c-.5.6-.8 1.3-1.1 2.2-.2.8-.4 1.7-.4 2.7v.1c0 1 .1 1.9.4 2.7.2.8.6 1.6 1.1 2.2.5.6 1.1 1.1 1.7 1.4.6.3 1.4.5 2.4.5zM88.9 28 83 7h4.7l4 15.7h.1l4-15.7h4.7l-5.9 21h-5.7zm28.8-3.6c.6 0 1.2-.1 1.7-.3.5-.2 1-.4 1.4-.8.4-.4.7-.8.9-1.4.2-.6.3-1.2.3-2v-13h4.1v13.6c0 1.2-.2 2.2-.6 3.1s-1 1.7-1.8 2.4c-.7.7-1.6 1.2-2.7 1.5-1 .4-2.2.5-3.4.5-1.2 0-2.4-.2-3.4-.5-1-.4-1.9-.9-2.7-1.5-.8-.7-1.3-1.5-1.8-2.4-.4-.9-.6-2-.6-3.1V6.9h4.2v13c0 .8.1 1.4.3 2 .2.6.5 1 .9 1.4.4.4.8.6 1.4.8.6.2 1.1.3 1.8.3zm13-17.4h4.2v9.1l7.4-9.1h5.2l-7.2 8.4L148 28h-4.9l-5.5-9.4-2.7 3V28h-4.2V7zm-27.6 16.1c-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.7-1.2 2.7-2.7-1.2-2.7-2.7-2.7z"></path>
      </svg>
    </a>
  </div>
  <div class="govuk-header__content">
    <a href="#" class="govuk-header__link govuk-header__service-name">
      Service name
    </a>
  </div>
</div>
</header>
</div>
<div class="govuk-width-container">
<h1 class="govuk-heading-xl">Cookies on [service name]</h1>
<p class="govuk-body">Cookies are small text files that we save on your phone, tablet or computer when you use this service. We cannot use them to identify you.</p>
<p>Some cookies on [service name] are essential and others are optional.</p>
<h2 class="govuk-heading-l">Essential cookies</h2>
<div class="govuk-body" id="essential_cookies_desc2">
<p>Essential cookies are needed to make the service work. If you do not want us to use them you can turn off cookies in your web browser, but the service may not work properly.</p>
<p>We will not set any essential cookies until you start using the service.</p>
<details class="govuk-details" data-module="essential-cookies-details">
  <summary class="govuk-details__summary">
    <span class="govuk-details__summary-text">
      Essential cookies used by this service
    </span>
  </summary>
  <div class="govuk-details__text">
    <h3 class="govuk-heading-m" id="security_cookies_desc2">Security cookies</h3>
    <table class="govuk-table" aria-describedby="security_cookies_desc2">
      <thead class="govuk-table__header">
        <tr>
          <th scope="col" class="govuk-table__header">Name</th>
          <th scope="col" class="govuk-table__header">Purpose</th>
          <th scope="col" class="govuk-table__header">Expires</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 1</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 2</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
      </tbody>
    </table>
    <h3 class="govuk-heading-m" id="functional_cookies_desc2">Functional cookies</h3>
    <table class="govuk-table" aria-describedby="functional_cookies_desc2">
      <thead class="govuk-table__header">
        <tr>
          <th scope="col" class="govuk-table__header">Name</th>
          <th scope="col" class="govuk-table__header">Purpose</th>
          <th scope="col" class="govuk-table__header">Expires</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 1</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 2</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
      </tbody>
    </table>
    <h3 class="govuk-heading-m" id="performance_cookies_desc2">Performance cookies</h3>
    <table class="govuk-table" aria-describedby="performance_cookies_desc2">
      <thead class="govuk-table__header">
        <tr>
          <th scope="col" class="govuk-table__header">Name</th>
          <th scope="col" class="govuk-table__header">Purpose</th>
          <th scope="col" class="govuk-table__header">Expires</th>
        </tr>
      </thead>
      <tbody class="govuk-table__body">
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 1</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
        <tr scope="row" class="govuk-table__row">
          <td class="govuk-table__cell">Cookie 2</td>
          <td class="govuk-table__cell">Plain language description of cookie purpose</td>
          <td class="govuk-table__cell">Cookie duration</td>
        </tr>
      </tbody>
    </table>
  </div>
</details>
</div>
<div class="govuk-body" id="optional_cookies_desc2">
<h2 class="govuk-heading-l">Optional cookies</h2>
<p>Optional cookies help us to improve the service, but it will work without them. We will not use them without your permission and you can change your mind at any time.</p>
<form action="#">
  <h3 class="govuk-heading-m" id="google_analytics_cookies_desc2">Analytics cookies (Google Analytics)</h3>
  <p class="govuk-body">We use Google Analytics software to collect information about how you use this service and help us make it better. We do not allow Google to use or share this data.</p>
  <details class="govuk-details" data-module="analytics-cookies-details">
    <summary class="govuk-details__summary">
      <span class="govuk-details__summary-text">
        Analytics cookies used by this service
      </span>
    </summary>
    <div class="govuk-details__text">
      <table class="govuk-table" aria-describedby="google_analytics_cookies_desc2">
        <thead class="govuk-table__header">
          <tr>
            <th scope="col" class="govuk-table__header">Name</th>
            <th scope="col" class="govuk-table__header">Purpose</th>
            <th scope="col" class="govuk-table__header">Expires</th>
          </tr>
        </thead>
        <tbody class="govuk-table__body">
          <tr scope="row" class="govuk-table__row">
            <td class="govuk-table__cell">_ga</td>
            <td class="govuk-table__cell">Checks if you have visited before so we can count how many people use the service.</td>
            <td class="govuk-table__cell">2 years</td>
          </tr>
          <tr scope="row" class="govuk-table__row">
            <td class="govuk-table__cell">_ga_&lt;container-id&gt;</td>
            <td class="govuk-table__cell">Collects information about how you use the service so we can make it better.</td>
            <td class="govuk-table__cell">2 years</td>
          </tr>
        </tbody>
      </table>
    </div>
  </details>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--s govuk-visually-hidden">Can we use analytics cookies?</legend>
      <input value="" type="hidden" name="cookie_preferences_form[ga]" id="cookie_preferences_form_ga2">
      <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="google_analytics-3" name="google_analytics" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="google_analytics-3">
            Accept analytics cookies
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="google_analytics-4" name="google_analytics" type="radio" value="no" checked>
          <label class="govuk-label govuk-radios__label" for="google_analytics-4">
            Reject analytics cookies
          </label>
        </div>
      </div>
    </fieldset>
  </div>
  <hr class="govuk-!-margin-top-0 govuk-!-margin-bottom-4">
  <h3 class="govuk-heading-m" id="cookies_desc">[Category] cookies</h3>
  <p class="govuk-body">Introduction to this category of cookie</p>
  <details class="govuk-details" data-module="analytics-cookies-details">
    <summary class="govuk-details__summary">
      <span class="govuk-details__summary-text">
        [Category] cookies used by this service
      </span>
    </summary>
    <div class="govuk-details__text">
      <table class="govuk-table" aria-describedby="cookies_desc">
        <thead class="govuk-table__header">
          <tr>
            <th scope="col" class="govuk-table__header">Name</th>
            <th scope="col" class="govuk-table__header">Purpose</th>
            <th scope="col" class="govuk-table__header">Expires</th>
          </tr>
        </thead>
        <tbody class="govuk-table__body">
          <tr scope="row" class="govuk-table__row">
            <td class="govuk-table__cell">Cookie 1</td>
            <td class="govuk-table__cell">Plain language description of cookie purpose</td>
            <td class="govuk-table__cell">Cookie duration</td>
          </tr>
          <tr scope="row" class="govuk-table__row">
            <td class="govuk-table__cell">Cookie 1</td>
            <td class="govuk-table__cell">Plain language description of cookie purpose</td>
            <td class="govuk-table__cell">Cookie duration</td>
          </tr>
        </tbody>
      </table>
    </div>
  </details>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--s govuk-visually-hidden">Can we use [category] cookies?</legend>
      <input value="" type="hidden" name="cookie_preferences_form[consent]" id="cookie_preferences_form_consent">
      <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="consent" name="consent" type="radio" value="yes">
          <label class="govuk-label govuk-radios__label" for="consent">
            Accept [category] cookies
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="consent-2" name="consent" type="radio" value="no" checked>
          <label class="govuk-label govuk-radios__label" for="consent-2">
            Reject [category] cookies
          </label>
        </div>
      </div>
    </fieldset>
  </div>
  <button class="govuk-button">Save cookie settings</button>
</form>
</div>
</div>
<footer class="govuk-footer">
<div class="govuk-width-container">
<div class="govuk-footer__meta">
  <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
    <h2 class="govuk-visually-hidden">Support links</h2>
    <ul class="govuk-footer__inline-list">
      <li class="govuk-footer__inline-list-item">
        <a class="govuk-footer__link" href="#">
          Cookies
        </a>
      </li>
    </ul>
    <svg
      aria-hidden="true"
      focusable="false"
      class="govuk-footer__licence-logo"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 483.2 195.7"
      height="17"
      width="41">
      <path
        fill="currentColor"
        d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
    </svg>
    <span class="govuk-footer__licence-description">
      All content is available under the
      <a
        class="govuk-footer__link"
        href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
        rel="license">Open Government Licence v3.0</a>, except where otherwise stated
    </span>
  </div>
  <div class="govuk-footer__meta-item">
    <a
      class="govuk-footer__link govuk-footer__copyright-logo"
      href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">
      © Crown copyright
    </a>
  </div>
</div>
</div>
</footer>

{%- from "govuk/components/header/macro.njk" import govukHeader -%}
{%- from "govuk/components/footer/macro.njk" import govukFooter -%}

{% set pageTitle = "Cookies template" %}

{% block pageContent %}

<div class="govuk-!-margin-bottom-8">
{{ govukHeader({
  homepageUrl: "#",
  serviceName: "Service name",
  serviceUrl: "#"
}) }}
</div>

<div class="govuk-width-container">      
{% include "_cookie-content-2.njk" %}
</div>

{% block footer %}
{{ govukFooter({
  meta: {
    items: [
      {
        href: "#",
        text: "Cookies"
      }
    ]
  }
}) }}
{% endblock %}

{% endblock %}

Linking to the cookies page

Include a link to the cookies page in the footer of your service using the link text ‘Cookies’.

Technical guidance

Preselect radio buttons

Radios should be preselected with the ‘Reject’ option when a user visits this page for the first time.

This is different from the guidance for radio buttons on question pages. There is an issue in the GOV.UK Design System backlog discussing when preselecting radios can be useful.

Enable cookies without a page refresh

Cookies should be enabled without a page refresh after a user has accepted them. Enabling Google Analytics and Google Tag Manager cookies with a page refresh will mean referral traffic will be converted to direct traffic.

Remove existing cookies if consent changes

If the user accepts cookies but then updates their settings to reject them, any cookies already placed on the user’s device must be removed.

Cookie banner and JavaScript

The GOV.UK Cookie banner component explains what to do if JavaScript is not available. Most DWP services should follow the guidance in Option 3: If you set non-essential cookies, but only on the client.

Accessibility

There are concerns that some users of voice assist software will not be able to interact with the details component used on this page. In this case users might need to refer to the link as a button in order to interact with it.

The Cookies page is part of a wider set of elements including the Cookie banner component which together make up your service’s consent mechanism. Make sure that you consider all the elements of this journey in your accessibility audit.

For more about building accessible services see the DWP Accessibility Manual.

Research

A previous DWP pattern had separate policy and details pages, which meant that:

• it was difficult to use the standard GOV.UK cookie banner without making changes
• users were asked for a generic consent before they had seen details of what they were consenting to
• once they had viewed the details of the individual cookies, they needed to go to a different page to change their preference

Having the consent mechanism and the cookie details on the same page addresses these issues, but there is a risk of the consent mechanism going unnoticed at the bottom of a long page.

To mitigate this our template uses details components to make better use of vertical space, but it is still possible that some users will not find the ‘Save cookie settings’ button or understand the function of the page. We are interested in any research that relates to this issue.

Contribute

We would like to thank DWP performance analysis and content design colleagues for their help with drafting and reviewing this guidance.

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone. There is an open discussion on GitHub where you can share anything you think might be useful.

We are particularly interested in:

• whether mobile users are more likely to consent to cookies because the banner takes up more screen space
• how well people understand consent and cookies

Discuss Cookies page on GitHub

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk