@nationalarchives/frontend-cookie-banner

0.1.59 • Public • Published

The National Archives logo

TNA Frontend Cookie Banner

Latest release NPM version Licence

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()

Readme

Keywords

none

Package Sidebar

Install

npm i @nationalarchives/frontend-cookie-banner

Weekly Downloads

36

Version

0.1.59

License

MIT

Unpacked Size

49.5 kB

Total Files

7

Last publish

Collaborators

  • tnawebmaster
  • ahosgood
  • sampalmer
  • tna-digital
  • tomjking