CookieConsent + Tealium iQ Consent Integration

// 1.0.0-beta4
// base: cookieconsentv3


;(function cookieConsentV3Integration (window) {
  // CMP specific functionality and labels
  window.tealiumCmpIntegration = window.tealiumCmpIntegration || {}
  window.tealiumCmpIntegration.cmpName = 'CookieConsentV3'
  window.tealiumCmpIntegration.cmpIntegrationVersion = 'v1.0.0-beta4'
  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
  // Add the new callback function to the CMP integration object
  window.tealiumCmpIntegration.cmpAddCallbackToTriggerRecheck = cmpAddCallbackToTriggerRecheck
  // 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 !== '';
  }
  // CMP-specific helper function to generate a key for a service based on its category and name
  function getServiceKey(category, serviceName) {
      // just add a hyphen between the parent category name and the service name to keep the keys clear
      // 'functional-functional_vendor1'
      return '' + category + '-' + serviceName
  }
  // CMP-specific helper function to check if a category is standalone (i.e. has no services) - returns undefined if the category doesn't exist or the CMP config
  function isCategoryStandalone (cmpRawOutput, category) {
    var categoryEntry = cmpRawOutput && cmpRawOutput.config && cmpRawOutput.config.categories && cmpRawOutput.config.categories[category]
    if (typeof categoryEntry !== 'object') return undefined
    var categoryHasServices = typeof categoryEntry.services === 'object' && Object.keys(categoryEntry.services).length > 0
    return !categoryHasServices
  }
  function getAllowedCategoriesAndServices(cmpRawOutput) {
    var acceptedServiceObj = cmpRawOutput && cmpRawOutput.userPreferences && cmpRawOutput.userPreferences.acceptedServices
    var acceptedCategoriesAndServices = cmpRawOutput && cmpRawOutput.userPreferences && cmpRawOutput.userPreferences.acceptedCategories
    var allCategories = cmpRawOutput && cmpRawOutput.config && cmpRawOutput.config.categories || {}
    // If we're in opt-in mode AND no consent decision has been made, so we return all defined categories (or their services) 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 purposeArray = []
      Object.keys(allCategories).forEach(function (cat) {
        var catIsReadOnly = allCategories[cat].readOnly === true
        if (catIsReadOnly && isCategoryStandalone(cmpRawOutput, cat))  {
          purposeArray.push(cat)
        } else if (catIsReadOnly) {
          // we need to add all the services in readOnly categories to the accepted services list
          var services = Object.keys(allCategories[cat].services) || {}
          services.forEach(function (service) {
            purposeArray.push(getServiceKey(cat, service))
          })
        }
      })
      return purposeArray
    }
    if (typeof acceptedServiceObj !== "object") return []
    var allAllowed = []
    var i, serviceNames
    for (i = 0, serviceNames; i < acceptedCategoriesAndServices.length; i++) {
      // Only push standalone categories (those without services), since if services are defined, they're the only things that should matter for purpose mapping. 
      // (Using the main category switch is strange if there are services defined because it's not super clear what the user actually consented to, and it's not designed for that use 
      // so it can behave strangely and lead to confusion.)
      var catName = acceptedCategoriesAndServices[i]
      if (isCategoryStandalone(cmpRawOutput, catName)) {
        allAllowed.push(catName)
      } else {
        acceptedServiceObj[catName].forEach(function (serviceName) {
            allAllowed.push(getServiceKey(catName, serviceName))
        })
      }
    }
    return allAllowed
  }
  // Should return an array of consented vendors/purposes - these should match the Purposes in Tealium iQ exactly, if you want to map everything
  function cmpConvertResponseToGroupList (cmpRawOutput) {
    if (cmpCheckForWellFormedDecision(cmpRawOutput) !== true) return false;
    return getAllowedCategoriesAndServices(cmpRawOutput)
  }
  // Use the incoming callback feature to avoid some polling when the underlying framework supports it
  // It's better to call this too often (no impact) than too little (missed consent changes and the corresponding data)
  function cmpAddCallbackToTriggerRecheck (triggerRecheck) {
    if (typeof triggerRecheck !== "function") return false;
    window.addEventListener('cc:onConsent', function () {
      triggerRecheck()
    });
    window.addEventListener('cc:onChange', function () {
      triggerRecheck()
    });
    window.addEventListener('cc:onModalShow', function () {
      // Only trigger a recheck on consent popup when consent is implicit
      cmpCheckForExplicitConsentDecision(cmpFetchCurrentConsentDecision()) || triggerRecheck()
    });
    return true;
  }
  // 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 entire block, then paste/repaste this entire template on your test pages
function outputDebuggingInfo () {
  var outputString = `${tealiumCmpIntegration.cmpCheckIfOptInModel() ? 'Opt-in' : 'Opt-out'} Model

  Checks:
    - id:                 ${tealiumCmpIntegration.cmpFetchCurrentLookupKey()}
    - well-formed:        ${tealiumCmpIntegration.cmpCheckForWellFormedDecision(tealiumCmpIntegration.cmpFetchCurrentConsentDecision())}
    - explicit:           ${tealiumCmpIntegration.cmpCheckForExplicitConsentDecision(tealiumCmpIntegration.cmpFetchCurrentConsentDecision())}
    - using callback:     ${typeof tealiumCmpIntegration.cmpAddCallbackToTriggerRecheck === 'function'}
    - consented purposes: ${JSON.stringify(tealiumCmpIntegration.cmpConvertResponseToGroupList(tealiumCmpIntegration.cmpFetchCurrentConsentDecision()))}
  `
  console.log(outputString);
}
// use the callback function to avoid console posting while debugging and allow testing of the callback function itself
if (typeof tealiumCmpIntegration.cmpAddCallbackToTriggerRecheck === 'function') {
    tealiumCmpIntegration.cmpAddCallbackToTriggerRecheck(outputDebuggingInfo)
}
outputDebuggingInfo();
*/

/**
 * 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 consent management tool (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);
});