Package containing scripts used by Schibsteds' sites to integrate with Sourcepoint CMP
This repository contains a small library to simplify the implementation of popup-ups delivered by Sourcepoint.
Don't hesitate to contact us on our Slack channel: #consent-management-platform-support.
Configuration for your implementation can be found in the CMP_Configuration_setup.
| Required parameters | Description |
|---|---|
propertyId: number | Maps the message to a specific property (website, app, OTT) as set up in the Sourcepoint account dashboard. |
consentLanguage: string | Consent message language. Available: en, no, sv, fi, dk. |
baseEndpoint: string | A single server endpoint that serves the messaging experience. |
groupPmId: number | SCC and TCF only. Allows to use the Privacy Manager ID. |
| Optional parameters | Description |
|---|---|
accountId: number | Used to override organization's Sourcepoint account. Default value:1960 |
propertyHref: string | Used to display a message from one property, e.g. production url, on another domain, e.g. staging/test site. |
targetingParams: array<string> | Array with key value pairs passed to Sourcepoint - could be used as conditions in scenarios. |
userId: number | The Schibsted account user identifier for the logged in user. E.g. 123456, not full SDRN. Send only if user is logged in. More info below. |
realm: string | The Schibsted account realm of the logged in user. E.g. schibsted.com, spid.no, schibsted.fi. More info below. |
clientId: string | Provide in order to redirect user to Privacy Settings page with client_id parameter. It's a unique identifier generated for an individual service client. |
pulseTracker: object | Pulse Event Tracker object. More details here. Only in the client-side integration. |
referrer: string | Used to allow users to return to the exact page from Privacy Settings UI. Its default value is the current URL. |
state: string | It should be a base64-encoded string. Enables passing any query parameters as a part of a specific redirect URL. More details in Privacy Settings docs. |
pulseObjectName: string | Provide when you assign Pulse to different variable than window.pulse. Used in the server-side integration type. |
showInWebview: string | Provide if you want to enable displaying modal in a mobile app webview. "all" - all modals will be enabled; "scc" - only SCC modal will be enabled; "tcf" - only TCF modal will be enabled; "psi" - only PSI modal will be enabled |
identityObject: object | Schibsted Account Identity object. More details here. |
identityObjectName: string | Provide in case you assigned the Identity object to a different global variable than window.Identity. |
enableUserCentric: boolean | Enables the brand level consent feature. The user's consent is attached to the authId and will be stored on the backend. |
groupId: string | Extension of the enableUserCentric parameter: to handle more specific cases. Provide if consent shouldn't be tied to the merchant level. |
disableNativeConsentCheck: boolean | Disable blocking of CMP snippet on webviews that don't provide _sp_pass_consent parameter in URL |
Install package from Artifactory using command:
// npm
npm install @m10s/cmp
// yarn
yarn add @m10s/cmp
To configure your .npmrc file, look in npm-virtual under the "Set me up" section.
Note: The package is also available on NPMJS. If you don't have access to Artifactory, you can use the public package.
The PSI is used to identify Schibsted as the data controller and alert users about choices available to them in Privacy Settings, along with a link to get there.
Browser integration
import { psi } from '@m10s/cmp';
psi(window, document, navigator, {
baseEndpoint: 'https://cmpv2.YOUR_DOMAIN/', // required
propertyId: 1234, // required
consentLanguage: 'sv', // required
userId: 123456,
realm: 'spid.no',
});
NodeJS integration
const { psi } = require('@m10s/cmp');
const snippet = psi({
baseEndpoint: 'https://cmpv2.YOUR_DOMAIN/', // required
propertyId: 1234, // required
consentLanguage: 'sv', // required
userId: 123456,
realm: 'spid.no',
});
// Now you can add the snippet to the page:
// index.js
// app.get('/', (req, res) => res.render('page', { snippet }));
// page.hbs
// <html><head>{{snippet}}</hread><body>...</body></html>
Note: Both SCC and TCF integrations include support for PSI. This means that if you call scc or tcf snippet, don't call psi as part of the same integration.
If you are using the TCF integration, PSI will most likely only be visible to logged in users. There are 2 ways to achieve this:
Provide userId to the initial config.
The user state must be provided with the initialisation of the tcf snippet, so you'll have to delay the initialisation of the snippet until there is a response from the Schibsted Account SDK.
Use the Brand Level Consent feature.
With this feature we can retrieve and set the userId ourselves.
Privacy Settings Introducer (PSI) is a part of Schibsted Cookie Consent integration. If your site is already integrated with PSI you need to remove existing integration (or do required changes).
Browser integration
import { scc } from '@m10s/cmp';
scc(window, document, navigator, {
baseEndpoint: 'https://cmpv2.YOUR_DOMAIN/', // required
propertyId: 1234, // required
consentLanguage: 'sv', // required
groupPmId: 1234, // required
userId: 123456,
realm: 'spid.no',
});
NodeJS integration
const { scc } = require('@m10s/cmp');
const snippet = scc({
baseEndpoint: 'https://cmpv2.YOUR_DOMAIN/', // required
propertyId: 1234, // required
consentLanguage: 'sv', // required
groupPmId: 1234, // required
userId: 123456,
realm: 'spid.no',
});
// Now you can add the snippet to the page:
// index.js
// app.get('/', (req, res) => res.render('page', { snippet }));
// page.hbs
// <html><head>{{snippet}}</hread><body>...</body></html>
In step 1 you have added required code to present user SCC and ask him about consents.
In second step you need to integrate your site with SCC Library to honour user choices.
Cookies (scripts) could belong to one of these categories:
Essential - Necessary cookies which could be set always, without asking user about the consent (this category is not supported by the library because consent is not required).CMP:advertising - Advertising related Cookies - user consent is required.CMP:analytics - Analytics and Product Development related cookies - user consent is required.CMP:marketing - Marketing related Cookies - user consent is required.CMP:personalisation - Personalisation related Cookies - user consent is required.Your site could run script only when consent was given by user.
To receive information about user choices you can use one of two provided methods:
getPermission - allows getting information about consent once (asynchronous)getPermissionSync - allows getting information about consent (synchronous)subscribe - allows getting information about the concent and be notified about future changesLibrary inform your site about one of two states (PermissionValue):
"1" - cookies could be set / script could be run - user gave consent"0" - cookies could NOT be set / script could NOT be run - user hasn't given consentnull - user hasn't made a decision yet (returned only by synchronous function)Returned values are cached in LocalStorage to speed up integration.
To allow users change their choices each page should contain a link to re trigger Schibsted Cookie Consent.
Function: window._scc_.showPrivacyManager() allows reopening Privacy Manager.
getPermissionFunction window._scc_.getPermission allows getting information about consent once:
window._scc_.getPermission(category: Categories, callback: (value: PermissionValue) => {})
Categories:
CMP:advertising - Advertising related CookiesCMP:analytics - Analytics and Product Development related cookiesCMP:marketing - Marketing related CookiesCMP:personalisation - Personalisation related CookiesPermissionValue:
"1" - cookies could be set"0" - cookies could NOT be setgetPermissionSyncFunction window._scc_.getPermissionSync allows getting information about consent once, synchronously:
window._scc_.getPermissionSync(category: Categories)
Categories:
CMP:advertising - Advertising related CookiesCMP:analytics - Analytics and Product Development related cookiesCMP:marketing - Marketing related CookiesCMP:personalisation - Personalisation related CookiesPermissionValue:
"1" - cookies could be set"0" - cookies could NOT be setnull - user hasn't made a decision yetsubscribeFunction window._scc_.subscribe allows getting information about the concent and be notified about future changes.
const unsubscribeFn = window._scc_.subscribe(category: Categories, callback: (value: PermissionValue) => {}): () => void
Categories:
CMP:advertising - Advertising related CookiesCMP:analytics - Analytics and Product Development related cookiesCMP:marketing - Marketing related CookiesCMP:personalisation - Personalisation related CookiesPermissionValue:
"1" - cookies could be set"0" - cookies could NOT be setReturned value is a function which allow unsubscribing from notification about changes.
showPrivacyManagerFunction window._scc_.showPrivacyManager allows reopening Privacy Manager - thanks to that user could change settings.
window._scc_.showPrivacyManager();
This function require parameter groupPmId in the config to work properly.
Privacy Settings Introducer (PSI) is a part of TCF integration. If your site is already integrated with PSI you need to remove existing integration (or perform the required changes).
Browser integration
import { tcf } from '@m10s/cmp';
tcf(window, document, navigator, {
baseEndpoint: 'https://cmpv2.YOUR_DOMAIN/', // required
propertyId: 1234, // required
consentLanguage: 'sv', // required
groupPmId: 1234, // required
});
NodeJS integration
const { tcf } = require('@m10s/cmp');
const snippet = tcf({
baseEndpoint: 'https://cmpv2.YOUR_DOMAIN/', // required
propertyId: 1234, // required
consentLanguage: 'sv', // required
groupPmId: 1234, // required
});
// Now you can add the snippet to the page:
// index.js
// app.get('/', (req, res) => res.render('page', { snippet }));
// page.hbs
// <html><head>{{snippet}}</hread><body>...</body></html>
In step 1 you have added required code to present user TCF and ask him about consents.
In second step you need to integrate your site with TCF Library to honour user choices.
Cookies (scripts) could belong to one of these categories:
Essential - Necessary cookies which could be set always, without asking user about the consent (this category is
not supported by the library because consent is note required).CMP:advertising - Advertising related Cookies - user consent is required.CMP:analytics - Analytics and Product Development related cookies - user consent is required.CMP:marketing - Marketing related Cookies - user consent is required.CMP:personalisation - Personalisation related Cookies - user consent is required.CMP:performance_marketing - Only used where there is a waiver from Privacy Legal to run marketing campaigns on third party platforms, and where consent for CMP:marketing does not apply.Your site could run script only when consent was given by user.
To receive information about user choices you can use one of two provided methods:
getPermission - allows getting information about consent once (asynchronous)getPermissionSync - allows getting information about consent (synchronous)subscribe - allows getting information about the concent and be notified about future changesLibrary inform your site about one of two states (PermissionValue):
"1" - cookies could be set / script could be run - user gave consent"0" - cookies could NOT be set / script could NOT be run - user hasn't given consentnull - user hasn't made a decision yet (returned only by synchronous function)Returned values are cached in LocalStorage to speed up integration.
To allow users to change their choices, each page should contain a link to re-trigger TCF.
Function: window._tcf_.showPrivacyManager allows reopening Privacy Manager.
getPermissionFunction window._tcf_.getPermission allows getting information about consent once:
window._tcf_.getPermission(category: Categories, callback: (value: PermissionValue) => {})
Categories:
CMP:advertising - Advertising related CookiesCMP:analytics - Analytics and Product Development related cookiesCMP:marketing - Marketing related CookiesCMP:personalisation - Personalisation related CookiesCMP:performance_marketing - Marketing campaigns on third party platforms related CookiesPermissionValue:
"1" - cookies could be set"0" - cookies could NOT be setgetPermissionSyncFunction window._tcf_.getPermissionSync allows getting information about consent once, synchronously:
window._tcf_.getPermissionSync(category: Categories)
Categories:
CMP:advertising - Advertising related CookiesCMP:analytics - Analytics and Product Development related cookiesCMP:marketing - Marketing related CookiesCMP:personalisation - Personalisation related CookiesCMP:performance_marketing - Marketing campaigns on third party platforms related CookiesPermissionValue:
"1" - cookies could be set"0" - cookies could NOT be setnull - user hasn't made a decision yetsubscribeFunction window._tcf_.subscribe allows getting information about the concent and be notified about future changes.
window._tcf_.subscribe(category: Categories, callback: (value: PermissionValue) => {}): () => void
Categories:
CMP:advertising - Advertising related CookiesCMP:analytics - Analytics and Product Development related cookiesCMP:marketing - Marketing related CookiesCMP:personalisation - Personalisation related CookiesCMP:performance_marketing - Marketing campaigns on third party platforms related CookiesPermissionValue:
"1" - cookies could be set"0" - cookies could NOT be setReturned value is a function which allow unsubscribing from notification about changes.
showPrivacyManagerFunction window._tcf_.showPrivacyManager allows reopening Privacy Manager - thanks to that user could change settings.
window._tcf_.showPrivacyManager();
This function require parameter groupPmId in the config to work properly.
isConsentedToAllFunction window._tcf_.isConsentedToAll allows getting information about whether user consented to all purposes and be notified about future changes.
window._tcf_.isConsentedToAll(callback: (value: boolean) => {}): () => void
getConsentedToAllSyncFunction window._tcf_.getConsentedToAllSync allows getting information about consentedAll status once (instead of reacting on consent change), based on the data retrieved from browser's local storage.
window._tcf_.getConsentedToAllSync()
Function returns boolean | null.
PSI, SCC and TCF are integrated with Pulse and we ask you to allow us to collect user and device data.
If you use the Pulse SDK, please add a tracker object to the config or assign it to the window. With the Autotracker, you will have a global pulse method which is not available when following the SDK way.
Minimum Pulse version required:
5.0.02.0.0Browser integration
Provide pulseTracker to the config:
pulseTracker: new Tracker('{CLIENT-ID}', {}, {})
In the case of SCC and TCF integrations, it is required to provide a consents object to the initial Pulse config. You can use the method getCachedOrDefaultConsentsForPulse for that purpose.
TCF
const consents = window._tcf_.getCachedOrDefaultConsentsForPulse();
const tracker = new Tracker('{CLIENT-ID}', {
consents,
requireAdvertisingOptIn: true
});
window.pulse = (callback) => callback(tracker);
SCC
const consents = window._scc_.getCachedOrDefaultConsentsForPulse();
const tracker = new Tracker('{CLIENT-ID}', {
consents,
requireAdvertisingOptIn: true
});
window.pulse = (callback) => callback(tracker);
TCF
const consents = window._tcf_.getCachedOrDefaultConsentsForPulse();
pulse('init', 'CLIENT-ID', {
consents,
requireAdvertisingOptIn: true
});
SCC
const consents = window._scc_.getCachedOrDefaultConsentsForPulse();
pulse('init', 'CLIENT-ID', {
consents,
requireAdvertisingOptIn: true
});
Server integrations
Assign Pulse tracker to the global window object:
window.pulse = (callback) => callback(pulseTracker)
*If you want to assign Pulse to any other variable - you can but you have to also provide pulseObjectName to the config.
window.whatever = (callback) => callback(pulseTracker)
psi(window, document, navigator, {
pulseObjectName: 'whatever'
});
getCachedOrDefaultConsentsForPulseFunction window._scc_.getCachedOrDefaultConsentsForPulse(arg?) returns updated consents object for Pulse purposes. It accepts a default object in the shape of ConsentsInput as its only parameter.
TCF
const consents = window._tcf_.getCachedOrDefaultConsentsForPulse();
const tracker = new Tracker('{CLIENT-ID}', {
consents,
requireAdvertisingOptIn: true
});
SCC
const consents = window._scc_.getCachedOrDefaultConsentsForPulse();
const tracker = new Tracker('{CLIENT-ID}', {
consents,
requireAdvertisingOptIn: true
});
Examples below are also applicable in TCF integration. All you need to do is to call tcf instead of scc.
Authenticated consent allows to share an end-user's consent preferences across their different authenticated (logged-in) devices. It can be applied to all properties within a brand, reducing the number of times users have to go through the popup flow. This feature is currently only available to logged in users.
identity object should be assigned as a global variable (e.g.window.Identity).enableUserCentric configuration variable must be set to true.Note: tcf snippet in this case is async.
import { tcf } from '@m10s/cmp';
tcf(window, document, navigator, {
baseEndpoint: 'https://cmpv2.YOUR_DOMAIN/',
propertyId: 1234,
consentLanguage: 'sv',
groupPmId: 1234,
enableUserCentric: true
}).then(() => {
// content goes here
});
authId is used as the consent identifier and can be found at window._sp_.config.authId.
Snippet can be attached like this:
const sourcepointSnippet = sourcepoint.tcf(sourcepointConfig, false);
<script>document.addEventListener("DOMContentLoaded", () => { ${sourcepointSnippet} })</script>
then to handle any action after the setup is completed:
window._tcf_?.onTcfReady(() => {
console.log('TCF ready')
});
In order to trigger a login flow, the SDK needs access to Schibsted Account methods. That's why in some cases we ask you to provide us with an Identity object.
The easiest way is to assign to the window:
import { Identity } from '@schibsted/account-sdk-browser';
const identity = new Identity({ ... });
window.Identity = identity;
This method will work without any additional setup because that's the default solution.
If you've already assigned Identity object but to the different variable, you can help us navigate it by adding it to the config:
import { Identity } from '@schibsted/account-sdk-browser';
const identity = new Identity({ ... });
window.SPiD_Identity = identity;
import { tcf } from '@m10s/cmp';
tcf(window, document, navigator, {
identityObjectName: 'SPiD_Identity'
});
You can also pass the Identity object directly to the config:
import { Identity } from '@schibsted/account-sdk-browser';
const identity = new Identity({ ... });
tcf(window, document, navigator, {
identityObject: identity
});
Many mobile apps are using WebView to display web pages. By default, the snippet detects a mobile application based on the User Agent and passes this information to Sourcepoint using the window._sp_.config.targetingParams['mobile-webview'] = true attribute. The logic responsible for exclusion needs to be defined in Sourcepoint.
Devices with containing one of the string listed below are detected as mobile:
Hermes_app_tv.nuFinnAppContact us if you want to add your app detection.
Important: You can override it by providing showInWebview to config.
For some brands, PSI should not be displayed when a user is navigating between their sites, with different root domains, i.e. when a user is going from VG to Godt.
To help exclude such traffic information about hostname from document.referrer
is passed to Sourcepoint using
window._sp_.config.targetingParams['referrer-hostname'] = 'www.vg.no which allow
using String Match condition in Scenario.
To limit number of views for brands with multiple domains support we can use additional information stored in cookies.
Example:
For document.cookie=_sch_cmp_displayed=true key-value pair will be passed:
_sch_cmp_displayed=true allowing usage of String Match condition in Scenario.
Cookie could be set using custom Javascript action for button.
You can find example PSI and SCC implementation in the folder: example.
To run it you need to clone repository and run command:
npm start
Example runs on http://localhost:10001.
You can also find examples of ESI inclusion, as well as JS tag integration in these examples.
Just visit http://localhost:10001/esi.html and http://localhost:10001/js-tag.html respectively.
Package is distributed by Artifactory.
To publish the package you need to:
package.json filemasterCode will be published by Github Actions.
NodeJS version uses generated static scripts during publishing by rollup
(script: npm run build) - files are stored in directory: dist/.
Thanks to that code is converted to beeing compatible with old browsers, merged into one file per integration (PSI, SCC).
For debug purpose you can build files without minimization using script:
npm run build:debug,
NPM Version used by Github Actions is defined in file .nvmrc.
This way allow you to switch to propre NodeJS version locally in an easy way too.
Running code shown below the proper NodeJS version will be used / installed.
nvm use
Method openPrivacySettings allows redirecting users to Privacy Settings. It enables also handling the user authentication state (being logged in or out). For non-logged-in users, there's environment_id provided as a URL parameter which means the login flow isn't triggered on the Privacy Settings page.
This method also uses client_id as a query parameter in order to display brand-specific settings and UI elements.
window.psi.openPrivacySettings(string);
Example:
window.psi.openPrivacySettings('https://privacysettings.schibsted.no/');
Note: This method relies on an existing Pulse integration. It means a page needs to be integrated with Pulse in order to use this method.
Events that flow into the Pulse platform via the collector needs to be routed to a destination, also called sink.
Sinks collecting data from @m10s/cmp and sending them to Amplitude are calling CMP-Marketplaces-Amplitude-1. They can be found in two files:
Mapping Pulse data to Amplitude schema is also set in routing repo in amplitude-cmp.jstl2 file.
PSI is integrated with Pulse. Events are sent to your provided used by the page (using default Pulse object available on the page). You can analyse events on your own. All PSI related events are tagged using the property: provider.component = "CMP-Marketplaces"
Privacy Services team sends events from all providers to their own project in Amplitude too.
PSI sends 2 types of events:
@type: "View", object.@type: "CMP"@type: "Engagement", object.@type: "CMP"object.name.Schema / documentation of object.@type set to "CMP" can be found in event-formats repo.
Documentation of Sourcepoint events can be found here.
However, working on this project we collected additional information which can be useful in development.
About onMessageReceiveData event:
messageId in callback data is different from 0, it means that the message was displayed to the user.cmpgn_id (listed in documentation), because the messageId is changing from campaign to campaign. It seems that this variable was removed from the data sent to the callback since the messageId is already telling you which campaign it is.About onMessageReady event:
Debug messages are displayed after passing the sp_debug=1 query param.
To log out debug information, you can use the debug function from src\utils.js.
There are external spreadsheets with useful documentation. Kind request to update it regularly :)
FAQs
Package containing scripts used by Schibsteds' sites to integrate with Sourcepoint CMP
We found that @m10s/cmp demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."