Cookie Law Tool - Advanced Usage

Our cookie law tool can help to make your website comply with the new cookie legislation (EU Privacy and Communications Directive). However, if you are technically minded, you may prefer to use some of the advanced settings available.

Here is the code, which you may use and modify, providing the backlink to OpenGlobal remains intact:

<!-- Copyright (c) OpenGlobal. GNU/GPL V3 licence. You may copy and modify this, providing the link to http://www.openglobal.co.uk remains intact. -->
<div id="openglobal_privacy_widget" style="display: inline; text-align:right; font-size: 13px; line-height: 100%; position: fixed; top: 0; right: 0; margin: 0; padding: 0 0 0 3px; background: #dddddd; z-index: 100000; opacity:0.9; filter: alpha(opacity=90);">
Accept <a title="This website uses cookies to store information on your computer. Some of these cookies are used for visitor analysis, others may be necessary for the website to function properly. You should configure your browser to only accept the cookies you wish to approve, or leave this website." rel="privacy" href="##########">Cookies</a>?
<button id="openglobal_privacy_accept" style="vertical-align: middle;" onclick="openglobal_privacy_accept();return false;">Yes</button>
<button id="openglobal_privacy_wait" style="vertical-align: middle;" onclick="clearTimeout(openglobal_privacy_timer);return false;">Wait</button>
<button id="openglobal_privacy_leave" style="vertical-align: middle;" onclick="window.location='http://www.change.org/petitions/stop-the-eu-s-legal-war-on-web-cookies';">Leave</button>
<br />
<span style="font-size: 9px">Provided by <a href="http://www.openglobal.co.uk" title="OpenGlobal e-commerce web design and promotion">OpenGlobal E-commerce</a></span>
</div>
<script type="text/javascript">
//<![CDATA[
var openglobal_privacy_timeout = 0;
var openglobal_privacy_functions = [];

var openglobal_privacy_widget = document.getElementById('openglobal_privacy_widget');
var results = document.cookie.match ( '(^|;) ?openglobal_privacy_widget=([^;]*)(;|$)' );
if (results) {
  if (1 == unescape(results[2])) {
    openglobal_privacy_accept();
  }
} else {
  window.onload = function() {
    for (var i = 0; i < document.links.length; i++) {
      var link_href = document.links[i].getAttribute('href');
      if ('privacy' != document.links[i].getAttribute('rel') && (!/^[\w]+:/.test(link_href) || (new RegExp('^[\\w]+://[\\w\\d\\-\\.]*' + window.location.host)).test(link_href))) {
        var current_onclick = document.links[i].onclick;
document.links[i].onclick = function() {openglobal_privacy_accept();if (Object.prototype.toString.call(current_onclick) == '[object Function]') {current_onclick();}};
      }
    }
  };
}

var openglobal_privacy_timer;
if (openglobal_privacy_timeout > 0) {
   openglobal_privacy_timer = setTimeout('openglobal_privacy_tick()', 1000);
} else {
  var openglobal_privacy_wait = document.getElementById('openglobal_privacy_wait');
  if (null != openglobal_privacy_wait) {
    openglobal_privacy_wait.parentNode.removeChild(openglobal_privacy_wait);
  }
}
function openglobal_privacy_tick() {
  if (0 >= --openglobal_privacy_timeout) {
    openglobal_privacy_accept();
    return;
  }
  var openglobal_privacy_accept_button = document.getElementById('openglobal_privacy_accept');
  if (null != openglobal_privacy_accept_button) {
    openglobal_privacy_accept_button.innerHTML = 'Yes (' + openglobal_privacy_timeout + ')';
    openglobal_privacy_timer = setTimeout('openglobal_privacy_tick()', 1000);
  }
}

function openglobal_privacy_accept() {
  clearTimeout(openglobal_privacy_timer);
  document.cookie = 'openglobal_privacy_widget=1; path=/; expires=Mon, 18 Jan 2038 03:14:00 GMT';
  openglobal_privacy_widget.parentNode.removeChild(openglobal_privacy_widget);
  for (var i = 0; i < openglobal_privacy_functions.length; i++) {
    openglobal_privacy_functions[i]();
  }
}
//]]>
</script>

You should paste the code above into the template of your website, or if you don't have a CMS, then paste it onto every page of your website. It doesn't matter where the HTML code is pasted on the page, it automatically gets displayed in the top right hand corner of the screen.

And don't forget to change the ########## to the URL of your own privacy policy (or copy ours if it is applicable to your website).

Countdown Timer

The first advanced feature is the countdown timer. By changing the var openglobal_privacy_timeout = 0; line to a positive integer, you can have a visible timer on the "Yes" button, which counts down to zero. Once the timer reaches zero, consent is assumed, the tool disappears and is never seen again.

A "Wait" button is also introduced in case the visitor wants to pause the timer to think about their decision.

Delayed Functions

The delayed functions feature allows you to prevent any javascript from running (which you know uses cookies) until the user has given consent. This feature basically allows prior consent to javascript-based cookies which you could argue is better than blanket "post-consent", or alternatively you could argue is completely pointless if other cookies on the same page are "post-consent" by technological limitation anyway.

Either way, here's what you do.

Firstly, you need to wrap any relevant javascript in a function (or functions) to prevent them from automatically executing when the page loads. For example, the standard Google Analytics code would go from:

<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-#######-#']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>

To:

<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-#######-#']);
_gaq.push(['_trackPageview']);

function my_google_analytics_code() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
};
//]]>
</script>

Where UA-#######-# is your Google Analytics ID obviously.

You then need to add these functions (in this case "my_google_analytics_code") to the openglobal_privacy_functions variable in the cookie law tool like so:

var openglobal_privacy_functions = [my_google_analytics_code, my_other_delayed_code, ...];

These functions will now only be run when consent is given, either by clicking the "Yes" button, waiting for the countdown timer to reach zero, or ignoring the tool completely and clicking on a link on the page.

In order to reduce the impact of this measure on your analytics results, it is recommended that you use this delayed functions feature with the countdown timer feature, otherwise your bounce rate statistics will be non-existent.

If you use a javascript tool which uses cookies simply by loading the Javascript file, you'll need to output your <script> tag dynamically and wrap this in a function. For example, the following code would change from:

<div id="javascript_code">
<script type="text/javascript"
src="http://www.example.com/example.js">
</script>
</div>


...to:

<div id="javascript_code"></div>
<script type="text/javascript">
//<![CDATA[
function my_delayed_code() {
div_block = document.getElementById('javascript_code');
div_block.innerHTML = '<scr'+'ipt type="text/javascript" src="http://www.example.com/example.js"></scr'+'ipt>';
}
//]]></script>

... and you'd then add the my_delayed_code function to the openglobal_privacy_functions array.

Please note that if you are using Google AdSense, there is no way to load the ads dynamically after the page has loaded, or the user has clicked to accept cookies. The Google AdSense code specifically prevents itself from displaying ads unless it is called at page load time. If you ever find a workaround which allows this, please let us know so that we can update this page.

It is ironic that the biggest thing this law was designed to address is the one thing that it is not technically possible to accommodate.

I would recommend that you join our newsletter to keep informed about the latest developments and recommendations on this legislation (and any other relevent legislation).

* Nothing in this article constitutes legal advice, it is just our opinion of current affairs. Always seek professional legal advice.