I have previously discussed Internet Tracking: The good, the and the ugly and even some precautions I have taken in How to Get back your online privacy
In developing the new website for Geek.I.Am and the eventual application and platform, I thought it would be relevant in exploring how to implement a Cookie Consent notification using Gridsome. Primarily as over the next few iterations of the website I will be introducing some functionality that will be making use of cookies. That being said I have already implemented Google Analytics in Gridsome – Configure Basic On-Page SEO
What is a cookie consent
There are many different ways on how cookies of first and/or third party provenance can track website users. A good example is the IP address or merely the actions and choices of users not exclusively on the site, but also differ from site to site.
GDPR contains a broad definition of personal data, if you happen to use cookies, you will need to ask consent from your existing and future users. You certainly need to ask for consent before setting up any cookies other than the necessary ones.
Cookies that can track direct personal data or data that can be a potential way to connect or single out an identification to track a person, must be removed. An appropriate update, in accordance with the regulations, should be applied to the cookie policy and cookie consent.
Many notable modern websites have hundreds of useful and active cookies and online tracking in use.
What is GDPR?
The General Data Protection Regulation, is a known ePrivacy regulation.
GDPR contains six data protection principles:
- Lawfulness, fairness, and transparency
- To purpose limitations
- Works in data minimization
- Provide accuracy
- Meet storage limitations
- Integrity and confidentiality
GDPR defines six lawful bases for processing personal data:
- Consent – the individual should be able to provide clear and straightforward consent for you to make use. In that way, you can process their personal data for a specific purpose.
- Contract – the processing is necessary for a contract that you have with the individual. Taking careful and specific steps before entering into a contract is important and necessary.
- Legal obligation – the processing, of course, is necessary and important for you to comply with the law.
- Vital interests – accurate processing is essential to protect someone’s life and privacy.
- Public task – the processing is necessary for you to perform a task in the public interest. It is also important for your official functions, and the task or function should have a clear basis in law.
- Legitimate interests – viable legitimate interests or the legitimate interests of a third party is another important reason for processing, excepting that there is a good reason to protect the individual’s personal data and privacy which will nullify those legitimate interests.
How to Implement Cookie Consent with Gridsome
Probably the most irritating aspect about Cookie Consent, is that it is probably one of the most un-glamorous tasks in web development. In part, that nobody ever reads the privacy policy pages, other than other web developers who are searching for some content to copy and paste into their web projects!
Fortunately, there is a really cool and easy to Gridsome plugin that will help you to get a Cookie Consent functionality set up on your Gridsome Website really quickly. In fact, it will probably take you more time and effort to create the Privacy Policy pages that nobody will ever read or visit.
In, Gridsome - Configure Basic On-Page SEO , we set up Google Analytics so we could get analytics data will need to determine just how successful our website gradually becomes. In this post, we will close the loop and implement the Cookie Consent, because we have to at least inform our users that we are making use of Google Analytics which in turn could be making use of cookies to track users.
In the Gridsome Plugin directory there is a wrapper available for the Klaro! Simple and user-friendly consent manager.
Klaro is a free & open-source tool that provides an intuitive, user-friendly and compliant way to manage consent on your website. Klaro is easy to use and configure, lightweight and compatible with all modern browsers.
We are going to go ahead and implement this on Geek.I.Am and configure to inform the user we are using Google Analytics.
Install Klaro Gridsome plugin
We will just use the terminal to install the plugin into our project.
Once this is complete we will then need to edit our gridsome.config.js to configure the plugin for use. We just need to add the following information to our plugins section
You will notice that we need to create an additional page in website, as we defined with privacyPolicy: '/privacy', so we just need to add that page in ./src/pages/Privacy.vue.
We also need to add all the details for Privacy Policy. Fortunately, I have one which I have had created for a number of my websites, so I personally need to copy and paste this information in. You may need to get one generated or just do as most other web developers copy and paste from another website, just remembering to change the Company or Individual names as required.
If we start up our website using gridsome develop and browse to http://localhost:8080 we will be able to see our new Cookie Consent pop up.
If the user clicks the customize.. they will be presented with a screen to switch Google Analytics on or off.
Conclusion
You can easily add other options to Klaro should your website be using more. Check out the Klaro sample configuration file for examples.
- What is this Directory.Packages.props file all about? - January 25, 2024
- How to add Tailwind CSS to Blazor website - November 20, 2023
- How to deploy a Blazor site to Netlify - November 17, 2023