If you are looking to use a CMP to control cookie consent preferences in your Studio content, the process for setting it up will differ based on whether your content is standalone (living on its own URL) or embedded (iFramed into a page on your existing site). In this article, we’ll dive into how you can set this up for both standalone and embedded experiences.
Please note: As this process differs across a wide range of CMPs, this article will not provide step-by-step instructions for any specific CMP, and will rather serve as a starting point for your Dev team to implement a solution to integrate Studio with your CMP. However, if you are using OneTrust, please see our Educate article on the Studio integration with OneTrust.
Standalone Experiences
To start, let’s take a look at how you can set up a CMP to control cookie consent preferences for your standalone experiences.
When setting this up, you will most likely need to paste your CMP code in the “CMP Custom HTML” section of your settings panel. You can access this in the Studio by opening up your Settings window, navigating to your Cookie Compliance tab, and checking off “Require User Consent” and “Integrate with a CMP.” Then you’ll be able to paste your code in the Custom HTML field below.
You can leverage the script below to use the Ceros SDK to give your user the ability to enable or disable cookies for the experience. This script, however, will not work by itself. A developer from your team will need to connect the script to your CMP banner. The developer will need to include this script somewhere (this is dependent on the CMP being used) and call the “applyConsent” function with the correct boolean value based on user selection.
In the article Cookie Consent & GDPR Compliance Support, the section “Using a Consent Management Platform (CMP)” explains how to use this script, using OneTrust as an example, and indicates what would need to change for other CMPs (keeping in mind that functionality could differ across CMPs).
Once this is set up, the CMP banner will appear within the experience itself. If you were to then embed this experience somewhere, without changing the way that you’ve implemented the banner, the banner would appear inside of the iFrame of the experience.
<script>
function applyConsent(hasConsent) {
// If require isn't available, try again in a moment.
if (typeof require === 'undefined') {
return setTimeout(function() {
applyConsent(hasConsent);
}, 10);
}
require.config({
paths: {
CerosSDK: "//sdk.ceros.com/standalone-player-sdk-v5.min"
}
});
require(['CerosSDK'], function(CerosSDK) {
CerosSDK.findExperience()
.done(function(experience) {
experience.setUserConsentForAnalytics(hasConsent);
})
.fail(function(error) {
console.error(error);
});
});
}
// Run it once to kick off the SDK loading
applyConsent(false);
</script>Embedded Experiences
Now, let’s take a look at how you can set up a CMP to control cookie consent preferences for your embedded experiences.
The first thing you’ll need to do here is place your CMP code on the parent page that you are going to embed your experience into. From here, you’ll need to add a script (you can use the one we’ve pasted below). The script will use the Ceros SDK to communicate with the embedded experience—this will enable the CMP banner to control the experience’s cookies, so that users can elect to enable or disable them.
This script, however, will not work by itself. A developer from your team will need to connect the script to your CMP banner. The developer will need to include this script somewhere (this is dependent on the CMP being used) and call the “applyConsent” function with the correct boolean value based on user selection.
Please note: the script below is a different script than the one above, even though both require “applyConsent” to be called by the developer.
Once this is set up, the CMP banner will appear on the parent page that contains the embedded experience—not within the iframe of the experience. If you were to switch the experience to a standalone experience, the banner would not appear. Once this is set up, the banner could control cookie consent for many different experiences.
<script>
function applyConsent(hasConsent) {
var foundExperienceInterval = setInterval(function() {
var cerosFrames = document.querySelectorAll("iframe.ceros-experience");
var cerosContainer = cerosFrames[0].parentNode;
var expId = cerosContainer.getAttribute("id");
if (expId) {
clearInterval(foundExperienceInterval);
// find experience
CerosSDK.findExperience(expId)
.done(function(experience) {
experience.setUserConsentForAnalytics(hasConsent);
})
.fail(function(error) {
console.error(error);
});
}
}, 500);
}
// Run it once to kick off the SDK loading
applyConsent(false);
</script>
Please note: You will need to have Ceros’ embedded SDK loaded on the page where this code is running:
<script type="text/javascript" src="https://sdk.ceros.com/embedded-player-sdk-v5.min.js"></script>