Cookie consent, a how to guide
After setting up this whole blog I already had a more or less crappy solution to deal with cookie consent. I was not that happy with it, so I went to the great internet and found Cookie Consent by Osano.
What is Osano Cookie Consent?
Cookie Consent by Osano is a free and open source solution to deal with cookie law compliance.
Beside of it being open source, there is one more thing I love about it: The generator!
It allows you to customise your cookie consent banner in various ways, including opt-in and opt-out possibilities.
But why cookie consent anyway?
In 2018 the GDPR (General Data Protection Regulation) by the European Union went into effect. Which states that any company or individual who processes personal information of European Union citizens must comply with it.
Remember all the mails you got in 2018, asking for your consent about your data?
The GDPR happened :)
On almost any website today, you will find some cookie consent banner, but if you look close you might find some subtleties.
Some websites are merely informing you about their cookie usage, by browsing the page you already are giving consent. Others won't do anything until you actively consent by clicking an according button. There is some range in between as well.
I on my end was thinking about which way to choose. To improve my blog, I somehow need to find out what posts are
read.
This is only possible with analysing the user with analytic tools or asking them by surveys or directly over a
chat or even face to face.
My way of handling cookie consent
To improve my blog I need to know what posts people are reading, because this helps me to write more about stuff that is helpful. That is why I am using Google Analytics.
Just informing you about that stuff without giving you the possibility to opt-out is a bit too much of a "fuck-you" approach. I did not want to do this.
On the other hand waiting for you to opt-in would mean I would miss a lot of insights and would probably end up writing worse content which isn't helpful to anyone as well.
So I took the ground in between. You are completely free to opt-out any time by clicking "Reject" in the cookie banner. If you have already approved, it is also possible to change that (there is a small tab on the lower left).
Fascinating, I'm telling my readers how to make me write worse content, seriously, who is doing such things...
Implementation
Okay, enough of all the talk, let's go into some real code and see how I used it to make things happen!
<!-- Only include in production -->
{% if jekyll.environment == 'production' %}
<!-- Add cookie consent css & js -->
<link rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"
data-cfasync="false"></script>
<!-- Add google analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
// Reads the value of a cookie by name or returns empty string
function getCookie(name) {
var b = document.cookie.match('(^|[^;]+)\\s*' + name + '\\s*=\\s*([^;]+)');
return b ? b.pop() : '';
}
// Actually starting analytics up
function addAnalytics() {
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXX-X');
}
// Waiting for the load event
window.addEventListener("load", function () {
// Reading "cookieconsent_status" cookie
const cookieConsent = getCookie('cookieconsent_status');
// Start analytics if user consented or did not deny
if (cookieConsent === 'allow' || cookieConsent === '') {
addAnalytics();
}
// Initialise cookie consent banner
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#efefef",
"text": "#404040"
},
"button": {
"background": "#8ec760",
"text": "#ffffff"
}
},
"type": "opt-out",
"content": {
"allow": "Approve",
"dismiss": "Approve",
"deny": "Reject"
},
// Reload the page on user choice to make sure cookie is set
onStatusChange: function (status, chosenBefore) {
location.reload();
}
})
});
</script>
{% endif %}
Conclusion
Adding cookie consent is not that much magic anymore, thanks to the easy generator of Osano.
Also it was really interesting to see, how different websites handle cookie consent. Seeing how some websites just inform me without giving me the possibility to opt-in (or opt-out at least) makes me a bit suspicious about their practices.
At the same time I am wondering: What do you think about this "informing only" approach?
And what is your opinion about my choice of giving you an opt-out possibility?
What approach would you choose and why?
About Fabian Schlegel
Fabian is a web developer by day and a curious mind in his free-time.
He is interested in various topics and strives for sharing knowledge.
