Consentmanager Direct Integration

1. Consentmanager Contentpass integration

Description of baseUrl

The baseUrl must be a full URL that contains the CNAME Contentpass has assigned to your property, along with the full protocol, for example: https://cp.example.com

You can view the CNAME of your property via the publisher's dashboard, under the settings tab when viewing your property.

Please make sure to first and foremost enable TCF for Consentmanager and disable the CP integration in CM - an explanation on how to can be found here.

Then please add the following code in the head of your page, inserting the Consentmanager script where the comment is:

Minified

<script data-cmp-ab="1">
  window.cmp_noscreen = true;
</script>
<script>
  //Consentmanager stub goes here
</script>
<script type="text/javascript" charset="UTF-8" data-cmp-ab="1">
  !function() {
    var cpBaseUrl = 'https://cp.example.com';
    var cpPropertyId = '1234abcd';

    !function(C,o,n,t,e,P,a,s){C.CPObject=n,C[n]||(C[n]=function(){
    for(var i=arguments.length,c=new Array(i),r=0;r<i;r++)c[r]=arguments[r];var f=c[0],u=c[1],l=c[2];if(C[n].q||(C[n].q=[]),
    e=Array.prototype.slice.call(arguments,0),!C[n].patched)if("fatal"===f&&u)C[n].le=u,
    Array.prototype.forEach.call(C[n].q,(function(e){"error"===e[0]&&"function"==typeof e[1]&&e[1](u)
    }));else if("error"===f&&"function"==typeof u)C[n].le&&u(C[n].le);else if("extension"===f&&u)l&&"function"==typeof l.init&&(l.init(),
    l.initialized=!0);else if("authenticate"===f&&"function"==typeof u){try{
    P=-1===(o.cookie||"").indexOf("_cpauthhint=")&&!(C.localStorage||{})._cpuser&&-1===C.location.href.toLowerCase().indexOf("cpauthenticated")
    }catch(e){P=!1}if(P){a={isLoggedIn:function(){return!1},hasValidSubscription:function(){return!1}}
    ;var p=u,d=!1,h=function(e,i){d||(d=!0,p(e,i))};if(e[1]=h,"function"==typeof o.hasPrivateToken)try{
    o.hasPrivateToken(t||"https://my.contentpass.net").then((function(e){e||h(null,a)})).catch((function(){}))
    }catch(e){}else h(null,a)}}C[n].q.push(e)});try{
    ((s=(o.cookie.split("_cpauthhint=")[1]||"").split(";")[0])?Number(s[1]):NaN)>0&&(o.body?o.body.classList.add("cpauthenticated"):o.addEventListener("DOMContentLoaded",(function(){
    o.body.classList.add("cpauthenticated")})))}catch(e){}C[n].l=+new Date,C[n].sv=6}(window,document,"cp");

    // Will activate Contentpass and initialize basic interfaces for
    // communicating with Contentpass
    cp('create', cpPropertyId, {
      baseUrl: cpBaseUrl
    });

    // Will render the layer provided by contentpass.
    // If user gives full consent, the onFullConsent callback is fired.
    // If user is logged into contentpass and has a valid subscription for the
    // current website, no layer is displayed.
    // Use the cp('authenticate') function below to react on further details
    // regarding contentpass users.
    cp('render', {
      onFullConsent: function() {
        console.log('[CP] onFullConsent');
        // load advertising
      }
    });

    // Will evaluate the user's login state regarding contentpass and whether
    // user has a valid subscription.
    // This call is optional as "cp('render')" above is also checking for the
    // contentpass subscription state.
    // Use this function for example to update your layout for contentpass users.
    // We also provide CSS-based and cookie-based options for this case.
    cp('authenticate', function (error, user) {
      if (error) {
        // Error handling depending on use case
        return;
      }
      if (user.isLoggedIn() && user.hasValidSubscription()) {
        // User has valid subscription
      } else {
        // User has no valid subscription
      }
    });
  }()
</script>
<script src="https://cp.example.com/now.js" async fetchPriority="high" onerror="cp('fatal', arguments)" data-cmp-ab="2"></script>

Plain Javascript

<script data-cmp-ab="1">
  window.cmp_noscreen = true;
</script>
<script>
  //Consentmanager stub goes here
</script>
<script type="text/javascript" charset="UTF-8" data-cmp-ab="1">
  !function() {
    var cpBaseUrl = 'https://cp.example.com';
    var cpPropertyId = '1234abcd';

    function(C, o, n, t, e, P, a, s) {
      C.CPObject = n;
      if (!C[n]) {
        C[n] = function() {
          for (var _len = arguments.length, cpFnArgs = new Array(_len), _key = 0; _key < _len; _key++) {
            cpFnArgs[_key] = arguments[_key];
          }
          var operation = cpFnArgs[0], operationArg1 = cpFnArgs[1], operationArg2 = cpFnArgs[2];
          if (!C[n].q) {
            C[n].q = [];
          }
          e = Array.prototype.slice.call(arguments, 0);
          if (!C[n].patched) {
            if (operation === "fatal" && operationArg1) {
              C[n].le = operationArg1;
              Array.prototype.forEach.call(C[n].q, (function(args) {
                if (args[0] === "error" && typeof args[1] === "function") {
                  args[1](operationArg1);
                }
              }));
            } else if (operation === "error" && typeof operationArg1 === "function") {
              if (C[n].le) {
                operationArg1(C[n].le);
              }
            } else if (operation === "extension" && operationArg1) {
              if (operationArg2 && typeof operationArg2.init === "function") {
                operationArg2.init();
                operationArg2.initialized = true;
              }
            } else if (operation === "authenticate" && typeof operationArg1 === "function") {
              try {
                P = (o.cookie || "").indexOf("_cpauthhint=") === -1 && !(C.localStorage || {})._cpuser && C.location.href.toLowerCase().indexOf("cpauthenticated") === -1;
              } catch (ex) {
                P = false;
              }
              if (P) {
                a = {
                  isLoggedIn: function() {
                    return false;
                  },
                  hasValidSubscription: function() {
                    return false;
                  }
                };
                var originalCallback = operationArg1;
                var originalCallbackCalled = false;
                var wrapperCallback = function(err, result) {
                  if (!originalCallbackCalled) {
                    originalCallbackCalled = true;
                    originalCallback(err, result);
                  }
                };
                e[1] = wrapperCallback;
                if (typeof o.hasPrivateToken === "function") {
                  try {
                    o.hasPrivateToken(t || "https://my.contentpass.net").then((function(hasToken) {
                      if (!hasToken) {
                        wrapperCallback(null, a);
                      }
                    })).catch((function() {}));
                  } catch (ex) {}
                } else {
                  wrapperCallback(null, a);
                }
              }
            }
          }
          C[n].q.push(e);
        };
      }
      try {
        s = (o.cookie.split("_cpauthhint=")[1] || "").split(";")[0];
        if ((s ? Number(s[1]) : NaN) > 0) {
          if (o.body) {
            o.body.classList.add("cpauthenticated");
          } else {
            o.addEventListener("DOMContentLoaded", (function() {
              o.body.classList.add("cpauthenticated");
            }));
          }
        }
      } catch (ex) {}
      C[n].l = +new Date;
      C[n].sv = 6;
    }(window, document, "cp");

    // Will activate Contentpass and initialize basic interfaces for
    // communicating with Contentpass
    cp('create', cpPropertyId, {
      baseUrl: cpBaseUrl
    });

    // Will render the layer provided by contentpass.
    // If user gives full consent, the onFullConsent callback is fired.
    // If user is logged into contentpass and has a valid subscription for the
    // current website, no layer is displayed.
    // Use the cp('authenticate') function below to react on further details
    // regarding contentpass users.
    cp('render', {
      onFullConsent: function() {
        console.log('[CP] onFullConsent');
        // load advertising
      }
    });

    // Will evaluate the user's login state regarding contentpass and whether
    // user has a valid subscription.
    // This call is optional as "cp('render')" above is also checking for the
    // contentpass subscription state.
    // Use this function for example to update your layout for contentpass users.
    // We also provide CSS-based and cookie-based options for this case.
    cp('authenticate', function (error, user) {
      if (error) {
        // Error handling depending on use case
        return;
      }
      if (user.isLoggedIn() && user.hasValidSubscription()) {
        // User has valid subscription
      } else {
        // User has no valid subscription
      }
    });
  }()
</script>
<script src="https://cp.example.com/now.js" async fetchPriority="high" onerror="cp('fatal', arguments)" data-cmp-ab="2"></script>

For users that have a paid Contentpass subscription you need to block all third party requests from your website. We recommend using Consentmanager's Manual Blocking and host libraries and fonts locally.

Regarding third-party content embeds - for example youtube embeds - Contentpass users must give their consent before any embeds are loaded. To easily implement this we recommend using Dynamic Content Blocking.

To suppress the consent layer on some URLs, please configure the "Always accessible URLs" in the property settings within your publisher dashboard. All legal URLs you configure to be shown on the consent layer itself are always accessible by default.

See Consentmanager's client-side-configuration-options for further details.

Allow the user to open the CMP settings

To open the CMP settings layer, Consentmanager provides a simple SDK function: __cmp('showScreenAdvanced')

You can easily trigger this function by adding a link to your footer with an onclick handler like this:

<a href="#" onclick="__cmp('showScreenAdvanced');return false;">Open Consent Settings</a>

Please read Consentmanager's documentation for more in-depth instructions.