Every Foleon Doc has cookies, and according to the GDPR, you need to inform your readers about these cookies. Your company might use OneTrust as a Consent Management Platform (CMP) to meet additional requirements for your cookie consent. This article shows you how to implement OneTrust into your Foleon Docs.
The role of a Consent Management Platform (CMP) such as OneTrust is to ask the user for consent, and then send a signal to Foleon once cookie preferences are given. This signal is processed and the cookie preferences and stored in the in the browser's local storage. In order to achieve this we need to implement some JavaScript code to ensure Onetrust can correctly relay the cookie preferences to Foleon.
If you are not using Foleon's native Cookie Consent feature, a Foleon Doc will attempt to place cookies by default. This poses a problem when using a third-party CMP, as cookies will be placed even if no consent is given yet. This is why we need a script that makes sure the cookies are blocked beforehand. Add the following script tag to your remarketing code:
<!-- Disable all Cookies untill consent is given via OneTrust -->
<script>
if (!window.localStorage.getItem('cc_settings') && window.navigator?.userAgent?.includes("OneTrust") !== true) {
window.localStorage.setItem(
'cc_settings',
JSON.stringify({ statistics: 0, marketing: 0, preferences: 0 })
);
}
</script>Next, we need to import the OneTrust banner and its SDK. We do this by placing a script that is unique to your OneTrust account, and is thus provided by OneTrust itself. You can find more information on where to find this script on OneTrust's documentation here. The script should look something like this:
<!-- Add your OneTrust Cookies Consent SDK script here, or replace the values with the ones from your application -->
<script
src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
type="text/javascript"
charset="UTF-8"
data-domain-script="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
></script>OneTrust CMP scans your Doc and then categorizes all the the cookies that Foleon places, however their categories are often more segmented and thus do not map directly to Foleon's Cookie Consent categories. In order to map them to Foleon's categories, put their category code in either the MARKETING_CATEGORIES, STATISTICS_CATEGORIES or the PREFERENCES_CATEGORIES array. If a cookie is required (strictly functional cookies) leave them out.
If you are not sure what categories are being applied by OneTrust, use the OneTrust.testLog() command in the browser console. This will print a table with all the active categories.
<!-- mapping the OT cookie categories to Foleon cookie categories-->
<script type="text/javascript">
function OptanonWrapper() {
const MARKETING_CATEGORIES = ["C0004", "C0005"] // Replace values with your own Marketing Categories
const STATISTICS_CATEGORIES = ["C0003"] // Replace values with your own Statistics Categories
const PREFERENCES_CATEGORIES = ["C0006"] // Replace values with your own Preferences Categories
//OneTrust Cookies On Consent Listener to update the Foleon Cookie consent manager
OneTrust.OnConsentChanged(function(e) {
const statistics = STATISTICS_CATEGORIES.every(
value => {return e.detail.includes(value);}) ? 1: 0;
const marketing = MARKETING_CATEGORIES.every(
value => {return e.detail.includes(value);}) ? 1: 0;
const preferences = PREFERENCES_CATEGORIES.every(
value => {return e.detail.includes(value);}) ? 1: 0;
const selection = {
statistics: statistics,
marketing: marketing,
preferences: preferences
}
if(typeof CookieConsentAPI !== 'undefined') {
CookieConsentAPI.update(selection)
CookieConsentAPI.save()
} else {
// save new values after (updated) consent
localStorage.setItem("cc_settings", JSON.stringify(selection))
}
})
}
</script>Now that we have all the scripts, we need to paste all of them into the Foleon Remarketing code. For most usecases it is advised to use the Global Doc settings for this as it will apply the cookie banner to all Docs in your workspace. Republish your Doc's to make sure the changes are applied.