Adrian Javier
 · Pun Enthusiast

Enabling Cookie Consent in the Studio Without Using a CMP

If you are looking to set up cookie compliance with the Ceros SDK but are not using a CMP, chances are you are either:

  1. Using some other banner library that is not a full CMP solution.

  2. Using your own custom banner script.

  3. Or have created a banner within your Studio experience that you want to control consent.

As this will vary based on your specific case, we can only provide high level advice for these situations. 

The role of the SDK

Our SDK has a function to toggle Studio analytics cookies On and Off. This function will cause your Studio experience to enable or disable Studio analytics cookies and IP anonymization. Using a browser feature called “local storage,” it will also save this selection so that the user’s selection is remembered and analytics cookies are stored or not stored accordingly on subsequent visits.

If you are not familiar with the Ceros SDK, you can read about how to get started with it here.

The function to control analytics cookies is setUserConsentForAnalytics(consent). The consent argument should be set to true if the user consented to tracking, or false if not.

To determine if a selection has been made, you can use the function getUserConsentForAnalytics(callback). The callback function that is passed in should accept one argument called “consent”, which will be equal to a string with one of the following values:

  • “Consented” – When the user specifically consented to analytics tracking.

  • “Declined” – When the user specifically declined analytics tracking.

  • “Unknown” – When the user has not made a selection.

More information about these functions can be found in the Experience Level Commands section of our SDK documentation.

Now, let’s take a look at some use-cases.

If you are using a different Banner Library or using your own custom banner script

You can most likely leverage the scripts below for either standalone or embedded content, depending on where your experience is living. In either case, you’ll need to call the “applyConsent” function with some custom code that is triggered based on your custom banner solution. 

The scripts will differ if your content is going to be standalone or embedded.

For standalone content:

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

For embedded content:

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

If you are using a banner you’ve created within the Studio

  1. Create and format the banner in the Studio:

  2. Copy the SDK IDs for each button as well as the banner itself.

  3. In the experience settings, add Custom HTML that uses the SDK to set the user’s cookie consent selection and hide the banner whenever they click a button, as well as hide the banner when the experience loads if a selection has already been made.

<script>
  require.config({
    paths: {
      CerosSDK: "//sdk.ceros.com/standalone-player-sdk-v5.min"
    }
  });

  require(['CerosSDK'], function(CerosSDK) {
    CerosSDK.findExperience()
      .done(function(experience) {
        var banner = experience.findComponentById('[banner-sdk-id]');
        var acceptButton = experience.findComponentById('[accept-sdk-id]');
        var declineButton = experience.findComponentById('[decline-sdk-id]');

        // When the Accept button is clicked, enable tracking and hide the banner
        acceptButton.on(CerosSDK.EVENTS.CLICKED, function () {
          experience.setUserConsentForAnalytics(true);
          banner.hide();
        });

        // When the Decline button is clicked, keep tracking disabled and
        // hide the banner
        declineButton.on(CerosSDK.EVENTS.CLICKED, function () {
          experience.setUserConsentForAnalytics(false);
          banner.hide();
        });

        // When the experience loads, if the user made a selection,
        // hide the banner
        experience.getUserConsentForAnalytics(function(consent) {
          if (consent !== 'Unknown') {
            banner.hide();
          }
        });
      })
      .fail(function(error) {
        console.error(error);
      });
  });
</script>

The banner will always appear within the experience itself, whether it is embedded or standalone, and will always only apply to that experience.

1