How to Get User Content Before Setting Cookies, Using Cookie Consent.
Recently I’ve created my first personal website, and as I’m living in the EU, I had to go through the whole process of making it GDPR compliant, which was as fun as it sounds. Then, as I was planning on using third-party cookies to collect analytics, I also had to comply with the cookie law, which states that you cannot store any data that is not strictly necessary. And analytics from third-party is not strictly necessary for my website to work correctly, so I had to add that annoying little popup that you see on every website nowadays, asking for user consent.
I’m relatively new to this and did not want to develop it from scratch, so I searched the web for existing solutions. Most of them were paid, but after some digging, I came across that javascript plugin called Cookie Consent, created by Osano. They have a hosted paid version where you have pretty much nothing to do, and they also have a script, easy to install that allows you to create that consent popup quickly and for free.
Here I’m going to walk you through how I made it work, and I’ll use Google Analytics as a setup example.
The non-compliant code
For those of you who use Google Analytics, you might be already familiar with how it works. The basic installation is done by adding those lines at the end of your <head>
Regarding the cookies, it’s everything in the second <script> tag that sets them up. That’s what we want to delay after the user gives it consent.
The Cookie Consent popup
Cookie Consent makes it pretty easy to configure your popup, and you can do it right from their website.
Just head there and click on the “start coding” button:
You’ll see different steps on the left side that you can follow at your ease to make your popup suit your needs. You should see in the right of the window that for every change you make, the cookie popup code gets updated.
For point 5, Compliance type, choose “Ask users to opt into cookies (Advanced).” This option will allow you to ask for explicit consent, and it’s up to you to decide what you do once you get that consent. Of course, you can also choose the other option to set the cookies anyway and warn the user that you have set cookies, which currently seems allowed, but I decided to go for the safe part for my website.
Once you’re done, and you’ve configured your popup as you want, you should end up with a code that looks a bit like this:
Please note that if you want to change the default “Decline” text of the popup, you’ll need to add a “deny” option in the code, as shown above.
Now copy that final code before the closing </body> tag, and add this in your <head> tag to get the stylesheet:
Refresh your page and you should see your popup appear as you configured it
Handle user consent
Now that you have your popup configured, you might wonder what’s the next step, because as it stands right now, accepting or denying does not do a thing.
The answer for that, as per the documentation, is to add a callback hook.
For that, you need to add an onInitialise hook at the end of your generated script.
Now you need to add any cookie-related code where the enable cookies comment is. In all logic, you don’t have to do anything if they don’t consent, as you have not set any cookies before the user interacts with the popup.
So to get back with the analytics example, we can now extract the code faulty of adding cookies and move it into this section. It will look like this:
That’s it. You’re all set!
If you do the test, you won’t have any cookies set on your browser until you explicitly click on the consent button. You might notice that cookie consent adds a cookie to remember your choice, but this falls into the “strictly necessary” cookies that you are allowed to set without consent. As otherwise, you would have to ask for consent again at any page the user sees.
End code
In the end, this is how the whole code should look like:
Note on RGPD compliance
You might have noticed that we are loading the Cookie Consent script using a CDN (jsdelivr) in this example. Depending on your privacy policy, this might not be fully compliant with GDPR, as when the user opens the page, a request is made to the CDN to get the script. Some user-related information might be sent (mainly IP address), and perhaps you want to avoid that, or at least delay it until you get user approval. The same goes for the Google Analytics script loading.
One workaround for that would be to install the cookie consent package directly on your server instead of loading it using jsdelivr.
You can see instructions on how to do that on their GitHub page here:
As for Google Analytics, you might want only to load the script once you get user consent. In that case, you’d have to remove the script line from the head and replace the acceptation code with this:
And you should be covered.
Final word
By the end of this, you should have a working cookie consent popup. It might sound trivial, but this was a tedious task for me to set it up properly as I’m entirely new to this world, and it caused me a lot of headaches as well. That’s why I’ve decided to write down the process I followed, hoping it can help some of you in some ways.
