@use 'sprucecss/scss/spruce' as *;

.cookie-consent {
  align-items: center;
  background-color: color('background');
  border-block-end: 1px solid color('border');
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: spacer('s') spacer('m');
  justify-content: center;
  padding-block: spacer('m');
  padding-inline: get-css-variable(--container-gap);
  text-align: center;

  &__caption {
    @include layout-stack('xs');
  }

  &__btns {
    display: flex;
    gap: spacer('s');
  }
}

<button class="btn btn--primary" data-action="cookie" data-type="analytics" data-on-text="Decline" data-off-text="Accept">analytics cookies</button>

import {
  setCookie, getCookie, issetCookie, removeCookie,
} from '../cookie.js';

(() => {
  const prefix = 'spruce-demo';
  const btns = document.querySelectorAll('button[data-action="cookie"]');

  if (
    !issetCookie(`${prefix}-cookie-law-analytics`)
    && !issetCookie(`${prefix}-cookie-law-denied`)
  ) {
    const cookieNotification = `<div class="cookie-consent" tabindex="-1">
        <div class="cookie-consent__caption">This site use cookies. For more information please visit our <a href="#">privacy policy</a> page.</div>
        <div class="cookie-consent__btns">
          <button class="btn btn--primary" data-action="cookie-accept">Accept</button>
          <button class="btn btn--primary" data-action="cookie-decline">Decline</button>
        </div>
      </div>`;

    document.body.insertAdjacentHTML('afterbegin', cookieNotification);
    document.querySelector('.cookie-consent').focus();
  }

  document.addEventListener('click', (e) => {
    if (
      e.target
      && e.target.getAttribute('data-action') === 'cookie-accept'
    ) {
      setCookie(`${prefix}-cookie-law-analytics`, 'accepted', 365);
      window.location.reload();
    }

    if (
      e.target
      && e.target.getAttribute('data-action') === 'cookie-decline'
    ) {
      setCookie(`${prefix}-cookie-law-denied`, 'true');
      window.location.reload();
    }
  });

  btns.forEach((btn) => {
    if (
      issetCookie(`${prefix}-cookie-law-${btn.getAttribute('data-type')}`)
      && getCookie(`${prefix}-cookie-law-${btn.getAttribute('data-type')}`) === 'accepted'
    ) {
      btn.innerHTML = `${btn.getAttribute('data-on-text')} ${btn.innerHTML}`;
    } else {
      btn.innerHTML = `${btn.getAttribute('data-off-text')} ${btn.innerHTML}`;
    }

    btn.addEventListener('click', () => {
      if (
        issetCookie(`${prefix}-cookie-law-${btn.getAttribute('data-type')}`)
        && getCookie(`${prefix}-cookie-law-${btn.getAttribute('data-type')}`) === 'accepted'
      ) {
        removeCookie(`${prefix}-cookie-law-${btn.getAttribute('data-type')}`);
      } else {
        setCookie(`${prefix}-cookie-law-${btn.getAttribute('data-type')}`, 'accepted', 365);
      }
      window.location.reload();
    });
  });
})();

Cookie Conset

How It Works

The script differentiates two types of action at the consent banner:

accept all types of cookies,
decline them.

We place a session cookie when you decline them and ask for permission (again) next time.

If you accept them, we place the category cookie(s). In this case, spruce-demo-cookie-law-analytics. We use this cookie to identify if we should load analytics-related cookies (like Google Analytics). You can set up any category.

To load your tracking codes, use the following snippet:

if (
  Cookie.isset('spruce-demo-cookie-law-analytics')
  && Cookie.get('spruce-demo-cookie-law-analytics') === 'accepted'
) {
  console.log('ANALYTICS');
}

Technical Details

As you see in the example, we also included an opt-out button; this is just a button to turn on or off any cookie type. You usually want to place it on your privacy policy page.
We handle everything from JS because, in some cases, the back-end cache can kill the cookies.
We reload the page after an opt-in or opt-out action because this is the simplest way to load (or turn off) the related scripts.
We insert the consent banner right after the opening body and set a focus on it.

Dependencies

We store the settings in cookies using the following code:

/**
 * Set a cookie value for the given key.
 *
 * @param  {string}  key
 * @param  {string} value
 * @param  {number|null}  expires
 * @param  {string}  path
 * @param  {object}  options
 * @return {void}
 */
export function setCookie(key, value, expires = null, path = '/', options = {}) {
  const defaults = {
    [key]: value,
    expires,
    path,
    SameSite: 'Lax',
    Secure: true,
  };

  const pairs = { ...defaults, ...options };

  pairs.expires = pairs.expires ? new Date(Date.now() + 86400 * 1000 * pairs.expires)
    .toUTCString() : null;

  document.cookie = Object.entries(pairs)
    .reduce((stack, entry) => stack.concat(entry.join('=')), [])
    .join('; ');
}

/**
 * Get the cookie with the given key.
 *
 * @param  {string}  key
 * @return {mixed}
 */
export function getCookie(key) {
  const cookie = document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`));

  return (cookie && cookie[2]) ? cookie[2] : null;
}

/**
 * Determine if the given cookie exists.
 *
 * @param  {string}  key
 * @return {bool}
 */
export function issetCookie(key) {
  return document.cookie.match(new RegExp(`(^| )${key}=([^;]+)`)) !== null;
}

/**
 * Remove the given cookie.
 *
 * @param  {string}  key
 * @return {void}
 */
export function removeCookie(key) {
  setCookie(key, null, new Date(null));
}