diff --git a/CHANGELOG.md b/CHANGELOG.md index 7dc8fd3..3fa50fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed +- Options for the wrapper are now accessible under a single global variable `window.cc_wrapper_config` instead of multiple smaller variables (GTM template must be updated). - Modified regex validation rule for GTM field `Package version`. The regex now allows beta and alpha versions. ## [0.2.7] - 2021-12-22 diff --git a/gtm_template.tpl b/gtm_template.tpl index e53cd60..b16fda9 100644 --- a/gtm_template.tpl +++ b/gtm_template.tpl @@ -1288,7 +1288,7 @@ for (translationKey in translationsData) { translations[translation.locale][translation.key] = translation.value; } -// set plugin options +// create plugin options const pluginOptions = { force_consent: data.force_consent, autorun: data.autorun, @@ -1309,46 +1309,39 @@ if (data.hasOwnProperty('script_selector')) { pluginOptions.script_selector = data.script_selector; } -setInWindow('cc_plugin_options', pluginOptions, true); - -// set consent modal options -setInWindow('cc_consent_modal_options', { - layout: data.consent_modal_layout, - position: data.consent_modal_position, - transition: data.consent_modal_transition, - primary_button_role: data.consent_modal_primary_button_role, - secondary_button_role: data.consent_modal_secondary_button_role, - swap_buttons: 'secondary_primary' === data.consent_modal_buttons_order -}, true); - -// set settigns modal options -setInWindow('cc_settings_modal_options', { - layout: data.settings_modal_layout, - position: data.settings_modal_position, - transition: data.settings_modal_transition -}, true); - -// set ui options -setInWindow('cc_ui_options', { - include_default_stylesheets: data.include_default_stylesheets, - external_stylesheets: data.external_stylesheets || [], - internal_stylesheets: data.hasOwnProperty('internal_stylesheets') ? [data.internal_stylesheets] : [], - modal_trigger_selector: data.modal_trigger_selector || undefined +// setup wrapper config +setInWindow('cc_wrapper_config', { + plugin_options: pluginOptions, + + consent_modal_options: { + layout: data.consent_modal_layout, + position: data.consent_modal_position, + transition: data.consent_modal_transition, + primary_button_role: data.consent_modal_primary_button_role, + secondary_button_role: data.consent_modal_secondary_button_role, + swap_buttons: 'secondary_primary' === data.consent_modal_buttons_order + }, + + settings_modal_options: { + layout: data.settings_modal_layout, + position: data.settings_modal_position, + transition: data.settings_modal_transition + }, + + ui_options: { + include_default_stylesheets: data.include_default_stylesheets, + external_stylesheets: data.external_stylesheets || [], + internal_stylesheets: data.hasOwnProperty('internal_stylesheets') ? [data.internal_stylesheets] : [], + modal_trigger_selector: data.modal_trigger_selector || undefined + }, + + storage_pool: Object.values(storagePool), + event_triggers: Object.values(eventTriggers), + locales: data.locales, + translations: translations }, true); -// set storage pool -setInWindow('cc_storage_pool', Object.values(storagePool), true); - -// set event triggers -setInWindow('cc_event_triggers', Object.values(eventTriggers), true); - -// set locales -setInWindow('cc_locales', data.locales, true); - -// set rewritten translations -setInWindow('cc_translations', translations, true); - -// inject cookie manager wrapper +// inject cookie consent wrapper const packageVersion = 'latest' === data.package_version ? '' : '@' + data.package_version; const cookieConsentWrapper = 'https://unpkg.com/68publishers-cookie-consent' + packageVersion + '/dist/cookie-consent.min.js'; @@ -1732,280 +1725,7 @@ ___WEB_PERMISSIONS___ "mapValue": [ { "type": 1, - "string": "cc_plugin_options" - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": false - } - ] - }, - { - "type": 3, - "mapKey": [ - { - "type": 1, - "string": "key" - }, - { - "type": 1, - "string": "read" - }, - { - "type": 1, - "string": "write" - }, - { - "type": 1, - "string": "execute" - } - ], - "mapValue": [ - { - "type": 1, - "string": "cc_storage_pool" - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": false - } - ] - }, - { - "type": 3, - "mapKey": [ - { - "type": 1, - "string": "key" - }, - { - "type": 1, - "string": "read" - }, - { - "type": 1, - "string": "write" - }, - { - "type": 1, - "string": "execute" - } - ], - "mapValue": [ - { - "type": 1, - "string": "cc_locales" - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": false - } - ] - }, - { - "type": 3, - "mapKey": [ - { - "type": 1, - "string": "key" - }, - { - "type": 1, - "string": "read" - }, - { - "type": 1, - "string": "write" - }, - { - "type": 1, - "string": "execute" - } - ], - "mapValue": [ - { - "type": 1, - "string": "cc_consent_modal_options" - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": false - } - ] - }, - { - "type": 3, - "mapKey": [ - { - "type": 1, - "string": "key" - }, - { - "type": 1, - "string": "read" - }, - { - "type": 1, - "string": "write" - }, - { - "type": 1, - "string": "execute" - } - ], - "mapValue": [ - { - "type": 1, - "string": "cc_settings_modal_options" - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": false - } - ] - }, - { - "type": 3, - "mapKey": [ - { - "type": 1, - "string": "key" - }, - { - "type": 1, - "string": "read" - }, - { - "type": 1, - "string": "write" - }, - { - "type": 1, - "string": "execute" - } - ], - "mapValue": [ - { - "type": 1, - "string": "cc_translations" - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": false - } - ] - }, - { - "type": 3, - "mapKey": [ - { - "type": 1, - "string": "key" - }, - { - "type": 1, - "string": "read" - }, - { - "type": 1, - "string": "write" - }, - { - "type": 1, - "string": "execute" - } - ], - "mapValue": [ - { - "type": 1, - "string": "cc_ui_options" - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": true - }, - { - "type": 8, - "boolean": false - } - ] - }, - { - "type": 3, - "mapKey": [ - { - "type": 1, - "string": "key" - }, - { - "type": 1, - "string": "read" - }, - { - "type": 1, - "string": "write" - }, - { - "type": 1, - "string": "execute" - } - ], - "mapValue": [ - { - "type": 1, - "string": "cc_event_triggers" + "string": "cc_wrapper_config" }, { "type": 8, diff --git a/src/CookieConsentWrapperFactory.js b/src/CookieConsentWrapperFactory.js index 7c22d78..0bec709 100644 --- a/src/CookieConsentWrapperFactory.js +++ b/src/CookieConsentWrapperFactory.js @@ -9,15 +9,16 @@ class CookieConsentWrapperFactory { } const cookieConsentWrapper = new CookieConsentWrapper(this._createGtagFunction()); + const wrapperConfig = window.cc_wrapper_config || {}; - this._setupPluginOptions(cookieConsentWrapper); - this._setupConsentModalOptions(cookieConsentWrapper); - this._setupSettingsModalOptions(cookieConsentWrapper); - this._setupUiOptions(cookieConsentWrapper); - this._setupStoragePool(cookieConsentWrapper); - this._setupEventTriggers(cookieConsentWrapper); - this._setupLocales(cookieConsentWrapper); - this._setupTranslations(cookieConsentWrapper); + this._setupPluginOptions(cookieConsentWrapper, wrapperConfig); + this._setupConsentModalOptions(cookieConsentWrapper, wrapperConfig); + this._setupSettingsModalOptions(cookieConsentWrapper, wrapperConfig); + this._setupUiOptions(cookieConsentWrapper, wrapperConfig); + this._setupStoragePool(cookieConsentWrapper, wrapperConfig); + this._setupEventTriggers(cookieConsentWrapper, wrapperConfig); + this._setupLocales(cookieConsentWrapper, wrapperConfig); + this._setupTranslations(cookieConsentWrapper, wrapperConfig); cookieConsentWrapper.init(window, document); @@ -38,33 +39,33 @@ class CookieConsentWrapperFactory { return gtag; } - _setupPluginOptions(wrapper) { - if (window.cc_plugin_options && 'object' === typeof window.cc_plugin_options) { - wrapper.setPluginOptions(window.cc_plugin_options); + _setupPluginOptions(wrapper, wrapperConfig) { + if (wrapperConfig.hasOwnProperty('plugin_options') && 'object' === typeof wrapperConfig.plugin_options) { + wrapper.setPluginOptions(wrapperConfig.plugin_options); } } - _setupConsentModalOptions(wrapper) { - if (window.cc_consent_modal_options && 'object' === typeof window.cc_consent_modal_options) { - wrapper.setConsentModalOptions(window.cc_consent_modal_options); + _setupConsentModalOptions(wrapper, wrapperConfig) { + if (wrapperConfig.hasOwnProperty('consent_modal_options') && 'object' === typeof wrapperConfig.consent_modal_options) { + wrapper.setConsentModalOptions(wrapperConfig.consent_modal_options); } } - _setupSettingsModalOptions(wrapper) { - if (window.cc_settings_modal_options && 'object' === typeof window.cc_settings_modal_options) { - wrapper.setSettingsModalOptions(window.cc_settings_modal_options); + _setupSettingsModalOptions(wrapper, wrapperConfig) { + if (wrapperConfig.hasOwnProperty('settings_modal_options') && 'object' === typeof wrapperConfig.settings_modal_options) { + wrapper.setSettingsModalOptions(wrapperConfig.settings_modal_options); } } - _setupUiOptions(wrapper) { - if (window.cc_ui_options && 'object' === typeof window.cc_ui_options) { - wrapper.setUiOptions(window.cc_ui_options); + _setupUiOptions(wrapper, wrapperConfig) { + if (wrapperConfig.hasOwnProperty('ui_options') && 'object' === typeof wrapperConfig.ui_options) { + wrapper.setUiOptions(wrapperConfig.ui_options); } } - _setupStoragePool(wrapper) { - if (window.cc_storage_pool && Array.isArray(window.cc_storage_pool)) { - const storagePool = window.cc_storage_pool; + _setupStoragePool(wrapper, wrapperConfig) { + if (wrapperConfig.hasOwnProperty('storage_pool') && Array.isArray(wrapperConfig.storage_pool)) { + const storagePool = wrapperConfig.storage_pool; for (let i in storagePool) { if (!storagePool.hasOwnProperty(i)) { @@ -76,9 +77,9 @@ class CookieConsentWrapperFactory { } } - _setupEventTriggers(wrapper) { - if (window.cc_event_triggers && Array.isArray(window.cc_event_triggers)) { - const eventTriggers = window.cc_event_triggers; + _setupEventTriggers(wrapper, wrapperConfig) { + if (wrapperConfig.hasOwnProperty('event_triggers') && Array.isArray(wrapperConfig.event_triggers)) { + const eventTriggers = wrapperConfig.event_triggers; for (let i in eventTriggers) { if (!eventTriggers.hasOwnProperty(i)) { @@ -92,9 +93,9 @@ class CookieConsentWrapperFactory { } } - _setupLocales(wrapper) { - if (window.cc_locales && Array.isArray(window.cc_locales)) { - const locales = window.cc_locales; + _setupLocales(wrapper, wrapperConfig) { + if (wrapperConfig.hasOwnProperty('locales') && Array.isArray(wrapperConfig.locales)) { + const locales = wrapperConfig.locales; let localeKey; for (localeKey in locales) { @@ -107,9 +108,9 @@ class CookieConsentWrapperFactory { } } - _setupTranslations(wrapper) { - if (window.cc_translations && 'object' === typeof window.cc_translations) { - const translations = window.cc_translations; + _setupTranslations(wrapper, wrapperConfig) { + if (wrapperConfig.hasOwnProperty('translations') && 'object' === typeof wrapperConfig.translations) { + const translations = wrapperConfig.translations; let locale; for (locale in translations) {