Add a simple cookie consent solution to your web project

TL, DR

Almost any web project needs a cookie consent solution to be compliant with GDPR, CCPA, and other similar regulations around the world. CookieConsent and CookieBAR are two free solutions easy to implement that will help you be compliant.

Cookies and Privacy

Regulation about privacy is something any web project needs to keep in mind when deploying. One of the sensitive points is the cookie one. We need to get consent from our website visitors before saving cookies into their web browser and access the ones that may be already there.

Luckily there are a few simple solutions, based on JavaScript, that can easily be embedded in our webpages and help us stay compliant. In this post we present two of them, CookieConsent and CookieBAR.

CookieConsent

CookieConsent is one of the easiest solution to implement to keep your website compliant with regulation. Their webpage has a simple and straightforward process with 4 steps to generate a JavaScript script the you can include in your HTML code. This will expose a cookie consent banner, and keep track of your visitor choices.

After you completed your setup, you should also tag all the other JavaScript scripts in your HTML that will generate and save cookies. You should change the type from type="text/javascript" to type="text/plain", as well as adding the corresponding consent level. For instance: cookie-consent="functionality".

Here you can find some examples from Google Analytics and a Login Session script that is loaded with some necessary cookies.

<!-- Login Cookies -->
<script type="text/plain" cookie-consent="strictly-necessary" src="/js/login-session.js"></script>

<!-- Google Analytics -->
<script type="text/plain" cookie-consent="tracking">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', GOOGLE_PROPERTY_ID_GOES_HERE, 'auto');
ga('send', 'pageview');
</script>

CookieBAR

CookieBAR is another simple solution to keep your compliance with privacy regulation. On their webpage you can find a handy configuration tool to setup the options you want for your website cookie consent policy. Once you select all the options you want and insert the necessary information (for instance, the link to your cookie policy), the tool will generate a script you can embed in your webpage.

To complete the setup for your website, you also need to go to their “Preventive Block” tab. There you will find a set of scripts to wrap around your other code that sets and reads cookies. This way, it will check that the user provided its consent for the cookies before unleashing them.

There are examples for few programming languages. The code to wrap around other JavaScript scripts in plain HTML is the following:

<script type="text/javascript">
    cookieValue = document.cookie.match(/(;)?cookiebar=([^;]*);?/)[2];
    if (cookieValue == 'CookieAllowed') {
        // The user has allowed cookies, let's load our external services
    }
</script>

Once you complete this, you will be all set and compliant!

Cookie summary

To sum everything up, if you need a simple and easy to use cookie consent solution to keep your web projects compliant with regulation, CookieConsent and CookieBAR are two great and easy to implement. In my opinion, you should give them a try!

Related links

  • CookieConsent website link
  • CookieBAR website link

Do you like our content? Check more of our posts in our blog!