# OneTrust CMP

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.

### OneTrust and Foleon

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.

## Building the Script

### 1. Prevent Foleon from Placing Cookies

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:


```html
<!-- 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>
```

### 2. Import OneTrust

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:


```html
<!-- 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>
```

### 3. Listen for and apply Consent Changes

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.

div
strong
⚠️ Warning:
 The categories found in the example below are not neccesarilly correct, they might differ in your setup, so make sure to check them througoughly.


```html
<!-- 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>
```

### 4. Final steps

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.**

div
strong
⚠️ Warning:
 The Cookie banner will not be available in the editor, to test it you will need to visit the live published doc.