TNA Frontend Cookie Banner

Use the cookie banner from TNA Frontend in your service.

HTML

<section class="tna-cookie-banner" data-module="tna-cookie-banner" data-policies="" data-preferenceskey="" data-policieskey="" data-domain="myservice.nationalarchives.gov.uk" data-path="/" data-insecure="false" aria-label="Cookies on my service" hidden>
  <div class="tna-container">
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--prompt">
      <h2 class="tna-heading-m">This website uses cookies</h2>
      <p>We use some essential cookies to make this service work.</p>
      <p>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="accept">
          Accept cookies
        </button>
        <button class="tna-button" type="button" value="reject">
          Reject cookies
        </button>
        <a href="/cookies" class="tna-button tna-button--plain">
          Set cookie preferences
        </a>
      </div>
    </div>
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--accepted" tabindex="0" hidden>
      <p>
        You have accepted optional cookies. You can change your cookie settings on the <a href="/cookies">Cookies page</a>.
      </p>
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="close">
          Close this message
        </button>
      </div>
    </div>
    <div class="tna-column tna-column--full tna-cookie-banner__message tna-cookie-banner__message--rejected" tabindex="0" hidden>
      <p>
        You have rejected optional cookies. You can change your cookie settings on the <a href="/cookies">Cookies page</a>.
      </p>
      <div class="tna-button-group">
        <button class="tna-button" type="button" value="close">
          Close this message
        </button>
      </div>
    </div>
  </div>
</section>

Attributes

| Attribute | Purpose | Default | | --------------------- | ------------------------------------------------------------------------- | ------------------------ | | data-policies | Extra cookie policies in addition to "essential", "settings" and "usage" | [none] | | data-preferenceskey | The cookie name to state that the user preferences have already been set | cookie_preferences_set | | data-policieskey | The cookie name for the policy preferences | cookies_policy | | data-domain | The domain to save cookies for | [The current domain] | | data-path | The path that cookies are available within | / | | data-insecure | Allow cookies to be sent in HTTP environments (designed for testing only) | false |

JavaScript

Initialise the component

Include the JavaScript in your service. This should add a TNAFrontend object to your window. You can then initialise the component:

const $cookieBanner = document.querySelector(
  '[data-module="tna-cookie-banner"]',
);

if ($cookieBanner) {
  new TNAFrontend.CookieBanner($cookieBanner);
}

Work with cookies using the Cookies class

import Cookies from "@nationalarchives/frontend/nationalarchives/lib/cookies.mjs";

const cookies = new Cookies();

if (cookies.isPolicyAccepted("usage")) {
  // Add tracking code
}

Use cookie events

import Cookies from "@nationalarchives/frontend/nationalarchives/lib/cookies.mjs";

const cookies = new Cookies();

cookies.on("acceptPolicy", function(policy) {
  if (policy === "usage") {
    console.log("Usage cookies are permitted");
    // Add tracking code
  }
});

cookies.on("rejectPolicy", function(policy) {
  if (policy === "usage") {
    console.log("Usage cookies have been rejected");
    // Remove tracking code
  }
});

| Event | Trigger | | ------------------- | ------------------------------------------------------------------------------------------- | | setCookie | Any time a cookie is changed in the browser using the Cookie class | | deleteCookie | When any cookie is deleted using delete() | | deleteAllCookies | When all cookies are deleted using deleteAll() | | acceptPolicy | When any policy is accepted using acceptPolicy() | | acceptAllPolicies | When all policies are accepted using acceptAllPolicies() | | rejectPolicy | When any policy is rejected using rejectPolicy() | | rejectAllPolicies | When all policies are rejected using rejectAllPolicies() | | changePolicy | When any policy is changed using either acceptPolicy(), rejectPolicy() or setPolicy() |