The goal of this page is to provide information and transparency about the common implementation of Permutive in a non-AMP web environment.
:warning: Subscribe to the repository for the latest updates.
The execution of any data processing is subordinated to obtaining user consent. The chosen approach is to ask for the purposes for which the user has given consent.
The consent purposes being asked are:
In most implementations, the single implementation should be used. In case there are multiple instances
of Permutive on the page, the examples provided as multi should be used.
All Wemass methods are designed to run after a buffer (__wmass.bff), which is manually initialized to minimize the
possibility of errors.
There is an exception to this, the getSegments method, which will be manually initialized in a basic version since the
segments are stored in localStorage and could potentially be used before the DMP engine is initialized.
The DMP uses a validation scheme for sets of property-value pairs and events.
If an undeclared property or event name is included (these values are case-sensitive), or an inappropriate value for the
scheme is included, it will be rejected with a 400 error.
To add or modify these values, please contact Wemass.
This step must be executed before using any other method and should be executed in the top-level window object of the
page. The higher in the page's source code, the better.
<script>
window.__wmass = window.__wmass || {};
window.__wmass.bff = window.__wmass.bff || [];
window.__wmass.getSegments = window.__wmass.getSegments || function () {
let pSegs = [];
try {
pSegs = JSON.parse(window.localStorage._papns || '[]').slice(0, 250).map(String);
} catch (e) {
pSegs = []
}
return {permutive: pSegs};
};
</script>
<script async src="<URLWemassService>"></script>Segments are extracted from the property _pnaps, but from an entry after the Wemass namespace.
<script>
window.__wmass = window.__wmass || {};
window.__wmass.bff = window.__wmass.bff || [];
window.__wmass.getSegments = window.__wmass.getSegments || function () {
let pSegs = [];
try {
pSegs = JSON.parse(window.localStorage["{NAMESPACE}_papns"] || '[]').slice(0, 250).map(String);
} catch (e) {
pSegs = []
}
return {permutive: pSegs};
};
</script>
<script async src="<URLWemassService>"></script>:warning: Wemass will provide the right code. Do not use this code in production.
:warning: Do not cache the result of the
__wmass.getSegmentsfunction; the content it returns may vary depending on the execution time, and the function is overwritten once the SDK finishes loading. See getSegments Function.
These are the attributes that must be passed to the DMP. If any of them cannot be filled, an empty string must be passed. This code must be launched as early as possible in the execution, ideally right after initialization. Consider the following points:
window object of the page.Date-type data expects an ISO-formatted date (YYYY-MM-DDTHH:mm:ss.SSSZ).:warning: Important: Validation Schemes apply here.
<script>
__wmass.bff.push(function () {
/* If there is any type of user identifier available when the page loads, this code should be executed.
See the section on #sending-identities-to-dmp for more information.
if (USER_ID_AVAILABLE) {
__wmass.dmp.identify([
{
id: '<USER_ID>',
tag: '<ID_TAG>'
}
]);
}
*/
__wmass.dmp.addon('web', {
page: {
type: "<STRING>",
content: {
categories: ["<LIST>", "<OF>", "<STRINGS>"]
},
article: {
id: "<STRING>",
title: "<STRING>",
description: "<STRING>",
topics: ["<LIST>", "<OF>", "<STRINGS>"],
authors: ["<LIST>", "<OF>", "<STRINGS>"],
publication_date: "<ISO_DATE>"
},
video: {
id: "<STRING>",
title: "<STRING>",
description: "<STRING>",
topics: ["<LIST>", "<OF>", "<STRINGS>"],
authors: ["<LIST>", "<OF>", "<STRINGS>"],
publication_date: "<ISO_DATE>"
}
}
});
});
</script>If a user identifier is available when the page loads, this code should be executed.
:warning: Important: Validation Schemes apply here.
<script>
__wmass.bff.push(function () {
if (USER_ID_AVAILABLE) {
__wmass.dmp.identify([
{
id: '<USER_ID>',
tag: '<ID_TAG>'
}
]);
}
});
</script>It is also possible to use the infinite scroll code, which is a callback function when the infinite scroll event is fired.
:warning: Important: Validation Schemes apply here.
<script>
window.onscroll = function (ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
__wmass.bff.push(function () {
__wmass.dmp.addon('web', {
infinite_scroll: {}
});
});
}
};
</script>To manually call the getSegments method, this code should be executed.
:warning: Important: Validation Schemes apply here.
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
console.log("Segments:", segments);
});
</script>Segment activation is the process of sending segments to third-party providers. It is necessary to add this code when the page is loaded and ideally after the user's consent is obtained.
:warning: Important: Validation Schemes apply here.
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
if (segments.permutive && segments.permutive.length > 0) {
const appnexusSegments = segments.permutive.map(String);
__wmass.dmp.activate('appnexus', {segments: appnexusSegments});
}
});
</script>
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
if (segments.permutive && segments.permutive.length > 0) {
const appnexusSegments = segments.permutive.map(String);
__wmass.dmp.activate('appnexus', {segments: appnexusSegments});
}
});
</script>
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
if (segments.permutive && segments.permutive.length > 0) {
const gamVideoSegments = segments.permutive.map(String);
__wmass.dmp.activate('gam-video', {segments: gamVideoSegments});
}
});
</script>:warning: Wemass will provide the correct code. Do not use this code in production
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
if (segments.permutive && segments.permutive.length > 0) {
const gamVideoSegments = segments.permutive.map(String);
__wmass.dmp.activate('gam-video', {segments: gamVideoSegments});
}
});
</script>:warning: Wemass will provide the correct code. Do not use this code in production
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
if (segments.permutive && segments.permutive.length > 0) {
const smartadserverSegments = segments.permutive.map(String);
__wmass.dmp.activate('smartadserver', {segments: smartadserverSegments});
}
});
</script>
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
if (segments.permutive && segments.permutive.length > 0) {
const smartadserverSegments = segments.permutive.map(String);
__wmass.dmp.activate('smartadserver', {segments: smartadserverSegments});
}
});
</script>:warning: Wemass will provide the correct code. Do not use this code in production.
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
if (segments.permutive && segments.permutive.length > 0) {
const richaudienceSegments = segments.permutive.map(String);
__wmass.dmp.activate('richaudience', {segments: richaudienceSegments});
}
});
</script>
<script>
__wmass.bff.push(function () {
const segments = __wmass.getSegments();
if (segments.permutive && segments.permutive.length > 0) {
const richaudienceSegments = segments.permutive.map(String);
__wmass.dmp.activate('richaudience', {segments: richaudienceSegments});
}
});
</script>:warning: Wemass will provide the correct code. Do not use this code in production.
This code will return the status of a segment when executed.
:warning: Important: Validation Schemes apply here.
<script>
__wmass.bff.push(function () {
const segmentStatus = __wmass.dmp.segmentStatus('<SEGMENT_ID>');
console.log("Segment Status:", segmentStatus);
});
</script>This code will return a list of all segments with a callback when executed.
:warning: Important: Validation Schemes apply here.
<script>
__wmass.bff.push(function () {
__wmass.dmp.listSegments(function (segments) {
console.log("All Segments:", segments);
});
});
</script>To send interactions or events to the DMP, you can use the following code.
:warning: Important: Validation Schemes apply here.
<script>
__wmass.bff.push(function () {
__wmass.dmp.interaction({
event: '<EVENT_NAME>',
tag: '<EVENT_TAG>'
});
});
</script>