Every Foleon Doc has cookies, and according to the GDPR regulation, you need to inform your readers about these cookies.
We offer a built-in cookie consent pop-up in our product. However, you might have additional requirements for your cookie consent, which you can meet with a Consent Management Platform (CMP). It's possible that your company is already using one for other content.
💡 In this article, we instruct you on how you can make sure that Foleon cookies listen to your CMP.
In this article
GDPR and cookie consent
On May 25, 2018, the General Data Protection Regulation (GDPR) came into effect. Foleon uses these GDPR laws as the basis of the cookie consent settings.
Our built-in cookie consent pop-up complies with all GDPR requirements. However, since these options are not the main focus of our product, there are limitations to how far you can customize this feature. This is when a Consent Management Platform (CMP) comes in.
Implementing a Consent Manager Platform (CMP)
A CMP must not only ask a reader to consent to certain cookies. It must also activate the scripts that place those cookies, once given consent.
That's why we recommend that you install a CMP with a script manager such as Google Tag Manager (GTM). Cookie banner platforms often integrate neatly with GTM and they often provide detailed instructions on how to implement it. We have separate help articles for two popular CMPs:
The advantage of using a script manager such as GTM is that you can easily control which script to fire and when to fire it.
If you don’t have a CMP, you can use our built-in cookie consent pop-up.
💡 You can only implement a CMP in the live version of your Foleon Doc. It's not possible to test it in the preview version of your content.
How a CMP and Foleon work together
The role of a CMP is to ask for consent, give a signal once cookie preferences are given, and store the cookie preferences in the browser as a cookie.
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.
When using a CMP within Foleon Docs, we need to do the following three things:
-
Prevent Foleon from placing cookies before consent is given.
-
Prevent your remarketing code to fire before consent is given.
-
Fire scripts once consent has been given.
1. Preventing Foleon from placing cookies
There are certain cookies that Foleon places once the Doc is loaded. For example, cookies related to:
- Foleon Analytics
- Google Analytics
- Custom scripts you’ve placed in the remarketing field.
If you don’t use the Foleon cookie banner, these scripts will be executed when a reader opens a Foleon Doc, and they will set cookies.
To stop that from happening, you can use the following code in either the remarketing code field or in GTM.
<script>
if (!window.localStorage.getItem('cc_settings')) {
window.localStorage.setItem('cc_settings',
JSON.stringify({"statistics":0, "marketing": 0, "preferences": 1}));
}
</script>
This code checks if the user already had given consent before. If not, it sets the default cookie preferences so that the Foleon cookies will not be placed.
The default settings are set to block statistics and marketing cookies while enabling preference cookies. You can opt for a different default setup by changing the 0 to 1 in the script.
Here is an example of the code in the remarketing field and GTM:
Remarketing field
in Google Tag Manager (GTM)
2. Prevent your remarketing code to fire before consent is given.
If you are importing scripts in the remarketing field, we need to ensure that these fields only execute when they are allowed to be executed.
For example, you might want to add Hotjar in the remarketing field to poll and record heatmaps. Here’s an example of a default Hotjar script.
<!-- Hotjar tracking code for Foleon -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:XXXXX,hjsv:X};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
This would require an opt-in for marketing cookies. We need to adjust two attributes of the script listed above.
Add the following attributes to the <script> element:
<script type="text/plain" data-cookieconsent="marketing">
You can do the same for statistics and preference-related scripts.
<script type="text/plain" data-cookieconsent="preferences">
<script type="text/plain" data-cookieconsent="statistics">
That’s it. The script now listens to a cookie preference.
3. Fire scripts once consent is given for it
We’re almost there. We’ve prevented scripts from being executed without consent, and we’ve made sure that our scripts in the remarketing field are mapped to a certain cookie preference.
The last thing we need to do is to let Foleon know once the reader has given consent through the CMP.
We recommend doing this through Google Tag Manager as it’s the easiest way, and because most consent platforms have an integration with GTM.
First, we need to create three variables in GTM that read the preferences stored in the cookie by the CMP. One for each category of the CMP.
Example cookie categories of a CMP:
- Statistics;
- Marketing;
- Preferences;
- Functional;
Next, we need to update Foleon with these preferences. Foleon uses three cookie categories whereas consent management platforms might use more.
Foleon cookie categories:
- Statistics;
- Marketing;
- Preferences;
In that case, you must choose one or combine cookie categories when mapping to the Foleon cookie categories.
The Consent Manager Platform needs to fire an event to Google Tag Manager once the user saves his or her preferences.
For this event, we need to fire the following tag in Google Tag Manager.
<script>
if(typeof CookieConsentAPI !== 'undefined') {
CookieConsentAPI.update({
statistics: statisticsVariable || 0, // replace with your statistics variable
marketing: marketingVariable || 0, // replace with your marketing variable
preferences: preferencesVariable || 1 // replace with your preferences variable
})
CookieConsentAPI.save()
} else {
localStorage.setItem("cc_settings", JSON.stringify({
statistics: statisticsVariable || 0, // replace with your statistics variable
marketing: marketingVariable || 0, // replace with your marketing variable
preferences: preferencesVariable || 1 // replace with your preferences variable
}))
}
</script>
This script maps the CMP cookie preferences to Foleon and makes sure that scripts within Foleon are executed when given consent for it.
That’s it. Make sure to test your full setup on a published Foleon Doc.