Quick cookie consent

Published: Last updated:

This site uses Google Analytics to gather basic usage info. In order to track users, Google Analytics stores cookies in users' browsers. EU law requires any website or app that uses cookies to explicitly warn users and get their consent. To comply with this, I added a simple alert. This post explains how I did that.

Get the code from Cookie Consent

Go to Cookie Consent. This is a free, open source cookie consent JavaScript library, under MIT licence.

On their download page, configure your alert using their GUI. This includes setting the position of the alert, colours and text.

Copy the generated code, and add it to the <head> of all your pages. If you use a static site generator, this may mean adding it to a head template or partial. In MadCap Flare, add it to the master pages. The initial code will look something like this:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#333f48",
"text": "#ffffff"
},
"button": {
"background": "#ffffff",
"text": "#000000"
}
},
"position": "top",
"content": {
"message": "<your cookie message>",
"dismiss": "Continue",
"link": "Privacy Policy",
"href": "<url to your privacy policy>"
}
});
});
</script>

Optional: use a local copy of the Cookie Consent library

Optional step: host files yourself, rather than pull them from a CDN. You can get the minified files from Cookie Consent's GitHub repo. Copy the files from the /build/ folder.

Place the files with your other CSS and JS files in your project. Modify the paths accordingly:

<link rel="stylesheet" type="text/css" href="<path to your CSS folder>/cookieconsent.min.css" />
<script src="<path to your JavaScript folder>/cookieconsent.min.js"></script>

Ensure users only have to accept cookies once

We don't want users to see this alert every time they come to the documentation. Cookie Consent automatically adds a cookie when the user clicks to accept cookies, but we need to modify the code to check for this. We wrap the existing code in the following:

if(window.cookieconsent.utils.getCookie("cookieconsent_status") != "dismiss")

Here is the full code:

<link rel="stylesheet" type="text/css" href="<path to your CSS folder>/cookieconsent.min.css" />
<script src="<path to your JavaScript folder>/cookieconsent.min.js"></script>
window.addEventListener("load", function(){
if(window.cookieconsent.utils.getCookie("cookieconsent_status") != "dismiss"){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#333f48",
"text": "#ffffff"
},
"button": {
"background": "#ffffff",
"text": "#000000"
}
},
"position": "top",
"content": {
"message": "<your cookie message>",
"dismiss": "Continue",
"link": "Privacy Policy",
"href": "<url to your privacy policy>"
}
});
}
});
</script>