Cookie consent & Google consent v2 updates (#522)

* Dispatch a `CookieConsent` event from the cookie consent module whenever the consent is updated.

* Listen for cookie consent updates and update GA consent accordingly.

* Keep consent properties in a single place and reference where needed.

* Compiled JavaScript

* Version bump to v14.3.9

Author: edwardcasbon

dist/honeycomb.js

@@ -79,6 +79,7 @@ function _arrayLikeToArray(arr, len) {
 }
 var accountId;
 var crossDomainAccountId;
+var consentProperties = ['ad_storage', 'ad_user_data', 'ad_personalization', 'analytics_storage'];
 var init = function init() {
   // If the account ID is not set, then don't carry on.
   if (!accountId || accountId === 'G-XXX') {
@@ -146,13 +147,13 @@ var initAccount = function initAccount(accountId) {
   };
 
   // Set default values of consent to denied.
-  window.gtag('consent', 'default', {
-    ad_storage: 'denied',
-    ad_user_data: 'denied',
-    ad_personalization: 'denied',
-    analytics_storage: 'denied',
+  var defaultConsent = {
     wait_for_update: 500
+  };
+  consentProperties.forEach(function (prop) {
+    defaultConsent[prop] = 'denied';
   });
+  window.gtag('consent', 'default', defaultConsent);
   window.gtag('js', new Date());
 
   // Add account IDs.
@@ -168,12 +169,11 @@ var initAccount = function initAccount(accountId) {
   // Update consent for storing cookies if targeting consent given.
   var hasTargetingConsent = _honeycomb["default"].hasConsent('targeting');
   if (hasTargetingConsent) {
-    window.gtag('consent', 'update', {
-      ad_storage: 'granted',
-      ad_user_data: 'granted',
-      ad_personalization: 'granted',
-      analytics_storage: 'granted'
+    var updatedConsent = {};
+    consentProperties.forEach(function (prop) {
+      updatedConsent[prop] = 'granted';
     });
+    window.gtag('consent', 'update', updatedConsent);
   }
 };
 
@@ -269,6 +269,19 @@ var setOptimizeId = function setOptimizeId() {
 var setSites = function setSites() {
   (0, _honeycombNotification.logDeprecatedFunctionToConsole)('setSites', 'Google Analytics', '14.2.0');
 };
+
+// Listen for cookie consent updates and update consent based on the
+// "targeting" group.
+window.addEventListener('CookieConsent', function (e) {
+  var consent = Object.prototype.hasOwnProperty.call(e.detail.groups, 'targeting') && e.detail.groups.targeting == 1 ? 'granted' : 'denied';
+  if (typeof window.gtag === 'function') {
+    var updatedConsent = {};
+    consentProperties.forEach(function (prop) {
+      updatedConsent[prop] = consent;
+    });
+    window.gtag('consent', 'update', updatedConsent);
+  }
+});
 var _default = exports["default"] = {
   init: init,
   accountId: accountId,
@@ -1567,6 +1580,8 @@ var hasConsent = function hasConsent() {
  * Set the consent cookie with the groups consent statuses, and for it to
  * expire in 31 days if cookies accepted, and 6 months if rejected.
  *
+ * Also dispatch a `CookieConsent` event which includes the consent group data.
+ *
  * @param {Object|Null} groups The groups object with the group as the property,
  *                             and the consent status as the value (0|1)
  * @param {Boolean} status The status to set consent to if groups is null.
@@ -1586,6 +1601,12 @@ var setHasConsent = function setHasConsent() {
     'max-age': status === 1 ? 2678400 : 16070400,
     domain: getConsentCookieDomain()
   });
+  window.dispatchEvent(new CustomEvent('CookieConsent', {
+    bubbles: true,
+    detail: {
+      groups: groups
+    }
+  }));
 };
 
 /**

dist/honeycomb.min.js

@@ -1,6 +1,6 @@
 {
   "name": "honeycomb-web-toolkit",
-  "version": "14.3.8",
+  "version": "14.3.9",
   "repository": {
     "type": "git",
     "url": "https://github.com/red-gate/honeycomb-web-toolkit"

package-lock.json

@@ -5,6 +5,13 @@ import { logDeprecatedFunctionToConsole } from '../../notification/js/honeycomb.
 let accountId;
 let crossDomainAccountId;
 
+const consentProperties = [
+    'ad_storage',
+    'ad_user_data',
+    'ad_personalization',
+    'analytics_storage',
+];
+
 const init = () => {
 
     // If the account ID is not set, then don't carry on.
@@ -89,13 +96,13 @@ const initAccount = (accountId, crossDomainAccountId = null) => {
     };
 
     // Set default values of consent to denied.
-    window.gtag('consent', 'default', {
-        ad_storage: 'denied',
-        ad_user_data: 'denied',
-        ad_personalization: 'denied',
-        analytics_storage: 'denied',
+    const defaultConsent = {
         wait_for_update: 500,
+    };
+    consentProperties.forEach((prop) => {
+        defaultConsent[prop] = 'denied';
     });
+    window.gtag('consent', 'default', defaultConsent);
 
     window.gtag('js', new Date());
 
@@ -112,12 +119,11 @@ const initAccount = (accountId, crossDomainAccountId = null) => {
     // Update consent for storing cookies if targeting consent given.
     const hasTargetingConsent = cookieConsent.hasConsent('targeting');
     if (hasTargetingConsent) {
-        window.gtag('consent', 'update', {
-            ad_storage: 'granted',
-            ad_user_data: 'granted',
-            ad_personalization: 'granted',
-            analytics_storage: 'granted',
+        const updatedConsent = {};
+        consentProperties.forEach((prop) => {
+            updatedConsent[prop] = 'granted';
         });
+        window.gtag('consent', 'update', updatedConsent);
     }
 };
 
@@ -211,6 +217,24 @@ const setSites = (...args) => {
     logDeprecatedFunctionToConsole('setSites', 'Google Analytics', '14.2.0');
 };
 
+// Listen for cookie consent updates and update consent based on the
+// "targeting" group.
+window.addEventListener('CookieConsent', (e) => {
+    const consent =
+        Object.prototype.hasOwnProperty.call(e.detail.groups, 'targeting') &&
+        e.detail.groups.targeting == 1
+            ? 'granted'
+            : 'denied';
+
+    if (typeof window.gtag === 'function') {
+        const updatedConsent = {};
+        consentProperties.forEach((prop) => {
+            updatedConsent[prop] = consent;
+        });
+        window.gtag('consent', 'update', updatedConsent);
+    }
+});
+
 export default {
     init,
     accountId,

package.json

@@ -230,6 +230,8 @@ const hasConsent = ( group = null ) => {
  * Set the consent cookie with the groups consent statuses, and for it to
  * expire in 31 days if cookies accepted, and 6 months if rejected.
  *
+ * Also dispatch a `CookieConsent` event which includes the consent group data.
+ *
  * @param {Object|Null} groups The groups object with the group as the property,
  *                             and the consent status as the value (0|1)
  * @param {Boolean} status The status to set consent to if groups is null.
@@ -249,6 +251,15 @@ const setHasConsent = ( groups = null, status = true ) => {
         'max-age': (status === 1) ? 2678400 : 16070400,
         domain: getConsentCookieDomain(),
     });
+
+    window.dispatchEvent(
+        new CustomEvent('CookieConsent', {
+            bubbles: true,
+            detail: {
+                groups,
+            },
+        })
+    );
 };
 
 /**