CookieConsent + Tealium iQ Consent Integration

// 1.0.0-beta3
// base: cookieconsentv3


;(function cookieConsentV3Integration (window) {

  // CMP specific functionality and labels
  window.tealiumCmpIntegration = window.tealiumCmpIntegration || {}

  window.tealiumCmpIntegration.cmpName = 'CookieConsentV3'
  window.tealiumCmpIntegration.cmpIntegrationVersion = 'v1.0.0-beta3'

  window.tealiumCmpIntegration.cmpFetchCurrentConsentDecision = cmpFetchCurrentConsentDecision
  window.tealiumCmpIntegration.cmpFetchCurrentLookupKey = cmpFetchCurrentLookupKey
  window.tealiumCmpIntegration.cmpCheckIfOptInModel = cmpCheckIfOptInModel
  window.tealiumCmpIntegration.cmpCheckForWellFormedDecision = cmpCheckForWellFormedDecision
  window.tealiumCmpIntegration.cmpCheckForExplicitConsentDecision = cmpCheckForExplicitConsentDecision
  window.tealiumCmpIntegration.cmpCheckForTiqConsent = cmpCheckForTiqConsent
  window.tealiumCmpIntegration.cmpConvertResponseToGroupList = cmpConvertResponseToGroupList


  // Should return a boolean, true if the CMP is running the 'Opt-in' model (GDPR style)
  function cmpCheckIfOptInModel () {
    var cmpRawOutput = cmpFetchCurrentConsentDecision() || {};
    return cmpRawOutput.config && cmpRawOutput.config.mode !== 'opt-out'; // default to opt-in mode for safety
  }

  // Should return some CMP-specific raw object (must be an object) that contains the needed information about the decision.
  // This output is used as the cmpRawOutput argument in functions below.
  function cmpFetchCurrentConsentDecision () {
    if (typeof CookieConsent !== 'object') return false;
    var output = {};
    output.userPreferences = CookieConsent.getUserPreferences();
    output.config = CookieConsent.getConfig();
    return output;
  }

  function cmpFetchCurrentLookupKey () {
    // just return whatever Vendor ID is expected be active to short-circuit the ID-based double check - we don't want or need it in this case
    return (window.tealiumCmpIntegration && window.tealiumCmpIntegration.map && Object.keys(window.tealiumCmpIntegration.map)[0]) || '(Vendor ID check disabled)';
  }

  // Should return a boolean - true if the raw decision meets our expectations for the CMP
  function cmpCheckForWellFormedDecision (cmpRawOutput) {
    return typeof cmpRawOutput === 'object' && typeof cmpRawOutput.config === 'object' && typeof cmpRawOutput.config.categories === 'object' && typeof cmpRawOutput.userPreferences === 'object';
  }
  
  // Should return a boolean - true if the consent decision was explicitly made by the user
  function cmpCheckForExplicitConsentDecision (cmpRawOutput) {
    return cmpRawOutput && cmpRawOutput.userPreferences && cmpRawOutput.userPreferences.acceptType !== '';
  }
  
  function getServiceKey(category, serviceName) {
      // just add a hypen between the parent category name and the service name to keep the keys clear
      // 'functional-functional_vendor1'
      return '' + category + '-' + serviceName
  }
  
  function getAllowedCategoriesAndServices(cmpRawOutput) {
    var acceptedServiceObj = cmpRawOutput && cmpRawOutput.userPreferences && cmpRawOutput.userPreferences.acceptedServices
    var acceptedCategoryArray = cmpRawOutput && cmpRawOutput.userPreferences && cmpRawOutput.userPreferences.acceptedCategories
    
    // If we're in opt-in mode AND no consent decision has been made, so we return all defined categories marked as read-only (aka, necessary), since 'enabled' is only used in opt-out mode and acceptedCategories doesn't include it (v3.0.1)
    if (cmpCheckForExplicitConsentDecision(cmpRawOutput) !== true && cmpCheckIfOptInModel(cmpRawOutput) === true) {
      var allCategories = cmpRawOutput.config.categories   
      acceptedCategoryArray = Object.keys(allCategories).filter(function (cat) {
          return allCategories[cat].readOnly === true
      })
    }
    
    if (typeof acceptedServiceObj !== "object") return []
    var allAllowed = []
    function deduplicatedPush (arr, element) {
        if (arr && typeof arr.indexOf === 'function' && typeof arr.push === 'function' && arr.indexOf(element) === -1) {
            arr.push(element)
            return true
        }
        return false
    }
    var i, serviceNames
    for (i = 0, serviceNames; i < acceptedCategoryArray.length; i++) {
        allAllowed.push(acceptedCategoryArray[i])
    }
    var allCategories = Object.keys(acceptedServiceObj)
    for (i = 0; i < allCategories.length; i++) {
        serviceNames = acceptedServiceObj[allCategories[i]] || []
        for (var j = 0; j < serviceNames.length; j++) {
            deduplicatedPush(allAllowed, getServiceKey(allCategories[i], serviceNames[j]))
        }
    }
    
    return allAllowed
  }

  // Should return an array of consented vendors/purposes - these should match the Purposes in Tealium iQ exactly
  function cmpConvertResponseToGroupList (cmpRawOutput) {
    if (cmpCheckForWellFormedDecision(cmpRawOutput) !== true) return false;
    return getAllowedCategoriesAndServices(cmpRawOutput)
  }

  // You shouldn't need to change this function, or anything below it
  function cmpCheckForTiqConsent (cmpRawOutput, tiqGroupName) {
    // treat things we don't understand as an opt-out
    if (cmpCheckForWellFormedDecision(cmpRawOutput) !== true) return false

    tiqGroupName = tiqGroupName || 'tiq-group-name-missing'
    var allowedGroups = cmpConvertResponseToGroupList(cmpRawOutput)
    return allowedGroups.indexOf(tiqGroupName) !== -1
  }
})(window)

/*
  // Debugging / development output - uncomment this block, then paste/repaste this entire template on your test pages
  var outputString = `${tealiumCmpIntegration.cmpCheckIfOptInModel() ? 'Opt-in' : 'Opt-out'} Model

  Checks:
    - id:                 ${tealiumCmpIntegration.cmpFetchCurrentLookupKey()}
    - well-formed:        ${tealiumCmpIntegration.cmpCheckForWellFormedDecision(tealiumCmpIntegration.cmpFetchCurrentConsentDecision())}
    - explicit:           ${tealiumCmpIntegration.cmpCheckForExplicitConsentDecision(tealiumCmpIntegration.cmpFetchCurrentConsentDecision())}
    - consented purposes: ${JSON.stringify(tealiumCmpIntegration.cmpConvertResponseToGroupList(tealiumCmpIntegration.cmpFetchCurrentConsentDecision()))}
  `
  console.log(outputString);
*/

/**
 * CookieConsent - Inject CMP
 * Scope       : Pre Loader
 * Occurrence  : n/a
 * Condition   : n/a
 * Description : Loads a specific CookieConsent configuration, then injects the CSS and JS to render the CMP. You may need more than one, conditionally.
 */

// CookieConsent variables
var cmpDomain = 'tags.tiqcdn.com';
var cmpVersion = 'v3.0.1';

// CookieConsent modal configuration
// All configuration options: https://cookieconsent.orestbida.com/reference/configuration-reference.html
var cmpConfig = {
  mode: 'opt-in',
  disablePageInteraction: true,
  guiOptions: {
    consentModal: {
      layout: 'cloud',
      position: 'bottom center',
      flipButtons: false,
      equalWeightButtons: true
    },
    preferencesModal: {
      layout: 'bar wide',
      position: 'right',
      flipButtons: false,
      equalWeightButtons: true
    }
  },
  categories: {
    necessary: {
      enabled: true,
      readOnly: true
    },
    analytics: {},
    marketing: {}
  },
  language: {
    default: 'en',
    translations: {
      en: {
        consentModal: {
          title: 'We value your privacy',
          description: 'We\'d like to use browser storage to understand how you use our website, and to display information and offers relevant to you.',
          acceptAllBtn: 'Accept all',
          acceptNecessaryBtn: 'Accept necessary',
          showPreferencesBtn: 'Manage preferences',
          footer: '<a href="#">Privacy Policy</a>'
        },
        preferencesModal: {
          title: 'Manage preferences',
          acceptAllBtn: 'Accept all',
          acceptNecessaryBtn: 'Accept necessary',
          savePreferencesBtn: 'Accept selection',
          closeIconLabel: 'Close modal',
          sections: [
            {
              title: 'We value your privacy',
              description: 'We use browser storage to remember your preferences, understand how you use the site, and show you relevant offers.<br><br>Please make a selection, then click "Accept selection" to consent to those specific purposes. You can change or withdraw your consent at any time.'
            },
            {
              title: 'Strictly Necessary <span class="pm__badge">Always Enabled</span>',
              description: 'This tracking is essential for the proper functioning of the website and cannot be disabled.',
              linkedCategory: 'necessary'
            },
            {
              title: 'Performance and Analytics',
              description: 'This tracking collects information about the performance of our website and how you use it.',
              linkedCategory: 'analytics',
              cookieTable: {
                caption: 'Analytics cookies',
                headers: {
                  name: 'Name',
                  description: 'Description',
                  duration: 'Duration'
                },
                body: [
                  {
                    name: '_ga',
                    description: 'Used to distinguish users.',
                    duration: '2 years'
                  },
                  {
                    name: '_ga_1234ABCD',
                    description: 'Used to persist session state.',
                    duration: '2 years'
                  }
                ]
              }
            },
            {
              title: 'Marketing and Social',
              description: 'This tracking collects information about how you use our website to show offers you may be interested in.',
              linkedCategory: 'marketing'
            },
            {
              title: 'More information',
              description: 'To learn more about cookies, please visit <a href="https://www.cookiesandyou.com/" target="_blank">Cookies & You</a>'
            }
          ]
        }
      }
    }
  }
};

var c = document.createElement('link');
c.rel = 'stylesheet';
c.href = 'https://' + cmpDomain + '/libs/cookieconsent/' + cmpVersion + '/cookieconsent.css';
document.head.appendChild(c);

var s = document.createElement('script');
s.src = 'https://' + cmpDomain + '/libs/cookieconsent/' + cmpVersion + '/cookieconsent.umd.js';
s.addEventListener('load', function () { CookieConsent.run(cmpConfig); });
document.body.appendChild(s);

// Consent Logging Extension
// Scope: Pre Loader

function logConsentChanges(event){
    var tealiumAccountForLogging = 'services-caleb'
    var tealiumProfileForLogging = 'main'
    
    // Retrieve all the fields from the CMP (CookieConsentV3)
    var cookie = CookieConsent.getCookie();
    var preferences = CookieConsent.getUserPreferences();

    // This payload can easily be adjusted to fit specific customer needs
    var userConsent = {
        tealium_event: 'consent_decision', // don't try to preserve the old payloads
        tealium_account: tealiumAccountForLogging,
        tealium_profile: tealiumProfileForLogging,
        consent_id: cookie.consentId,
        cmp_name: window.tealiumCmpIntegration.cmpName,
        decision_type: preferences.acceptType,
        accepted_purposes: preferences.acceptedCategories,
        rejected_purposes: preferences.rejectedCategories,
        consent_model: window.tealiumCmpIntegration.cmpCheckIfOptInModel() ? 'opt-in' : 'opt-out',
        url: document.location.href.split('?')[0],
        decision_timestamp: cookie.lastConsentTimestamp,
        expiration_time: cookie.expirationTime,
        revision: cookie.revision
    };
    
    // This won't necessarily pick up the first decision unless Collect was allowed to run before this decision
    // It's a race, and this will almost always win by nature of the callback speed I think
    var tealiumVisitorId = utag && utag.loader && utag.loader.RC('utag_main').v_id
    
    // Add the tealium_visitor_id, but only if it exists
    if (tealiumVisitorId) {
        userConsent.tealium_visitor_id = tealiumVisitorId
    }
    
    // Send the data to be logged or distributed
    fetch('https://collect.tealiumiq.com/event', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(userConsent)
    });
}

window.addEventListener('consent_updated', (event) => {
  logConsentChanges(event);
});