@dpgradio/creative 7.1.0 → 7.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpgradio/creative",
-  "version": "7.1.0",
+  "version": "7.1.1",
   "description": "Support package for standalone Javascript applications",
   "main": "src/index.js",
   "scripts": {

package/src/analytics/dataLayer.js

@@ -10,8 +10,28 @@ class DataLayer {
     this.userInformation = {}
   }
 
-  initialize(gtmId = 'GTM-TW99VZN') {
-    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`)
+  /**
+   * @param {Object} parameters   The parameters object.
+   * @param {string} [parameters.gtmId]   The GTM ID - Defaults to our default GTM tag
+   * @param {string} [parameters.nonce]   The nonce value for the script tag (Used for CSP).
+   */
+  initialize(parameters) {
+    // Backwards compatability
+    if (typeof parameters === 'string') {
+      parameters = { gtmId: parameters }
+
+      // Deprecation warning in development
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          '@dpgmedia/creative',
+          'DEPRECATION WARNING: new Datalayer(gtmId) is deprecated, please use new Datalayer({ gtmId }) instead.'
+        )
+      }
+    }
+
+    const { gtmId = 'GTM-TW99VZN', nonce } = parameters || {}
+
+    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`, { nonce })
 
     this.pushGtmStart()
     this.pushUserWhenAuthenticated()

package/src/config/config.js

@@ -18,10 +18,10 @@ class Configuration {
   /**
    * Retrieve the configuration for the current hostname or present query parameter and the given app (optional).
    */
-  async retrieveConfigForDetectedStation(appId = null) {
+  async retrieveConfigForDetectedStation(appId = null, { parameterName = 'stationId' } = {}) {
     const parameters = new URLSearchParams(window.location.search)
-    if (parameters.has('stationId')) {
-      return this.retrieveConfigForStation(parameters.get('stationId'), appId)
+    if (parameters.has(parameterName)) {
+      return this.retrieveConfigForStation(parameters.get(parameterName), appId)
     }
     return this.retrieveConfigByHostname(appId)
   }

package/src/privacy/privacy.js

@@ -15,11 +15,14 @@ class Privacy {
    * @param {string}  privacyManagerId   e.g. '148844'
    * @param {string}  websiteUrl         e.g. 'https://qmusic.nl'
    * @param {string}  cmpCname           e.g. 'https://cmp.qmusic.nl'
+   * @param {Object}  options            Additional options.
+   * @param {string}  [options.nonce]    The nonce value for the script tag (Used for CSP).
    */
   initialize(
     privacyManagerId = config('privacy_manager_id'),
     websiteUrl = config('website_url'),
-    cmpCname = config('cmp_cname')
+    cmpCname = config('cmp_cname'),
+    { nonce = undefined } = {}
   ) {
     window.cmpProperties = {
       privacyManagerId,
@@ -28,7 +31,7 @@ class Privacy {
       language: 'nl',
     }
 
-    loadScript('https://myprivacy-static.dpgmedia.net/consent.js')
+    loadScript('https://myprivacy-static.dpgmedia.net/consent.js', { nonce })
 
     this.requestConsentInformation()
   }

package/src/utils/loadScript.js

@@ -1,12 +1,15 @@
 // From: https://github.com/medialaan/radio-radioplayer-frontend/blob/develop/src/general/utils/loadScript.js
 // TODO: Refactor
 
-export default function loadScript(url, { timeout = undefined } = {}) {
+export default function loadScript(url, { timeout = undefined, nonce = undefined } = {}) {
   return new Promise((resolve, reject) => {
     let script = document.createElement('script')
     const firstScript = document.getElementsByTagName('script')[0]
     script.async = true
     script.defer = true
+    if (nonce) {
+      script.nonce = nonce
+    }
 
     const loadScriptTimeout = timeout ? setTimeout(() => reject(`Loading script [${url}] blocked.`), timeout) : null