@dpgradio/creative 7.6.0-beta.2 → 8.1.0

package/README.md

@@ -30,9 +30,9 @@ Example:
 @import "@dpgradio/creative/styles/fonts/qmusic";
 
 body, html {
-  background-color: rgb(var(--q-teal));
+  background-color: rgb(var(--q-green));
   color: rgb(var(--q-grey) / 0.8);
-  font-family: 'QMarkMyWords';
+  font-family: 'BlackBones';
 }
 ```
 
@@ -61,11 +61,11 @@ await configuration.retrieveConfigForDetectedStation(appId) // Default, by hostn
 // Or, if you want to retrieve the config by hostnames only.
 await configuration.retrieveConfigByHostname(appId)
 // Or, if you want to retrieve the config for a specific station:
-await configuration.retrieveConfigByStation(stationId, appId)
+await configuration.retrieveConfigForStation(stationId, appId)
 
 // By default the first station ID (stationIdA) is used as the current station of the configuration.
 // If you want to use a different station, you can do so by calling setStation:
-await configuration.retrieveConfigByStations([stationIdA, stationIdB, stationIdC], appId)
+await configuration.retrieveConfigForStations([stationIdA, stationIdB, stationIdC], appId)
 configuration.setStation(stationIdC)
 ```
 You can change the station later on at any time without having to retrieve the config again.
@@ -152,6 +152,18 @@ dataLayer.pushVirtualPageView(brand) // brand is not required when the config is
 dataLayer.pushEvent(event, data)
 ```
 
+With Mixpanel
+```js
+import { mixpanel } from '@dpgradio/creative'
+import Mixpanel from 'mixpanel-browser'
+
+mixpanel.initialize(Mixpanel, {
+    mixpanelId: 'MIXPANEL ID',
+})
+
+mixpanel.trackEvent(event, data)
+```
+
 ## API
 
 With an initialized [configuration](#config):
@@ -354,6 +366,25 @@ const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-
 (await shareable.generateUsingImage(image)).openWhatsappUrl()
 ```
 
+## CSP
+
+Sometimes it's necessary to set strict Content Security Policy (CSP) headers. When that's the case a nicety of some of the methods in this package is that they support a random nonce to be passed in so extra sources (GTM, Privacy gate) don't need to be explicitly whitelisted (since they might be unknown at the time of development). Our datalayer and privacy gate initializers have an optional `nonce` parameter that can be passed in.
+
+```js
+import { privacy, dataLayer } from '@dpgradio/creative'
+
+privacy.initialize(privacyManagerId, websiteUrl, cmpCname, { nonce: "abc1234" })
+dataLayer.initialize({ nonce: "abc1234" })
+```
+
+Which then allows you to whitelist that nonce in your CSP header
+
+```
+Content-Security-Policy: script-src 'nonce-abc1234'
+```
+
+**!! Take note that this nonce need to be random on every request, as else this security is useless !!**
+
 ## Utilities
 
 This package provides a number of utility functions.