Implementing Permission Management

  1. Adding the BlueConic script to your website
    The first step of implementing BlueConic Permission Management is to add the BlueConic script to all pages of your website.
  2. Configuring the Permission Management Dialogs in BlueConic
    There are two ways to implement permission management in BlueConic:
    • "Opt in - Opt out": requires explicit action from the visitor to confirm or change permission settings.
    • "Cookie Consent by Continuation": displays a notification to the visitor, but assumes confirmation if the visitor continues to visit the website.
    For each of the dialogs (Notification, Selector, Footer) content, positioning and styling can be configured.

    The HTML of the Permission Management dialogs cannot be altered, the look and feel can be changed.

    BlueConic Permission Management comes with two skins (referred to as themes): The “dark” theme uses white text on a dark blue background. The “light” theme uses blue and black text on a white background.

    Depending on the chosen theme (choosing one of two out-of-the-box themes is mandatory) the corresponding stylesheet is dynamically loaded into the website, on top of existing stylesheets. Do note that because of the cascading nature of CSS, existing stylesheets might interfere with the Permission Management dialog CSS.

    In order to adapt the dialogs to your website's look and feel (or fix conflicts with existing stylesheets) it is possible to configure custom CSS in BlueConic which will be loaded on top of the selected theme CSS. Appendix A – Dialog HTML and Appendix B – Light Theme CSS can be used as reference to create the custom CSS.

    For more information on how to configure the dialogs, check the online user help of BlueConic.

  3. Adapting your website to the permission levels
    The permission level the visitor has selected is stored in the BlueConic profile and a cookie called 'BCPermissionLevel'. The BlueConic profile is stored on the BlueConic server. The cookie resides on the computer of the visitor. Note that the cookie (or updated cookie) only becomes available after the BlueConic client has reloaded (typically after a page reload).

    In order to adapt the visitor's experience to the selected permission level it is necessary to show content or execute scripts conditionally: e.g. scripts which set cookies, and are not functional, should not be executed when the visitor has chosen permission level 0.

    For this purpose, the permission level of the website visitor can be read from the 'BCPermissionLevel' cookie which is set on the root path of the website's domain (1st party). The available permission levels (cookie values) are:

    • DO_NOT_TRACK (Level 0)
    • ANONYMOUS (Level 1)
    • PERSONAL (Level 2)

    Below you will find several pieces of example JavaScript code which can be used to adapt your website to the various permission levels. They are in no way mandatory to use and should only serve as reference implementations.

    Checking for a specific permission level in the permission cookie
    <script type="text/javascript">
      function hasBCPermissionLevel(level) {
        function getCookie(key) {
          var cookies = document.cookie.split('; ');
    
          for (var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
    
            if (parts.shift() === key) {
              return parts.join('=');
            }
          }
        }
    
        try {
          var cookie = getCookie('BCPermissionLevel');
    
          if (cookie != null && typeof(cookie) != 'undefined' && (cookie == level)) {
            return true;
          }
        } catch(err) {
        }
    
        return false;
      }
    </script>
    
    Conditionalizing inline JavaScript code
    <script type="text/javascript">
      // Check the permission level before including the external script
      if (hasBCPermissionLevel('ANONYMOUS') || hasBCPermissionLevel('PERSONAL')) {
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
        _gaq.push(['_trackPageview']);
        (function() {
          var ga = document.createElement('script');
          ga.type = 'text/javascript';
          ga.async = true;
          ga.src = ('http:' == document.location.protocol ?
            'http://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(ga, s);
        })();
      }
    </script>
    Conditionalizing asynchronous loading of 3rd party JavaScript libraries
    <script type="text/javascript">
      (function() {
        var injectScript = function(url) {
          var iScript = document.createElement('script');
          iScript.src = url;
          iScript.type = "text/javascript";
          (document.getElementsByTagName('head')[0] ||
            document.getElementsByTagName('body')[0]).appendChild(iScript);
        }
    
        // Check the permission level before including the external script
        if (hasBCPermissionLevel('ANONYMOUS') || hasBCPermissionLevel('PERSONAL')) {
          injectScript('http://external.com/script.js');
        }
      })();
    </script>
    Conditionalizing asynchronous loading of 3rd party JavaScript libraries with callback functions
    <script type="text/javascript">
    (function() {
      var injectScriptSynchronously = function(url, callback) {
        var iscript = document.createElement('script');
        iscript.type = 'text/javascript';
        iscript.async = true;
        iscript.src = url;
    
        if (typeof callback === 'function') {
          iscript.onload = iscript.onreadystatechange = function() {
            if (!this.readyState || this.readyState === "loaded" ||
              this.readyState === "complete") {
              try {
                callback();
              } catch (err) {
              }
            }
          };
        }
        (document.getElementsByTagName('head')[0] ||
             document.getElementsByTagName('body')[0]).appendChild(iscript);
      }
    
      function doCallBack() {
        // callback code, which will be executed after script is loaded
      }
    
      // Check the permission level before including the external script
      if (hasBCPermissionLevel('ANONYMOUS') || hasBCPermissionLevel('PERSONAL')) {
        injectScriptSynchronously('http://external.com/script.js', doCallBack);
      }
    })();
    </script>
    
    Conditionalizing (multiple) synchronous loading of 3rd party JavaScript libraries
    <script type="text/javascript">
      // Check the permission level before including the external script
      if (hasBCPermissionLevel('ANONYMOUS') || hasBCPermissionLevel('PERSONAL')) {
        // Inject script 1
        injectScriptSynchronously('http://external1.com/script1.js', function() {
          // Inject script 2 after script 1 is done
          injectScriptSynchronously('http://external1.com/script2.js', function() {
            // Both scripts are done
          });
        });
      }
    </script>