npm - @jarijokinen/consent - Versions diffs - 0.0.3 → 0.0.5 - Mend

@jarijokinen/consent 0.0.3 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/LICENSE.txt CHANGED Viewed

@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright (c) 2022 Jari Jokinen
+Copyright (c) 2022 - 2025 Jari Jokinen
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

package/README.md CHANGED Viewed

@@ -1,7 +1,7 @@
 # consent
-A zero-dependency, vanilla JavaScript consent manager with native Consent Mode
-support.
+A zero-dependency, vanilla JavaScript consent manager with native Google
+Consent Mode v2 support.
 ## Installation
@@ -9,13 +9,18 @@ NPM:
     npm install @jarijokinen/consent
-Yarn:
+## Usage
-    yarn add @jarijokinen/consent
+Load the consent-loader.js in the HEAD section deferred before any GTM tags.
-## Usage
+    <head>
+      <script src="path/to/consent-loader.js" defer></script>
+      <script>
+        // GTM and any other scripts
+      </script>
+    </head>
-Initialization:
+Import consent from the npm package and initialize it later on the page.
     import { consent } from '@jarijokinen/consent';
@@ -25,7 +30,7 @@ Initialization:
 Add link that opens the dialog:
-    <a href="#" class="consent-settings-link">Cookie Settings</a>
+    <a href="#" class="consent-settings">Cookie Settings</a>
 ## Configuration
@@ -48,16 +53,16 @@ argument to the consent() function.
         <div class="consent-fields"></div>
         <div class="consent-buttons"></div>
       `,
-      dialogTitle: 'Cookies',
-      dialogMessage: 'We would like to get your permission to use cookies for:',
       dialogClass: 'consent',
-      settingsLinkSelector: '.consent-settings-link'
+      dialogTitle: 'Cookie Consent',
+      dialogMessage: 'This website uses cookies for:',
+      settingsLinkSelector: '.consent-settings'
     };
     consent(options);
 ## License
-MIT License. Copyright (c) 2022 [Jari Jokinen](https://jarijokinen.com).  See
-[LICENSE](https://github.com/jarijokinen/consent/blob/main/LICENSE.txt)
+MIT License. Copyright (c) 2022 - 2025 [Jari Jokinen](https://jarijokinen.com).
+See [LICENSE](https://github.com/jarijokinen/consent/blob/main/LICENSE.txt)
 for further details.

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@jarijokinen/consent",
-  "version": "0.0.3",
-  "description": "A zero-dependency, vanilla JavaScript consent manager with native Consent Mode support.",
+  "version": "0.0.5",
+  "description": "A zero-dependency, vanilla JavaScript consent manager with native Google Consent Mode v2 support.",
   "main": "src/consent.js",
   "repository": {
     "type": "git",
@@ -12,5 +12,8 @@
   "bugs": {
     "url": "https://github.com/jarijokinen/consent/issues"
   },
-  "homepage": "https://github.com/jarijokinen/consent#readme"
+  "homepage": "https://github.com/jarijokinen/consent#readme",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/src/consent-loader.js ADDED Viewed

@@ -0,0 +1,39 @@
+window.dataLayer = window.dataLayer || [];
+function gtag() { dataLayer.push(arguments); }
+window.consent = window.consent || {};
+window.consent.countries = window.consent.countries || [
+  'AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU',
+  'IS', 'IE', 'IT', 'LV', 'LI', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO',
+  'SK', 'SI', 'ES', 'SE', 'UK', 'GB', 'CH'
+];
+window.consent.consentMissing = true
+window.consent.state = {
+  analytics_storage: null,
+  ad_storage: null,
+  ad_user_data: null,
+  ad_personalization: null
+};
+Object.keys(window.consent.state).forEach(k => {
+  try {
+    const v = localStorage.getItem('consent_' + k);
+    if (v === 'granted' || v === 'denied') {
+      window.consent.state[k] = v;
+      window.consent.consentMissing = false;
+    }
+  }
+  catch (e) {
+    window.consent.state[k] = null;
+  }
+});
+const country = document.cookie.split(/(?:^|;\s*)cc=/).pop().split(';')[0]
+  .trim().toUpperCase();
+const countryDefault = !country || window.consent.countries.includes(country)
+  ? 'denied' : 'granted';
+gtag('consent', 'default', {
+  ...Object.fromEntries(Object.entries(window.consent.state).map(([k, v]) =>
+    [k, v ?? countryDefault]))
+});

package/src/consent.js CHANGED Viewed

@@ -5,9 +5,9 @@ export const consent = (options) => {
       ad_storage: 'Marketing'
     },
     actions: {
-      denyAll: 'Deny All',
+      allowAll: 'Allow All',
       allowSelected: 'Allow Selected',
-      allowAll: 'Allow All'
+      denyAll: 'Deny All'
     },
     dialogMarkup: `
       <h2 class="consent-title"></h2>
@@ -15,58 +15,18 @@ export const consent = (options) => {
       <div class="consent-fields"></div>
       <div class="consent-buttons"></div>
     `,
-    dialogTitle: 'Cookies',
-    dialogMessage: 'We would like to get your permission to use cookies for:',
     dialogClass: 'consent',
-    settingsLinkSelector: '.consent-settings-link',
+    dialogTitle: 'Cookie Consent',
+    dialogMessage: 'This website uses cookies for:',
+    settingsLinkSelector: '.consent-settings',
     ...options
   };
-  let consentState = {
-    ad_storage: 'denied',
-    analytics_storage: 'denied',
-    functionality_storage: 'denied',
-    personalization_storage: 'denied',
-    security_storage: 'denied'
-  };
+  function gtag() { dataLayer.push(arguments); }
   let dialog = document.createElement('div');
   dialog.classList.add(opts.dialogClass);
-  const getConsent = (storage) => {
-    return localStorage.getItem('consent_' + storage);
-  };
-  const updateConsent = () => {
-    Object.keys(opts.storages).forEach((storage) => {
-      localStorage.setItem('consent_' + storage, consentState[storage]);
-    });
-    if (typeof gtag === 'function') {
-      gtag('consent', 'update', consentState);
-    }
-  };
-  const updateFields = () => {
-    Object.keys(opts.storages).forEach((storage) => {
-      dialog.querySelector('#consent-field-' + storage).checked =
-        consentState[storage] == 'granted' ? true : false;
-    });
-  };
-  const loadConsentState = () => {
-    Object.keys(opts.storages).forEach((storage) => {
-      consentState[storage] = getConsent(storage);
-      if (consentState[storage] === null) {
-        showDialog();
-      }
-    });
-    if (typeof gtag === 'function') {
-      gtag('consent', 'update', consentState);
-    }
-  };
   const createDialog = () => {
     dialog.innerHTML = opts.dialogMarkup;
     dialog.querySelector('.consent-title').innerText = opts.dialogTitle;
@@ -78,7 +38,7 @@ export const consent = (options) => {
       checkbox.setAttribute('type', 'checkbox');
       checkbox.setAttribute('name', 'consent-field-' + storage);
       checkbox.setAttribute('id', 'consent-field-' + storage);
-      if (getConsent(storage) === 'granted') {
+      if (window.consent.state[storage] === 'granted') {
         checkbox.setAttribute('checked', 'checked');
       }
       const label = document.createElement('label');
@@ -97,34 +57,31 @@ export const consent = (options) => {
       switch (action) {
         case 'denyAll':
           button.onclick = () => {
-            Object.keys(opts.storages).forEach((storage) => {
-              consentState[storage] = 'denied';
+            Object.keys(opts.storages).forEach(k => {
+              window.consent.state[k] = 'denied'
             });
-            updateConsent();
+            saveState();
             updateFields();
             hideDialog();
           };
           break;
         case 'allowSelected':
           button.onclick = () => {
-            Object.keys(opts.storages).forEach((storage) => {
-              consentState[storage] = document.querySelector(
-                '#consent-field-' + storage
-              ).checked
-                ? 'granted'
-                : 'denied';
+            Object.keys(opts.storages).forEach(k => {
+              const el = document.querySelector('#consent-field-' + k);
+              window.consent.state[k] = el.checked ? 'granted' : 'denied';
             });
-            updateConsent();
+            saveState();
             updateFields();
             hideDialog();
           };
           break;
         case 'allowAll':
           button.onclick = () => {
-            Object.keys(opts.storages).forEach((storage) => {
-              consentState[storage] = 'granted';
+            Object.keys(opts.storages).forEach(k => {
+              window.consent.state[k] = 'granted';
             });
-            updateConsent();
+            saveState();
             updateFields();
             hideDialog();
           };
@@ -137,6 +94,26 @@ export const consent = (options) => {
     document.querySelector('body').appendChild(dialog);
   };
+  const saveState = () => {
+    Object.keys(window.consent.state).forEach(k => {
+      try {
+        localStorage.setItem('consent_' + k, window.consent.state[k]);
+      }
+      catch (e) {
+        console.log('Unable to save consent to local storage');
+      }
+    });
+    gtag('consent', 'update', window.consent.state);
+  };
+  const updateFields = () => {
+    Object.keys(opts.storages).forEach(k => {
+      dialog.querySelector('#consent-field-' + k).checked =
+        window.consent.state[k] === 'granted' ? true : false;
+    });
+  };
   const showDialog = () => {
     dialog.style.display = 'block';
   };
@@ -144,12 +121,18 @@ export const consent = (options) => {
   const hideDialog = () => {
     dialog.style.display = 'none';
   };
   document.querySelector(opts.settingsLinkSelector).onclick = (ev) => {
     ev.preventDefault();
     showDialog();
   };
-  loadConsentState();
   createDialog();
+  if (window.consent.consentMissing) {
+    showDialog();
+  }
+  else {
+    hideDialog();
+  }
 };