Cookies page

About this pattern

A cookies page helps users to manage their personal data and consent for cookie use. It tells them what information you store on cookies on their device. It allows the users to review and change their settings for which cookies your site or service uses.

It is important to tell your users both:

• how your site or service will use cookies
• about any impacts on privacy from the cookies your site or service uses, such as:
  • what data your cookies could collect
  • how you or third parties could use that data

The law requires that sites and services both:

• tell users which cookies are being set on their devices
• give control to the user over these cookies

Identify and categorise cookies

You will need to audit the cookies on your site or service, so you can describe all the cookies to your users.

You should group the cookies into categories. Base the groups on what the cookies do so users can consent to cookies in batches.

For example on mygov.scot we have 3 categories of cookie for those:

• needed for the website to work (essential cookies)
• that remember your settings
• that measure website use

Find out more about auditing and categorising your cookies on GOV.UK.

Getting users’ consent

You do not need the user’s consent to set essential cookies. A cookie is ‘essential’ if the site or service will not work without it. Find out more about essential or strictly necessary cookies.

You must get the user’s consent before you set any cookies that are not essential. 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

Saving your users’ cookie settings

The cookies page uses a form with radio buttons for users to mark their preference. Users can select ‘on’ or ‘off’ for each category of the cookies. We use radio buttons because the user must make an exclusive (only one) choice. Load the page with the radio buttons set to ‘off’ on the user’s first visit. Users can click on the ’Save cookie preferences’ button at the bottom of the form to submit any changes they have made. If they’ve used your site or service before and set their preferences, load the page with those preferences selected.

<h2>Turn cookies on or off</h2>
<p>We use 3 main types of cookie on our website. You can choose which cookies you’re happy for us to use. Any data collected is anonymous.</p>
<div class="ds_!_margin-top--4  ds_!_margin-bottom--8" data-module="cookie-preferences" id="cookie-form">
 <form id="cookie-preferences">
  <div class="ds_question">
    <h3>Cookies needed for the website to work</h3>
    <p>These cookies do things like keep the website secure. They always need to be on.</p>
  </div>
  <div class="ds_question">
   <fieldset>
    <legend class="ds_!_margin--0"><h3>Cookies that remember your settings</h3></legend>
    <p>These cookies do things like remember pop-ups you’ve seen, so you're not shown them again.</p>
    <div class="ds_field-group">
     <div class="ds_radio">
      <input class="ds_radio__input" id="preferences-yes" name="cookie-preferences" type="radio" value="true" checked="true"> <label class="ds_radio__label" for="preferences-yes">On</label>
     </input></div>
     <div class="ds_radio">
      <input class="ds_radio__input" id="preferences-no" name="cookie-preferences" type="radio" value="false"> <label class="ds_radio__label" for="preferences-no">Off</label>
     </input></div>
    </div>
   </fieldset>
  </div>
  <div class="ds_question">
   <fieldset>
    <legend class="ds_!_margin--0"><h3>Cookies that measure website use</h3></legend>
    <p>These cookies store information about how you use our website, such as what you click on.</p>
    <div class="ds_field-group">
     <div class="ds_radio">
      <input class="ds_radio__input" id="statistics-yes" name="cookie-statistics" type="radio" value="true" checked="true"> <label class="ds_radio__label" for="statistics-yes">On</label>
     </input></div>
     <div class="ds_radio">
      <input class="ds_radio__input" id="statistics-no" name="cookie-statistics" type="radio" value="false"> <label class="ds_radio__label" for="statistics-no">Off</label>
     </input></div>
    </div>
   </fieldset>
  </div><button class="ds_button  ds_no-margin" type="submit">Save cookie preferences</button>
 </form>
</div>

You should display a confirmation message when the user clicks on the save button. This will let users know that their preferences have been saved.

When to use this pattern

Use a cookies page alongside the cookie banner on any and all sites or services which, both:

• make use of cookies
• are for the public to use

When not to use this pattern

Using a cookie banner and cookies page to manage consent on internal tools, such as an intranet, is not necessary. Your organisation most likely requires staff members to use these internal tools as a condition of their jobs.

Why we use this pattern

A cookies page will help you to comply with the Privacy and Electronic Communications Regulations (PECR).

Related components

Cookie banner

Evidence

The page combines informational and interactive (form) settings. We have not had negative feedback about the pattern from users on our live sites. Of those users that came to the settings page around half of them interact with the form and save their settings. Read about past user research and testing.

Website analytics

To understand user behaviour, you can track:

• clicks on links in the page
• form radio buttons
• form submits against the original page path
• the click URL, the click text or a data attribute for button clicks

Use the Design System’s ‘tracking’ script to add the data attributes automatically.

Live example

Cookies page on Design System (designsystem.gov.scot)

Cookies page on mygov.scot (mygov.scot)