Skip to main content

Help users to Control cookies

Important information:
You will need to delete the 'ons_cookie_message_displayed' cookie if you cannot see the banner
There are two parts to implementing cookies control within a service; cookies banner and cookies preferences page.

Cookies banner

<div class="ons-cookies-banner" role="region" aria-label="cookie banner">
  <div class="ons-container ons-cookies-banner__primary">
    <div class="ons-grid">
      <div class="ons-grid__col ons-col-8@m">
        <h2 class="ons-cookies-banner__title ons-u-mb-xs">Tell us whether you accept cookies</h2>
        <p class="ons-cookies-banner__desc">We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk. We use this information to make the website work as well as possible and improve our services.</p>
        <button type="button" class="ons-btn ons-btn--small ons-js-accept-cookies ons-u-mb-xs@xxs@s ons-cookies-banner__btn">
          <span class="ons-btn__inner">Accept all cookies</span>
        </button>
        <a href="#" role="button" class="ons-btn ons-btn--small ons-u-ml-no@xxs@s ons-cookies-banner__btn ons-btn--link ons-js-submit-btn">
          <span class="ons-btn__inner">Set cookie preferences
            <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
              <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>
  <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
    <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
      <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
        <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.</p>
      </div>
      <div class="ons-grid__col">
        <button type="button" class="ons-btn ons-btn--secondary ons-btn--small ons-js-hide-button">
          <span class="ons-btn__inner">Hide</span>
          <span class="ons-btn__context ons-u-vh">the cookie message</span>
        </button>
      </div>
    </div>
  </div>
</div>
{% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
{{
    onsCookiesBanner({
        "statementTitle": 'Tell us whether you accept cookies',
        "statementText": 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk. We use this information to make the website work as well as possible and improve our services.',
        "confirmationText": 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
        "secondaryButtonUrl": '#'
    })
}}
Name Type Required Description
ariaLabel string false Aria label for the cookie banner region (default is ‘cookies banner’)
statementTitle string true The title text for content for the cookie banner.
statementText string true The text content for the cookie banner. HTML is allowable to embed links
confirmationText string true The text content for the confirmation cookie message. HTML is allowable to embed links
primaryButtonText string false Text for the primary button (default is ‘Accept all cookies’)
secondaryButtonText string false Text for the secondary button (default is ‘Set cookie preferences’)
confirmationButtonText string false Text for the confirmation banner button (default is ‘Hide’)
confirmationButtonTextAria string false Additional descriptive text for the confirmation banner button to assist screen readers (default is ‘the cookie message’)
{% macro onsCookiesBanner(params) %}
    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default('cookie banner')}}">
        <div class="ons-container ons-cookies-banner__primary">
            <div class="ons-grid">
                <div class="ons-grid__col ons-col-8@m">
                  <h2 class="ons-cookies-banner__title ons-u-mb-xs">{{ params.statementTitle }}</h2>
                  <p class="ons-cookies-banner__desc">{{ params.statementText | safe }}</p>
                  {% from "components/button/_macro.njk" import onsButton %}
                  {{
                      onsButton({
                          "type": 'button',
                          "text": params.primaryButtonText | default('Accept all cookies'),
                          "classes": 'ons-btn--small ons-js-accept-cookies ons-u-mb-xs@xxs@s ons-cookies-banner__btn'
                      })
                  }}
                  {{
                      onsButton({
                          "type": 'button',
                          "url": params.secondaryButtonUrl,
                          "text": params.secondaryButtonText | default('Set cookie preferences'),
                          "classes": 'ons-btn--small ons-u-ml-no@xxs@s ons-cookies-banner__btn'
                      })
                  }}
                </div>
            </div>
        </div>
        <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
            <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
              <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
                <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">{{ params.confirmationText | safe }}</p>
              </div>
              <div class="ons-grid__col">
                {{
                    onsButton({
                        "type": 'button',
                        "text": params.confirmationButtonText | default('Hide'),
                        "buttonContext": params.confirmationButtonTextAria | default('the cookie message'),
                        "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
                    })
                }}
              </div>
            </div>
        </div>
    </div>
{% endmacro %}
.ons-cookies-banner {
  background: $color-banner-bg;
  display: none;
  padding: 1rem 0;

  &__title {
    color: $color-text;
  }

  &__desc {
    color: $color-text;
    margin-bottom: 1rem;
    word-break: break-word;
  }

  &__btn {
    @include mq(xxs, 499px) {
      display: block;
      width: 100%;
    }
  }
}

How to use

The cookies banner must be placed directly above the ONS header at the very top of the page.

It will display if the user hasn’t accepted any ONS cookies via the banner or the cookie preferences page.

How it works

Cookies are grouped by type and have a default boolean value. All but essential cookies are off by default. An initial cookie is set ons_cookie_policy { essential: true, settings: false, usage: false, campaigns: false }

ons_cookie_policy will update when a user accepts all cookies or makes changes via the cookies preferences page. Essential cookies default to true/on as they allow us to set important cookies such as session cookies that allow a service to work.

Individual cookies need to be added to the cookies-functions.js with key being the cookie name and the value being the cookie group, for example, _ga: 'usage'.

When the user has either accepted cookies or updated cookies preferences another cookie is set ons_cookie_message_displayed: true.

This cookie prevents the banner being displayed while the cookie is present.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Service name</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" media="print" href="/css/print.css">
    <meta name="theme-color" content="#206095" />
    <!-- Favicons -->
    <meta name="msapplication-config" content="/favicons/browserconfig.json">
    <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico">
    <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#000000">
    <link rel="apple-touch-icon" type="image/png" href="/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="/favicons/manifest.json">
    <!-- Google Tag Manager -->
    <script>
      function loadGTM() {
        (function(w, d, s, l, i) {
          w[l] = w[l] || [];
          w[l].push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
          });
          var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s),
            dl = l != 'dataLayer' ? '&l=' + l : '';
          j.async = true;
          j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl + '&gtm_auth=5Sz7OiVp0XSVwsUFunGpog&amp;gtm_preview=env-12&gtm_cookies_win=x';
          f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-TLWR59T');
      }
      var a = /^(.*)?\s*'usage':true\s*[^;]+(.*)?$/;
      if (document.cookie.match(a)) {
        loadGTM();
      }
    </script>
    <!-- End Google Tag Manager -->
    <script>
      if (!navigator.onLine) {
        console.log('You\'re offline');
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = '/css/census.css';
        document.head.appendChild(link);
      }
    </script>
  </head>
  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' : 'ons-js-enabled');
    </script>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TLWR59T&gtm_auth=5Sz7OiVp0XSVwsUFunGpog&amp;gtm_preview=env-12&gtm_cookies_win=x" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-link" href="#main-content">Skip to main content</a>
        <div class="ons-cookies-banner" role="region" aria-label="cookie banner">
          <div class="ons-container ons-cookies-banner__primary">
            <div class="ons-grid">
              <div class="ons-grid__col ons-col-8@m">
                <h2 class="ons-cookies-banner__title ons-u-mb-xs">Tell us whether you accept cookies</h2>
                <p class="ons-cookies-banner__desc">We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk. We use this information to make the website work as well as possible and improve our services.</p>
                <button type="button" class="ons-btn ons-btn--small ons-js-accept-cookies ons-u-mb-xs@xxs@s ons-cookies-banner__btn">
                  <span class="ons-btn__inner">Accept all cookies</span>
                </button>
                <a href="#" role="button" class="ons-btn ons-btn--small ons-u-ml-no@xxs@s ons-cookies-banner__btn ons-btn--link ons-js-submit-btn">
                  <span class="ons-btn__inner">Set cookie preferences
                    <svg class="ons-svg-icon ons-u-ml-xs" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                      <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                    </svg>
                  </span>
                </a>
              </div>
            </div>
          </div>
          <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
            <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
              <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
                <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.</p>
              </div>
              <div class="ons-grid__col">
                <button type="button" class="ons-btn ons-btn--secondary ons-btn--small ons-js-hide-button">
                  <span class="ons-btn__inner">Hide</span>
                  <span class="ons-btn__context ons-u-vh">the cookie message</span>
                </button>
              </div>
            </div>
          </div>
        </div>
        <header class="ons-header " role="banner">
          <div class="ons-header__top">
            <div class="ons-container">
              <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap ">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__logo--large">
                    <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                      <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                      <path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                      <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                      <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                      <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                      <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                      <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                      <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                      <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                      <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                      <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                      <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                      <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                      <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                      <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                      <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                      <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                      <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                      <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                      <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                      <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                      <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                      <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                      <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                      <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                      <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                      <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                      <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                      <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                      <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                    </svg>
                  </div>
                  <div class="ons-header__logo--small">
                    <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116">
                      <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                      <path class="ons-svg-logo--accent" d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                      <path d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                      <path d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <div class="ons-header__title">Service name</div>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container ">
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-8@m">
              <main id="main-content" class="ons-page__main ">
                <div class="ons-page__body">
                  <h1 class="ons-u-fs-xxl">Cookies on census.gov.uk</h1>
                  <div class="ons-panel ons-panel--success ons-panel--no-title ons-u-mb-m ons-u-d-no ons-cookies-confirmation-message">
                    <span class="ons-u-vh">Completed: </span>
                    <span class="ons-panel__icon ons-u-fs-xl">
                      <svg class="ons-svg-icon ons-svg-icon--xl " viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                        <path d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z" transform="translate(-1.51 -3.04)" />
                      </svg>
                    </span>
                    <div class="ons-panel__body ons-svg-icon-margin--xl">
                      <h2>Your cookie settings have been saved</h2>
                      <p class="ons-u-mb-no">Some parts of the census may use additional cookies and will have their own cookie policy and banner.</p>
                      <a class="ons-js-return-link ons-u-mt-s ons-u-dib" href="#0">Return to previous page</a>
                    </div>
                  </div>
                  <p>Cookies are small files saved on your phone, tablet or computer when you visit a website.</p>
                  <p>We use cookies to store information about how you use the census website, such as the pages you visit.</p>
                  <h2>Cookie settings</h2>
                  <div class="ons-u-db-no-js_enabled">
                    <p>We use JavaScript to set our cookies. Javascript is not running on your browser so you cannot change your settings.</p>
                    <p>You can try:</p>
                    <ul>
                      <li>turning on JavaScript in your browser</li>
                      <li>reloading the page in case there was a temporary fault with JavaScript</li>
                    </ul>
                  </div>
                  <div class="ons-u-db-no-js_disabled">
                    <p>We use three types of cookie. You can choose which cookies you're happy for us to use.</p>
                    <form data-module="cookie-settings">
                      <h3>Cookies that measure website use</h3>
                      <p>We use Google Analytics to measure how you use the website so we can improve it based on user needs. Google Analytics sets cookies that store anonymised information about:</p>
                      <ul>
                        <li>how you got to the site</li>
                        <li>the pages you visit on census.gov.uk and how long you spend on each page</li>
                        <li>what you click on while you're visiting the site</li>
                      </ul>
                      <div id="cookies-measure-website-use-details" class="ons-collapsible ons-js-collapsible ons-u-mb-s" data-btn-close="Hide this">
                        <div class="ons-collapsible__heading ons-js-collapsible-heading">
                          <div class="ons-collapsible__controls">
                            <div class="ons-collapsible__title">Learn more about these Google Analytics cookies</div>
                            <span class="ons-collapsible__icon">
                              <svg class="ons-svg-icon " viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                                <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                              </svg>
                            </span>
                          </div>
                        </div>
                        <div id="cookies-measure-website-use-details-content" class="ons-collapsible__content ons-js-collapsible-content">
                          <table class="ons-table ">
                            <thead class="ons-table__head">
                              <tr class="ons-table__row">
                                <th scope="col" class="ons-table__header ">
                                  <span>Name</span>
                                </th>
                                <th scope="col" class="ons-table__header ">
                                  <span>Purpose</span>
                                </th>
                                <th scope="col" class="ons-table__header ">
                                  <span>Expires</span>
                                </th>
                              </tr>
                            </thead>
                            <tbody class="ons-table__body">
                              <tr class="ons-table__row">
                                <td class="ons-table__cell ">
                                  <code>_ga</code>
                                </td>
                                <td class="ons-table__cell ">
                                  This helps us count how many people visit census.gov.uk by tracking if you’ve visited before
                                </td>
                                <td class="ons-table__cell ">
                                  2 years
                                </td>
                              </tr>
                              <tr class="ons-table__row">
                                <td class="ons-table__cell ">
                                  <code>_gid</code>
                                </td>
                                <td class="ons-table__cell ">
                                  This helps us count how many people visit census.gov.uk by tracking if you’ve visited before
                                </td>
                                <td class="ons-table__cell ">
                                  24 hours
                                </td>
                              </tr>
                              <tr class="ons-table__row">
                                <td class="ons-table__cell ">
                                  <code>_gat</code>
                                </td>
                                <td class="ons-table__cell ">
                                  Used to manage the rate at which page view requests are made
                                </td>
                                <td class="ons-table__cell ">
                                  10 minutes
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <button type="button" class="ons-btn ons-js-collapsible-button ons-u-d-no ons-btn--secondary ons-btn--small">
                            <span class="ons-btn__inner ons-js-collapsible-button-inner">Hide this</span>
                            <span class="ons-btn__context ons-u-vh">Learn more about these Google Analytics cookies undefined</span>
                          </button>
                        </div>
                      </div>
                      <p>We do not allow Google to use or share the data about how you use this site.</p>
                      <div class="ons-u-mb-s">
                        <fieldset id="cookies-measure-website-use" class="ons-fieldset">
                          <legend class="ons-fieldset__legend ons-u-vh">
                            Do you want to allow usage tracking?
                          </legend>
                          <div class="ons-radios__items">
                            <p class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="on-1" class="ons-radio__input ons-js-radio" value="on" name="cookies-usage">
                                <label class="ons-radio__label  " for="on-1" id="on-1-label">On
                                </label>
                              </span>
                            </p>
                            <br>
                            <p class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="off-1" class="ons-radio__input ons-js-radio" value="off" name="cookies-usage">
                                <label class="ons-radio__label  " for="off-1" id="off-1-label">Off
                                </label>
                              </span>
                            </p>
                          </div>
                        </fieldset>
                      </div>
                      <p>This selection will expire after two years.</p>
                      <h3>Cookies that help with our communications</h3>
                      <p>Some of our pages may contain content from other sites, like YouTube, which may set their own cookies. These sites are sometimes called “third party” services. This tells us how many people are seeing the content and whether it’s useful.</p>
                      <p>In addition, if you share a link to a census.gov.uk page, the service you share it on may set a cookie. We have no control over cookies set on other websites – you can turn them off, but not through us.</p>
                      <h4>YouTube videos</h4>
                      <p>We use YouTube to show videos on some census.gov.uk pages. YouTube sets cookies when you visit one of these pages.</p>
                      <div id="cookies-measure-website-comms-details" class="ons-collapsible ons-js-collapsible ons-u-mb-s" data-btn-close="Hide this">
                        <div class="ons-collapsible__heading ons-js-collapsible-heading">
                          <div class="ons-collapsible__controls">
                            <div class="ons-collapsible__title">Learn more about these YouTube cookies</div>
                            <span class="ons-collapsible__icon">
                              <svg class="ons-svg-icon " viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                                <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                              </svg>
                            </span>
                          </div>
                        </div>
                        <div id="cookies-measure-website-comms-details-content" class="ons-collapsible__content ons-js-collapsible-content">
                          <table class="ons-table ">
                            <thead class="ons-table__head">
                              <tr class="ons-table__row">
                                <th scope="col" class="ons-table__header ">
                                  <span>Name</span>
                                </th>
                                <th scope="col" class="ons-table__header ">
                                  <span>Purpose</span>
                                </th>
                                <th scope="col" class="ons-table__header ">
                                  <span>Expires</span>
                                </th>
                              </tr>
                            </thead>
                            <tbody class="ons-table__body">
                              <tr class="ons-table__row">
                                <td class="ons-table__cell ">
                                  <code>_use_hitbox</code>
                                </td>
                                <td class="ons-table__cell ">
                                  This is a randomly generated number that identifies your browser
                                </td>
                                <td class="ons-table__cell ">
                                  When you close your browser
                                </td>
                              </tr>
                              <tr class="ons-table__row">
                                <td class="ons-table__cell ">
                                  <code>VISITOR_INFO1_LIVE</code>
                                </td>
                                <td class="ons-table__cell ">
                                  Lets Youtube count the views of embedded Youtube videos
                                </td>
                                <td class="ons-table__cell ">
                                  9 months
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <button type="button" class="ons-btn ons-js-collapsible-button ons-u-d-no ons-btn--secondary ons-btn--small">
                            <span class="ons-btn__inner ons-js-collapsible-button-inner">Hide this</span>
                            <span class="ons-btn__context ons-u-vh">Learn more about these YouTube cookies undefined</span>
                          </button>
                        </div>
                      </div>
                      <fieldset id="cookies-measure-website-comms" class="ons-fieldset">
                        <legend class="ons-fieldset__legend ons-u-vh">
                          Do you want to allow communications tracking?
                        </legend>
                        <div class="ons-radios__items">
                          <p class="ons-radios__item">
                            <span class="ons-radio">
                              <input type="radio" id="on-2" class="ons-radio__input ons-js-radio" value="on" name="cookies-campaigns">
                              <label class="ons-radio__label  " for="on-2" id="on-2-label">On
                              </label>
                            </span>
                          </p>
                          <br>
                          <p class="ons-radios__item">
                            <span class="ons-radio">
                              <input type="radio" id="off-2" class="ons-radio__input ons-js-radio" value="off" name="cookies-campaigns">
                              <label class="ons-radio__label  " for="off-2" id="off-2-label">Off
                              </label>
                            </span>
                          </p>
                        </div>
                      </fieldset>
                      <h3>Cookies that remember your settings</h3>
                      <p>These cookies do things like remember your preferences and the choices you make, to personalise your experience of using the site.</p>
                      <fieldset id="cookies-measure-website-settings" class="ons-fieldset">
                        <legend class="ons-fieldset__legend ons-u-vh">
                          Do you want to allow settings?
                        </legend>
                        <div class="ons-radios__items">
                          <p class="ons-radios__item">
                            <span class="ons-radio">
                              <input type="radio" id="on-3" class="ons-radio__input ons-js-radio" value="on" name="cookies-settings">
                              <label class="ons-radio__label  " for="on-3" id="on-3-label">On
                              </label>
                            </span>
                          </p>
                          <br>
                          <p class="ons-radios__item">
                            <span class="ons-radio">
                              <input type="radio" id="off-3" class="ons-radio__input ons-js-radio" value="off" name="cookies-settings">
                              <label class="ons-radio__label  " for="off-3" id="off-3-label">Off
                              </label>
                            </span>
                          </p>
                        </div>
                      </fieldset>
                      <h3>Strictly necessary cookies</h3>
                      <p>These essential cookies do things like:</p>
                      <ul>
                        <li>remember the notifications you've seen so we do not show them to you again</li>
                        <li>remember your progress through a form (for example, the census online)</li>
                      </ul>
                      <p>They always need to be on.</p>
                      <div id="cookies-essential-details" class="ons-collapsible ons-js-collapsible ons-u-mb-l" data-btn-close="Hide this">
                        <div class="ons-collapsible__heading ons-js-collapsible-heading">
                          <div class="ons-collapsible__controls">
                            <div class="ons-collapsible__title">Learn more about these essential cookies</div>
                            <span class="ons-collapsible__icon">
                              <svg class="ons-svg-icon " viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
                                <path d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z" transform="translate(-5.02 -1.59)" />
                              </svg>
                            </span>
                          </div>
                        </div>
                        <div id="cookies-essential-details-content" class="ons-collapsible__content ons-js-collapsible-content">
                          <h4>Your progress when filling in a survey or questionnaire</h4>
                          <p>We’ll set a cookie to remember your progress through a survey or questionnaire. These cookies do not store your personal data and are deleted once you’ve completed the survey or questionnaire.</p>
                          <table class="ons-table ">
                            <thead class="ons-table__head">
                              <tr class="ons-table__row">
                                <th scope="col" class="ons-table__header ">
                                  <span>Name</span>
                                </th>
                                <th scope="col" class="ons-table__header ">
                                  <span>Purpose</span>
                                </th>
                                <th scope="col" class="ons-table__header ">
                                  <span>Expires</span>
                                </th>
                              </tr>
                            </thead>
                            <tbody class="ons-table__body">
                              <tr class="ons-table__row">
                                <td class="ons-table__cell ">
                                  <code>licensing_session</code>
                                </td>
                                <td class="ons-table__cell ">
                                  Set to remember information you’ve entered into a form
                                </td>
                                <td class="ons-table__cell ">
                                  When you close your browser
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <h4>Cookie message</h4>
                          <p>You may see a banner when you visit census.gov.uk inviting you to accept cookies or review your settings. We’ll set cookies so that your computer knows you’ve seen it and not to show it again, and also to store your settings.</p>
                          <table class="ons-table ">
                            <thead class="ons-table__head">
                              <tr class="ons-table__row">
                                <th scope="col" class="ons-table__header ">
                                  <span>Name</span>
                                </th>
                                <th scope="col" class="ons-table__header ">
                                  <span>Purpose</span>
                                </th>
                                <th scope="col" class="ons-table__header ">
                                  <span>Expires</span>
                                </th>
                              </tr>
                            </thead>
                            <tbody class="ons-table__body">
                              <tr class="ons-table__row">
                                <td class="ons-table__cell ">
                                  <code>ons_cookie_message_displayed</code>
                                </td>
                                <td class="ons-table__cell ">
                                  Lets us know that you’ve seen our cookie message
                                </td>
                                <td class="ons-table__cell ">
                                  1 year
                                </td>
                              </tr>
                              <tr class="ons-table__row">
                                <td class="ons-table__cell ">
                                  <code>ons_cookie_policy</code>
                                </td>
                                <td class="ons-table__cell ">
                                  Saves your cookie consent settings
                                </td>
                                <td class="ons-table__cell ">
                                  1 year
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <button type="button" class="ons-btn ons-js-collapsible-button ons-u-d-no ons-btn--secondary ons-btn--small">
                            <span class="ons-btn__inner ons-js-collapsible-button-inner">Hide this</span>
                            <span class="ons-btn__context ons-u-vh">Learn more about these essential cookies undefined</span>
                          </button>
                        </div>
                      </div>
                      <button type="submit" class="ons-btn">
                        <span class="ons-btn__inner">Save changes</span>
                      </button>
                    </form>
                  </div>
                </div>
              </main>
            </div>
          </div>
        </div>
      </div>
      <footer class="ons-footer">
        <div class="ons-footer__body ons-page__footer" data-analytics="footer">
          <div class="ons-container">
            <div class="ons-grid">
              <!-- Rows -->
              <div class="ons-grid__col">
                <ul class="ons-list ons-list--bare ons-list--inline">
                  <li class="ons-list__item">
                    <a href="#0" class="ons-list__link  ">Accessibility</a>
                  </li>
                  <li class="ons-list__item">
                    <a href="#0" class="ons-list__link  ">Privacy</a>
                  </li>
                </ul>
              </div>
              <div class="ons-grid__col ons-u-mb-m">
                <hr class="ons-footer__hr">
              </div>
              <div class="ons-grid__col">
                <svg class="ons-svg-logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60">
                  <title id="ons-logo-en-alt">Office for National Statistics</title>
                  <path class="ons-svg-logo--accent" d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                  <path d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                  <path d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                  <path d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                  <path d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                  <path d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                  <path d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                  <path d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                  <path d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                  <path d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                  <path d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                  <path d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <path d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                  <path d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                  <path d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                  <polygon points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                  <path d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                  <path d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                  <path d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                  <path d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                  <path d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                  <path d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                  <path d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                  <path d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                  <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                </svg>
              </div>
            </div>
            <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
            </div>
          </div>
        </div>
      </footer>
    </div>
    <script>
      (function() {
        var s = '/scripts/main.js,/scripts/patternlib.js'.split(','),
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
  </body>
</html>
{% extends "foundations/layout/page-template/_template.njk" %}
{% from "components/radios/_macro.njk" import onsRadios %}
{% from "components/button/_macro.njk" import onsButton %}
{% from "components/panel/_macro.njk" import onsPanel %}
{% from "components/collapsible/_macro.njk" import onsCollapsible %}
{% from "components/table/_macro.njk" import onsTable %}
{% block head %}
    <!-- Google Tag Manager -->
    <script>
        function loadGTM() {
            (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl+'&gtm_auth=5Sz7OiVp0XSVwsUFunGpog&amp;gtm_preview=env-12&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-TLWR59T');
        }
        var a = /^(.*)?\s*'usage':true\s*[^;]+(.*)?$/;
        if (document.cookie.match(a)) {
            loadGTM();
        }
    </script>
    <!-- End Google Tag Manager -->

    <script>
        if (!navigator.onLine) {
            console.log('You\'re offline');
            const link  = document.createElement('link');
            link.rel  = 'stylesheet';
            link.href = '/css/census.css';

            document.head.appendChild(link);
        }
    </script>
{% endblock %}
{% block bodyStart %}
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TLWR59T&gtm_auth=5Sz7OiVp0XSVwsUFunGpog&amp;gtm_preview=env-12&gtm_cookies_win=x"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{% endblock %}
{% block preHeader %}
{% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
{{
    onsCookiesBanner({
        "statementTitle": 'Tell us whether you accept cookies',
        "statementText": 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk. We use this information to make the website work as well as possible and improve our services.',
        "confirmationText": 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
        "secondaryButtonUrl": '#'
    })
}}
{% endblock %}
{% set pageConfig = {
    "title": "Service name",
    "footer": {
        "rows": [
            {
                "itemsList": [
                    {
                        "text": "Accessibility",
                        "url": "#0"
                    },
                    {
                        "text": "Privacy",
                        "url": "#0"
                    }
                ]
            }
        ]
    }
} %}

{% block main %}
    <div class="ons-page__body">
        <h1 class="ons-u-fs-xxl">Cookies on census.gov.uk</h1>
        {% call onsPanel({
            "classes": "ons-u-mb-m ons-u-d-no ons-cookies-confirmation-message",
            "type": "success",
            "iconType": "check",
            "iconSize": "xl"
        }) %}
            <h2>Your cookie settings have been saved</h2>
            <p class="ons-u-mb-no">Some parts of the census may use additional cookies and will have their own cookie policy and banner.</p>
            <a class="ons-js-return-link ons-u-mt-s ons-u-dib" href="#0">Return to previous page</a>
        {% endcall %}

        <p>Cookies are small files saved on your phone, tablet or computer when you visit a website.</p>
        <p>We use cookies to store information about how you use the census website, such as the pages you visit.</p>
        <h2>Cookie settings</h2>
        <div class="ons-u-db-no-js_enabled">
            <p>We use JavaScript to set our cookies. Javascript is not running on your browser so you cannot change your settings.</p>
            <p>You can try:</p>
            <ul>
                <li>turning on JavaScript in your browser</li>
                <li>reloading the page in case there was a temporary fault with JavaScript</li>
            </ul>
        </div>
        <div class="ons-u-db-no-js_disabled">
            <p>We use three types of cookie. You can choose which cookies you're happy for us to use.</p>

            <form data-module="cookie-settings">
                <h3>Cookies that measure website use</h3>
                <p>We use Google Analytics to measure how you use the website so we can improve it based on user needs. Google Analytics sets cookies that store anonymised information about:</p>
                <ul>
                    <li>how you got to the site</li>
                    <li>the pages you visit on census.gov.uk and how long you spend on each page</li>
                    <li>what you click on while you're visiting the site</li>
                </ul>
                {% call onsCollapsible({
                    "id": "cookies-measure-website-use-details",
                    "classes": "ons-u-mb-s",
                    "title": "Learn more about these Google Analytics cookies",
                    "button": {
                        "close": "Hide this"
                    }
                }) %}
                    {{
                        onsTable({
                            "ths": [
                                {
                                    "value": "Name"
                                },
                                {
                                    "value": "Purpose"
                                },
                                {
                                    "value": "Expires"
                                }
                            ],
                            "trs": [
                                {
                                    "tds": [
                                        {
                                            "value": "<code>_ga</code>"
                                        },
                                        {
                                            "value": 'This helps us count how many people visit census.gov.uk by tracking if you’ve visited before'
                                        },
                                        {
                                            "value": "2 years"
                                        }
                                    ]
                                },
                                {
                                    "tds": [
                                        {
                                            "value": "<code>_gid</code>"
                                        },
                                        {
                                            "value": 'This helps us count how many people visit census.gov.uk by tracking if you’ve visited before'
                                        },
                                        {
                                            "value": "24 hours"
                                        }
                                    ]
                                },
                                {
                                    "tds": [
                                        {
                                            "value": "<code>_gat</code>"
                                        },
                                        {
                                            "value": 'Used to manage the rate at which page view requests are made'
                                        },
                                        {
                                            "value": "10 minutes"
                                        }
                                    ]
                                }
                            ]
                        })
                    }}
                {% endcall %}
                <p>We do not allow Google to use or share the data about how you use this site.</p>
                <div class="ons-u-mb-s">
                    {{ onsRadios({
                        "id": "cookies-measure-website-use",
                        "name": "cookies-usage",
                        "legend": "Do you want to allow usage tracking?",
                        "legendClasses": "ons-u-vh",
                        "radios": [
                            {
                                "id": "on-1",
                                "label": {
                                    "text": "On"
                                },
                                "value": "on"
                            },
                            {
                                "id": "off-1",
                                "label": {
                                    "text": "Off"
                                },
                                "value": "off"
                            }
                        ]
                    }) }}
                </div>
                <p>This selection will expire after two years.</p>

                <h3>Cookies that help with our communications</h3>
                <p>Some of our pages may contain content from other sites, like YouTube, which may set their own cookies. These sites are sometimes called “third party” services. This tells us how many people are seeing the content and whether it’s useful.</p>
                <p>In addition, if you share a link to a census.gov.uk page, the service you share it on may set a cookie. We have no control over cookies set on other websites – you can turn them off, but not through us.</p>
                <h4>YouTube videos</h4>
                <p>We use YouTube to show videos on some census.gov.uk pages. YouTube sets cookies when you visit one of these pages.</p>
                {% call onsCollapsible({
                    "id": "cookies-measure-website-comms-details",
                    "classes": "ons-u-mb-s",
                    "title": "Learn more about these YouTube cookies",
                    "button": {
                        "close": "Hide this"
                    }
                }) %}
                    {{
                        onsTable({
                            "ths": [
                                {
                                    "value": "Name"
                                },
                                {
                                    "value": "Purpose"
                                },
                                {
                                    "value": "Expires"
                                }
                            ],
                            "trs": [
                                {
                                    "tds": [
                                        {
                                            "value": "<code>_use_hitbox</code>"
                                        },
                                        {
                                            "value": 'This is a randomly generated number that identifies your browser'
                                        },
                                        {
                                            "value": "When you close your browser"
                                        }
                                    ]
                                },
                                {
                                    "tds": [
                                        {
                                            "value": "<code>VISITOR_INFO1_LIVE</code>"
                                        },
                                        {
                                            "value": 'Lets Youtube count the views of embedded Youtube videos'
                                        },
                                        {
                                            "value": "9 months"
                                        }
                                    ]
                                }
                            ]
                        })
                    }}
                {% endcall %}
                {{ onsRadios({
                    "id": "cookies-measure-website-comms",
                    "name": "cookies-campaigns",
                    "legend": "Do you want to allow communications tracking?",
                    "legendClasses": "ons-u-vh",
                    "radios": [
                        {
                            "id": "on-2",
                            "label": {
                                "text": "On"
                            },
                            "value": "on"
                        },
                        {
                            "id": "off-2",
                            "label": {
                                "text": "Off"
                            },
                            "value": "off"
                        }
                    ]
                }) }}

                <h3>Cookies that remember your settings</h3>
                <p>These cookies do things like remember your preferences and the choices you make, to personalise your experience of using the site.</p>
                {{ onsRadios({
                    "id": "cookies-measure-website-settings",
                    "name": "cookies-settings",
                    "legend": "Do you want to allow settings?",
                    "legendClasses": "ons-u-vh",
                    "radios": [
                        {
                            "id": "on-3",
                            "label": {
                                "text": "On"
                            },
                            "value": "on"
                        },
                        {
                            "id": "off-3",
                            "label": {
                                "text": "Off"
                            },
                            "value": "off"
                        }
                    ]
                }) }}
                <h3>Strictly necessary cookies</h3>
                <p>These essential cookies do things like:</p>
                <ul>
                    <li>remember the notifications you've seen so we do not show them to you again</li>
                    <li>remember your progress through a form (for example, the census online)</li>
                </ul>
                <p>They always need to be on.</p>
                {% call onsCollapsible({
                    "id": "cookies-essential-details",
                    "classes": "ons-u-mb-l",
                    "title": "Learn more about these essential cookies",
                    "button": {
                        "close": "Hide this"
                    }
                }) %}
                    <h4>Your progress when filling in a survey or questionnaire</h4>
                    <p>We’ll set a cookie to remember your progress through a survey or questionnaire. These cookies do not store your personal data and are deleted once you’ve completed the survey or questionnaire.</p>
                    {{
                        onsTable({
                            "ths": [
                                {
                                    "value": "Name"
                                },
                                {
                                    "value": "Purpose"
                                },
                                {
                                    "value": "Expires"
                                }
                            ],
                            "trs": [
                                {
                                    "tds": [
                                        {
                                            "value": "<code>licensing_session</code>"
                                        },
                                        {
                                            "value": 'Set to remember information you’ve entered into a form'
                                        },
                                        {
                                            "value": "When you close your browser"
                                        }
                                    ]
                                }
                            ]
                        })
                    }}
                    <h4>Cookie message</h4>
                    <p>You may see a banner when you visit census.gov.uk inviting you to accept cookies or review your settings. We’ll set cookies so that your computer knows you’ve seen it and not to show it again, and also to store your settings.</p>
                    {{
                        onsTable({
                            "ths": [
                                {
                                    "value": "Name"
                                },
                                {
                                    "value": "Purpose"
                                },
                                {
                                    "value": "Expires"
                                }
                            ],
                            "trs": [
                                {
                                    "tds": [
                                        {
                                            "value": "<code>ons_cookie_message_displayed</code>"
                                        },
                                        {
                                            "value": 'Lets us know that you’ve seen our cookie message'
                                        },
                                        {
                                            "value": "1 year"
                                        }
                                    ]
                                },
                                {
                                    "tds": [
                                        {
                                            "value": "<code>ons_cookie_policy</code>"
                                        },
                                        {
                                            "value": 'Saves your cookie consent settings'
                                        },
                                        {
                                            "value": "1 year"
                                        }
                                    ]
                                }
                            ]
                        })
                    }}
                {% endcall %}
                {{
                    onsButton({
                        "type": 'submit',
                        "text": 'Save changes'
                    })
                }}

            </form>
        </div>
    </div>
{% endblock %}

How to use

The preferences page uses groups of radio buttons which allow a user to allow or disallow cookies to be set. Each group of radios must contain a name attribute prefixed with cookies- following with cookieType name, for example, cookies-campaigns. This allows the javascript to set the appropriate cookies.

If javascript is disabled a message is displayed explaining that javascript is required to set and change cookies.

When the form is submitted a success panel is shown to tell the user that their preferences have been updated. The form is handled by javascript.

Help improve this pattern

Let us know how we could improve this pattern or share your user research findings. Discuss the ‘Control cookies’ pattern on GitHub