Set up OneTrust for cookie consent

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.

In this article

• How OneTrust and Foleon work together
• Build your custom script
  • Script 1: Prevent Foleon from placing cookies
  • Script 2: OneTrust banner
  • Script 3: Consent changes
  • Final Steps
  • Example of a complete script
• Place your script in the remarketing field

How OneTrust and Foleon work together

The role of a Consent Management Platform (CMP) such as OneTrust is to ask for consent, give a signal once cookie preferences are given, and store the cookie preferences in the browser as a cookie. This signal is processed, and the cookie preferences are stored 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.

Websites or Foleon Docs need to look for those preferences, listen for that signal that the cookie preferences have been set, and then act accordingly by executing the scripts that are allowed to be executed.

If you want to implement OneTrust into your Foleon Docs, you'll need to build your custom script.

Build your custom script

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 without consent. 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>

Foleon will place certain cookies once the Doc is loaded. For example, cookies related to:

• • Foleon Analytics

  • Google Analytics

  • Custom scripts you've placed in the remarketing field.

Script 2: OneTrust banner

To get the OneTrust banner to work, we need to add another script. 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>

Script 3: Listen for and apply Consent Changes

The third script listens to any consent changes and updates the Foleon consent manager accordingly, ensuring that the correct cookies are placed. 

OneTrust CMP scans your Doc and then categorizes all 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 unsure 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>

Final steps

Now that we have all the scripts, we need to paste them into the Foleon Remarketing code. For most use cases, it is advised to use the Global Doc settings for this, as they will apply the cookie banner to all Documents in your workspace.

Republish your Docs to make sure the changes are applied.

Example of a complete script

With the three scripts we've shared above, we assembled an example of a complete script.

In the example below, replace the second script with your own OneTrust script. That's it, you've now built the complete script. Read on to learn how to inject this script into the remarketing field.

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

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

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

Place your script in the remarketing field

We're almost there. We’ve prevented scripts from being executed without consent and built the script, so now we're ready to inject the OneTrust script into the remarketing field.

Once you've correctly configured your custom script, add your custom code in the Foleon Doc settings of your Doc when you scroll down to the Marketing tab.

On the right side, copy-paste the script into the Remarketing code field. Save your changes and (re)publish your Foleon Doc.

Related articles

• All about cookie consent
• Set up Cookiebot for cookie consent
• Consent Manager Platforms and Foleon
• All about Foleon and GDPR