Cookie Consent

Install

Run npm install @oslokommune/cookie-consent

Methods

import { CookieConsent } from '@oslokommune/cookie-consent'

const googleAnalyticsId = 123;
const hotjarId = 456;

const cookieConsentConfig = {
  cookies: {
    domain: 'localhost',
    secure: true,
    expiryDays: 90
  },
  services: {
    adapters: [
      {
        name: 'google-analytics',
        consentKey: 'statistics',
        data: {
          id: googleAnalyticsId,
          options: {
            anonymize_ip: true,
          }
        }
      },
      {
        name: 'hotjar',
        consentKey: 'survey',
        data: {
          id: hotjarId
        }
      },
      {
        name: 'functional',
        consentKey: 'functional'
      }
    ]
  },
  logging: {
    adapters: [
      {
        adapter: 'console' // for debug only
      },
      {
        adapter: 'http',
        config: {
          store: {
            endpoint: 'url_to_store_logging_endpoint'
          }
        }
      }
    ]
  }
};
const cookieConsent = new CookieConsent(cookieConsentConfig);

// Set a consentCookie
try {
  await cookieConsent.setConsentCookie([
    {
      "name": "survey",
      "consent": true
    },
    {
      "name": "statistics",
      "constent": true
    },
    {
      "name": "functional",
      "consent": true
    }
  ]);

  // Toggle services on/off based on consents
  cookieConsent.toggleServices(cookieConsent.getConsentCookie());
} catch (error) {
  // Handle error
}

// Get a consentCookie
const consent = cookieConsent.getConsentCookie();
console.log(consent)
// items: ConsentItem[]
// checksum: string
// uuid: string

// Delete a consentCookie
cookieConsent.deleteConsentCookie();

// Validate consentCookie, toggle services or init cookie banner for user
try {
  const validation = await cookieConsent.validateConsentCookie();
  if (validation) {
    cookieConsent.toggleServices(cookieConsent.getConsentCookie());
  } else {
    // Init cookie consent banner
  }
} catch (error) {
  // Handle error
}

cookieConsent.toggleServices(consentObject: ConsentObject);
cookieConsent.enableAllServices(consentObject: ConsentObject);
cookieConsent.disableAllServices(consentObject: ConsentObject);

Events

All events are emitted through the CookieEvents bus from CookieManager.

import { CookieEvents } from 'cookie-manager'

function toogleMyFunctionalCookies(payload) {
  if (payload.consent) {
    // 
  }
}

CookieEvents.on('CookieConsent.functionalCookies', toggleMyFunctionalCookies)

• CookieConsent.set => ConsentObject
• CookieConsent.get => ConsentObject
• CookieConsent.delete => void
• CookieConsent.validate => bool
• CookieConsent.functionalCookies => { consent: bool }

Services

Any ConsentItem in ConsentObject whos name matches the consentKey in an adapter will be toggled if any change is made.

Adapters

Google analytics

// Pass google analytics id in as configuration to CookieConsent, if null or not set google analytics adapter will be disabled

const config = {
  services: {
    serviceIds: {
      adapters: [
      {
        name: 'google-analytics',
        consentKey: 'statistics',
        data: {
          id: googleAnalyticsId,
          options: {
            anonymize_ip: true,
          }
        }
      },
      ...

HotJar

// Pass hotjar id in as configuration to CookieConsent, if null or not set hotjar adapter will be disabled

const config = {
  services: {
    adapters: [
      {
        name: 'hotjar',
        consentKey: 'survey',
        data: {
          id: hotjarId
        }
      },

Functional

import { CookieEvents } from 'cookie-manager'

function toogleMyFunctionalCookies(payload) {
  if (payload.consent) {
    // Enable functional cookies here
  } else {
    // Disable functional cookies here
  }
}

// Emits event on enable / disable
CookieEvents.on('CookieConsent.functionalCookies', toggleMyFunctionalCookies)