CookieConsent + Tealium iQ Consent統合

// 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
  }

  // Tealium iQのPurposesと正確に一致するべき同意したベンダー/目的の配列を返すべきです
  function cmpConvertResponseToGroupList (cmpRawOutput) {
    if (cmpCheckForWellFormedDecision(cmpRawOutput) !== true) return false;
    return getAllowedCategoriesAndServices(cmpRawOutput)
  }

  // この関数やそれ以下のものを変更する必要はありません
  function cmpCheckForTiqConsent (cmpRawOutput, tiqGroupName) {
    // 理解できないものはオプトアウトとして扱います
    if (cmpCheckForWellFormedDecision(cmpRawOutput) !== true) return false

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

/*
  // デバッグ/開発用の出力 - このブロックのコメントを外し、テストページにこのテンプレート全体を貼り付け/再貼り付けします
  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 : 特定のCookieConsent構成を読み込み、CMPをレンダリングするためのCSSとJSを注入します。条件によっては複数必要になる場合があります。
 */

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

// CookieConsentモーダル構成
// すべての構成オプション: 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: '私たちはあなたのプライバシーを尊重します',
          description: '私たちはブラウザの保存を使用して、あなたが私たちのウェブサイトをどのように使用しているかを理解し、あなたに関連性のある情報とオファーを表示したいと考えています。',
          acceptAllBtn: 'すべてを承諾',
          acceptNecessaryBtn: '必要なものを承諾',
          showPreferencesBtn: '構成を管理',
          footer: '<a href="#">プライバシーポリシー</a>'
        },
        preferencesModal: {
          title: '構成を管理',
          acceptAllBtn: 'すべてを承諾',
          acceptNecessaryBtn: '必要なものを承諾',
          savePreferencesBtn: '選択を承諾',
          closeIconLabel: 'モーダルを閉じる',
          sections: [
            {
              title: '私たちはあなたのプライバシーを尊重します',
              description: '私たちはブラウザの保存を使用して、あなたの構成を記憶し、サイトの使用方法を理解し、あなたに関連性のあるオファーを表示します。<br><br>選択をして、その特定の目的に対する同意をクリックしてください。あなたはいつでも同意を変更または撤回することができます。'
            },
            {
              title: '厳密に必要 <span class="pm__badge">常に有効</span>',
              description: 'このトラッキングはウェブサイトの正常な動作に必要不可欠で、無効にすることはできません。',
              linkedCategory: 'necessary'
            },
            {
              title: 'パフォーマンスと分析',
              description: 'このトラッキングは、私たちのウェブサイトのパフォーマンスとあなたがそれをどのように使用しているかについての情報を収集します。',
              linkedCategory: 'analytics',
              cookieTable: {
                caption: '分析用クッキー',
                headers: {
                  name: '名前',
                  description: '説明',
                  duration: '期間'
                },
                body: [
                  {
                    name: '_ga',
                    description: 'ユーザーを区別するために使用されます。',
                    duration: '2年'
                  },
                  {
                    name: '_ga_1234ABCD',
                    description: 'セッションの状態を維持するために使用されます。',
                    duration: '2年'
                  }
                ]
              }
            },
            {
              title: 'マーケティングとソーシャル',
              description: 'このトラッキングは、あなたが私たちのウェブサイトをどのように使用しているかについての情報を収集し、あなたが興味を持つ可能性のあるオファーを表示します。',
              linkedCategory: 'marketing'
            },
            {
              title: '詳細情報',
              description: 'クッキーについて詳しく知るには、<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);

// 同意ログ拡張
// Scope: Pre Loader

function logConsentChanges(event){
    var tealiumAccountForLogging = 'services-caleb'
    var tealiumProfileForLogging = 'main'
    
    // CMP (CookieConsentV3)からすべてのフィールドを取得します
    var cookie = CookieConsent.getCookie();
    var preferences = CookieConsent.getUserPreferences();

    // このペイロードは、特定の顧客のニーズに合わせて簡単に調整することができます
    var userConsent = {
        tealium_event: 'consent_decision', // 古いペイロードを保持しようとしないでください
        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
    };
    
    // この決定が行われる前にCollectが実行された場合にのみ、最初の決定を取得します
    // これはレースであり、このコールバックの速度により、ほとんどの場合、これが勝つと思います
    var tealiumVisitorId = utag && utag.loader && utag.loader.RC('utag_main').v_id
    
    // tealium_visitor_idが存在する場合にのみ追加します
    if (tealiumVisitorId) {
        userConsent.tealium_visitor_id = tealiumVisitorId
    }
    
    // データをログに記録または配布するために送信します
    fetch('https://collect.tealiumiq.com/event', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(userConsent)
```});
}

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