Merge pull request #23 from gladly-team/kevin/upgrade-cmp

Upgrade CMP

package.json

@@ -18,11 +18,11 @@
     "test:coverage": "yarn run test:run --coverage",
     "test:watch": "yarn run test:run --watch",
     "quantcast:update": "npm-run-all -s quantcast:update:info quantcast:choice-js:update quantcast:cmp-js:download",
-    "quantcast:update:info": "echo \"########## Downloading the original source JS for Quantcast Choice version 22. To use a different version, first update change the version number in the QC portal for the tab.gladly.dev domain, then modify the version number in the cmp2.js URL in the package.json script.##########\"",
+    "quantcast:update:info": "echo \"########## Downloading the original source JS for Quantcast Choice version 35. To use a different version, first update change the version number in the QC portal for the tab.gladly.dev domain, then modify the version number in the cmp2.js URL in the package.json script.##########\"",
     "quantcast:choice-js:update": "npm-run-all -s quantcast:choice-js:download quantcast:choice-js:format",
     "quantcast:choice-js:download": "curl https://quantcast.mgr.consensu.org/choice/FPBLJYpJgR9Zu/tab.gladly.dev/choice.js > ./quantcast/qcChoiceOriginal.js",
     "quantcast:choice-js:format": "eslint ./quantcast/qcChoiceOriginal.js --fix --no-ignore; exit 0",
-    "quantcast:cmp-js:download": "curl https://quantcast.mgr.consensu.org/tcfv2/22/cmp2.js > ./quantcast/qcCmpOriginal.js",
+    "quantcast:cmp-js:download": "curl https://quantcast.mgr.consensu.org/tcfv2/35/cmp2.js?referer=tab.gladly.io > ./quantcast/qcCmpOriginal.js",
     "quantcast:cmp-js:copy-with-edits": "sed -E 's/SameSite=Lax;secure/SameSite=None;secure/g; s/_isUserInUS=(true|false)/_isUserInUS=window.tabCMP.doesCCPAApply/g; s/_isUserInEU=(true|false)/_isUserInEU=window.tabCMP.doesGDPRApply/g;' ./quantcast/qcCmpOriginal.js > ./src/qcCmpModified.js",
     "dev:publish": "npm-run-all -s build dev:yalc-publish-push",
     "dev:yalc-publish-push": "yalc publish --push"

quantcast/qcChoiceOriginal.js

@@ -1,10 +1,16 @@
 ;(function () {
+  const cmpFile =
+    'noModule' in HTMLScriptElement.prototype ? 'cmp2.js' : 'cmp2-polyfilled.js'
   ;(function () {
     const cmpScriptElement = document.createElement('script')
     const firstScript = document.getElementsByTagName('script')[0]
     cmpScriptElement.async = true
     cmpScriptElement.type = 'text/javascript'
-    const cmpVersion = 'https://quantcast.mgr.consensu.org/tcfv2/22/cmp2.js'
+    const cmpVersion =
+      'https://quantcast.mgr.consensu.org/tcfv2/35/CMP_FILE?referer=tab.gladly.dev'.replace(
+        'CMP_FILE',
+        cmpFile
+      )
     cmpScriptElement.src = cmpVersion
     window._qevents = window._qevents || []
     ;(function () {
@@ -21,18 +27,6 @@
     })()
     const qcaccount = 'p-' + 'FPBLJYpJgR9Zu'
     window._qevents.push({ qacct: qcaccount, source: 'choice' })
-    const cmpNoScriptElement = document.createElement('noscript')
-    const div = document.createElement('div')
-    div.style.display = 'none;'
-    const img = document.createElement('img')
-    img.src = '//pixel.quantserve.com/pixel/p-' + 'FPBLJYpJgR9Zu' + '.gif'
-    img.border = '0'
-    img.height = '1'
-    img.width = '1'
-    img.alt = 'Quantcast'
-    div.appendChild(img)
-    cmpNoScriptElement.appendChild(div)
-    firstScript.parentNode.insertBefore(cmpNoScriptElement, firstScript)
     firstScript.parentNode.insertBefore(cmpScriptElement, firstScript)
   })()
   ;(function () {
@@ -120,23 +114,22 @@
     autoDetectedLanguage = splitLang(navigator.language)
   }
   const choiceMilliSeconds = new Date().getTime()
-  window.__tcfapi('init', 2, function () {}, {
-    premiumProperties: {},
+  window.__tcfapi('init', 2, () => {}, {
+    premiumProperties: { googleWhitelist: [1] },
     coreUiLabels: {},
     premiumUiLabels: {
       uspDnsText: [
-        '<p>This preference sets whether advertisers can personalize ads to you. Personalized ads can be more interesting and often raise more money for charity. We <strong>never</strong> sell personal information like email addresses, nor do we collect your browsing history on other sites.</p><br/><p>We and our partners use technologies to process personal information, including IP addresses and pseudonymous identifiers associated with cookies. This information is processed to personalize ads based on your interests, run and optimize marketing campaigns, measure the performance of ads and content, and derive insights about the audiences who engage with ads and content. This data is an integral part of how we raise money for non-profit partners, make revenue to support our staff, and generate relevant content for our audience. You can learn more about our data collection and use practices in our Privacy Policy.</p><br/><p>If you wish to request that your personal information is not shared with third parties, please click on the below checkbox and confirm your selection. Please note that after your opt out request is processed, we may still collect your information in order to operate our site.</p>',
+        '<p>This preference sets whether advertisers can personalize ads to you. Personalized ads can be more interesting and often raise more money for charity. We <strong>never</strong> sell personal information like email addresses, nor do we collect your browsing history on other sites.</p>\n<p>We and our partners use technologies to process personal information, including IP addresses and pseudonymous identifiers associated with cookies. This information is processed to personalize ads based on your interests, run and optimize marketing campaigns, measure the performance of ads and content, and derive insights about the audiences who engage with ads and content. This data is an integral part of how we raise money for non-profit partners, make revenue to support our staff, and generate relevant content for our audience. You can learn more about our data collection and use practices in our Privacy Policy.</p>\n<p>If you wish to request that your personal information is not shared with third parties, please click on the below checkbox and confirm your selection. Please note that after your opt out request is processed, we may still collect your information in order to operate our site.</p>',
       ],
     },
     theme: { uxPrimaryButtonColor: '#9d4ba3' },
     coreConfig: {
       consentScope: 'service',
       thirdPartyStorageType: 'iframe',
-      consentIdentityEnabled: false,
-      initScreenBodyTextOption: 1,
       consentOnSafari: false,
       lang_: 'en',
       displayUi: 'inEU',
+      initScreenBodyTextOption: 1,
       defaultToggleValue: 'off',
       initScreenRejectButtonShowing: false,
       publisherConsentRestrictionIds: [],
@@ -148,7 +141,7 @@
       uiLayout: 'popup',
       publisherLogo:
         'https://tab.gladly.io/static/logo-with-text-257bbffc6dcac5076e8ac31eed8ff73c.svg',
-      publisherPurposeIds: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      publisherPurposeIds: [1, 3, 4, 5, 6, 9],
       publisherPurposeLegitimateInterestIds: [2, 7, 8, 10],
       publisherSpecialPurposesIds: [1, 2],
       publisherFeaturesIds: [],
@@ -157,7 +150,7 @@
       vendorListUpdateFreq: 90,
       quantcastAccountId: 'FPBLJYpJgR9Zu',
       privacyMode: ['GDPR', 'USP'],
-      hashCode: 'viIA/yKcUUmwj5xfSRz5eQ',
+      hashCode: 'Qx0fyhosVVgZMRwlCoEJjQ',
       publisherCountryCode: 'US',
       publisherName: 'LOCAL - Tab for a Cause',
       vendorPurposeIds: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

src/initCMP.js

@@ -23,22 +23,21 @@ const initCMP = (options) => {
   const language = getLanguage()
 
   window.__tcfapi('init', 2, () => {}, {
-    premiumProperties: {},
+    premiumProperties: { googleWhitelist: [1] },
     coreUiLabels: {},
     premiumUiLabels: {
       uspDnsText: [
-        '<p>This preference sets whether advertisers can personalize ads to you. Personalized ads can be more interesting and often raise more money for charity. We <strong>never</strong> sell personal information like email addresses, nor do we collect your browsing history on other sites.</p><br/><p>We and our partners use technologies to process personal information, including IP addresses and pseudonymous identifiers associated with cookies. This information is processed to personalize ads based on your interests, run and optimize marketing campaigns, measure the performance of ads and content, and derive insights about the audiences who engage with ads and content. This data is an integral part of how we raise money for non-profit partners, make revenue to support our staff, and generate relevant content for our audience. You can learn more about our data collection and use practices in our Privacy Policy.</p><br/><p>If you wish to request that your personal information is not shared with third parties, please click on the below checkbox and confirm your selection. Please note that after your opt out request is processed, we may still collect your information in order to operate our site.</p>',
+        '<p>This preference sets whether advertisers can personalize ads to you. Personalized ads can be more interesting and often raise more money for charity. We <strong>never</strong> sell personal information like email addresses, nor do we collect your browsing history on other sites.</p>\n<p>We and our partners use technologies to process personal information, including IP addresses and pseudonymous identifiers associated with cookies. This information is processed to personalize ads based on your interests, run and optimize marketing campaigns, measure the performance of ads and content, and derive insights about the audiences who engage with ads and content. This data is an integral part of how we raise money for non-profit partners, make revenue to support our staff, and generate relevant content for our audience. You can learn more about our data collection and use practices in our Privacy Policy.</p>\n<p>If you wish to request that your personal information is not shared with third parties, please click on the below checkbox and confirm your selection. Please note that after your opt out request is processed, we may still collect your information in order to operate our site.</p>',
       ],
     },
     theme: { uxPrimaryButtonColor: primaryButtonColor },
     coreConfig: {
       consentScope: 'service',
       thirdPartyStorageType: 'iframe',
-      consentIdentityEnabled: false,
-      initScreenBodyTextOption: 1,
       consentOnSafari: false,
       lang_: language,
       displayUi: 'inEU',
+      initScreenBodyTextOption: 1,
       defaultToggleValue: 'off',
       initScreenRejectButtonShowing: false,
       publisherConsentRestrictionIds: [],
@@ -49,7 +48,7 @@ const initCMP = (options) => {
       displayPersistentConsentLink,
       uiLayout: 'popup',
       publisherLogo,
-      publisherPurposeIds: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      publisherPurposeIds: [1, 3, 4, 5, 6, 9],
       publisherPurposeLegitimateInterestIds: [2, 7, 8, 10],
       publisherSpecialPurposesIds: [1, 2],
       publisherFeaturesIds: [],
@@ -58,7 +57,7 @@ const initCMP = (options) => {
       vendorListUpdateFreq: 90,
       quantcastAccountId: 'FPBLJYpJgR9Zu',
       privacyMode: ['GDPR', 'USP'],
-      hashCode: 'viIA/yKcUUmwj5xfSRz5eQ',
+      hashCode: 'Qx0fyhosVVgZMRwlCoEJjQ',
       publisherCountryCode: 'US',
       publisherName,
       vendorPurposeIds: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

src/qcChoiceModified.js

@@ -5,11 +5,17 @@ export const setUpQuantcastChoice = () => {
   // First section of QC Choice JS.
   // Modified: remove script tag creation for CMP JS. We load
   // the CMP JS ourselves.
+  // const cmpFile =
+  // 'noModule' in HTMLScriptElement.prototype ? 'cmp2.js' : 'cmp2-polyfilled.js'
   // const cmpScriptElement = document.createElement('script')
-  const firstScript = document.getElementsByTagName('script')[0]
+  // const firstScript = document.getElementsByTagName('script')[0]
   // cmpScriptElement.async = true
   // cmpScriptElement.type = 'text/javascript'
-  // const cmpVersion = 'https://quantcast.mgr.consensu.org/tcfv2/22/cmp2.js'
+  // const cmpVersion =
+  // 'https://quantcast.mgr.consensu.org/tcfv2/35/CMP_FILE?referer=tab.gladly.dev'.replace(
+  //   'CMP_FILE',
+  //   cmpFile
+  // )
   // cmpScriptElement.src = cmpVersion
   window._qevents = window._qevents || []
 
@@ -26,18 +32,7 @@ export const setUpQuantcastChoice = () => {
   // Third section of QC Choice JS.
   const qcaccount = 'p-' + 'FPBLJYpJgR9Zu'
   window._qevents.push({ qacct: qcaccount, source: 'choice' })
-  const cmpNoScriptElement = document.createElement('noscript')
-  const div = document.createElement('div')
-  div.style.display = 'none;'
-  const img = document.createElement('img')
-  img.src = '//pixel.quantserve.com/pixel/p-' + 'FPBLJYpJgR9Zu' + '.gif'
-  img.border = '0'
-  img.height = '1'
-  img.width = '1'
-  img.alt = 'Quantcast'
-  div.appendChild(img)
-  cmpNoScriptElement.appendChild(div)
-  firstScript.parentNode.insertBefore(cmpNoScriptElement, firstScript)
+
   // Modified: remove script tag creation for CMP JS. We load
   // the CMP JS ourselves.
   // firstScript.parentNode.insertBefore(cmpScriptElement, firstScript)