Guide to GDPR Compliant Cookie Declaration Using Wix.com.
Why a Cookie Banner is not enough
Cookie Consent is one part of a GDPR compliant website, Cookie Declaration is the other, none less important one.
In this comprehensive guide, I will guide you through the process of implementing a Cookie Declaration embedded right in your Data Privacy Policy on your personal or business website.
At the end of this guide, you’ll know how to inject a dynamic Cookie Declaration into a Wix.com build website right in your privacy policy using Google Tag Manager. Furthermore, you’ll learn how to apply various styling options on the fly, to let the Cookie Declaration look and feel like an integral part of your website.
Cookies — The why what and how?
While we all know (and only the brave of us love) the thousands of various Cookie Consent banners coming in all shapes and colors, only a hand full of websites implement a Cookie Declaration.
A Cookie Declaration is basically an overview of all cookies the website is using, categorized into strictly necessary (functional) and optional ones, like marketing or statistics. A good sample for a marketing cookie is Google Analytics. In some implementations, those cookies are declared on the first-page visit and only set if the user consents. The fact that many Cookie Consent banners do not offer a deny option as required by GDPR, is part of another story and I leave it for your research for now. I recommend a very nice summary of Cookiebot.com.
But wait! What if a user changes her mind afterward and is no longer sure what the site is doing and what she accepted? Not all of your users are power users and able to delete their Browser Cookie Cache to force the Cookie Consent bar showing up again.
This is exactly where you need to provide the possibility to review and change your consent in someplace. This place is the Data Privacy Policy on your website as defined by GDPR and I call this functionality the Cookie Declaration.
Data Privacy Policy
It’s most common to search the web for a GDPR conform Data Privacy Policy Generator or copy and paste it from other websites (as the number one reason why most of it is wrong) ending up with a whole bunch of text, telling people how you treat their personal data. The generated text is usually located on a sub-page on your website and accessible through navigation, while the most commonplace is obviously the footer of a website.
From the GDPR perspective, if done right, this text usually contains something like the Possibility of opposition somewhere in the Cookie section of the data privacy policy. This is the place where you should declare all used cookies (necessary and optional) and give the user the possibility for opposition or adjustment on previously given consent. This possibility is mostly missing.
The Stack
We’re using Wix.com as the website builder of choice and Cookiebot.com as a GDPR ready solution for Cookie handling.
GDPR conform Cookie handling is something that can become very difficult and it is much more than a simple banner with an accept button. This is where solutions like Cookiebot.com jump in to simplify this process a lot. To achieve this, Cookiebot.com remotely scans your website for used cookies, automatically classifies and describes those cookies and gives you scripts to embed into your site.
While the merits of a website builder solution like Wix.com are undisputed, the downside sometimes is, that you have to work around various limitations, especially when it comes to code solutions or fancy workarounds that involve 3rd party solutions others then the first-class citizens of the platform itself.
A perfect match to overcome such limitations is Google Tag Manager. Basically Google Tag Manager allows you to inject any kind of Code into your website while listening for various triggering events. Google Tag Manager is a first-class citizen from Wix.com and recommended in many support articles.
So here is what you need to follow along:
- A Wix.com made website with a connected custom domain and a premium plan.
- A free Cookiebot.com Account using this link.
If you already have one, follow this link if you need my help. - A free Google Tag Manager Account
- Followed the Cookie Banner story.
Disclaimer: Note that the provided sign up link for Cookiebot.com allows me to support you in case you have trouble implementing this guide.
The Problem
After this long and brief introduction into the topic of Cookie Declarations, I want to point out the challenges you’re facing when implementing a stack as described above.
Problem 1: Your cookies might change, your static declaration doesn’t
You might think of writing down the list of cookies yourself or copy/paste it from Cookiebot.com report and put it as static content on your site. This will quickly outdate as your Website grows or the platform and plug-ins change. Thus you’ll quickly end up with an incomplete or wrong list of cookies.
Problem 2: Your cookie declaration looks like a foreign body on your website
Again, Wix.com is a great platform but has some downsides when it comes to the integration of other tools. While Wix.com is offering various places to inject custom scripts like the Tracking & Analytics feature, it will give you less control over when and how it renders the embedded content and therefore your styling will not apply. Content will show up at unwanted location or embedded content will break your website completely.
Problem 3: Most implementation guides for Cookiebot.com are wrong or breaking your Wix.com website
While there is already a guide on how to implement Cookiebot for Wix.com, published by the Wix.com support team, I believe that this guide is misleading and doesn’t solve the above problem statement. Furthermore, it is marked as deprecated, linking to some help articles of Cookiebot.com which both are ignoring the challenges I’ve pointed out.
The Solution
To solve all of the above challenges, you connect your Wix.com website with Google Tag Manager. Then you let Google Tag Manager inject the Cookiebot.com dynamic Cookie Declaration right into your website, exactly where you want it and the way you want it, so it feels like an integral part of your website.
Step by Step
Prepare your Wix.com Site
Open your Wix.com website and if not already created, add a new page for your Data Privacy Policy. Place a simple paragraph text element anywhere on your page and label it LOADING COOKIE DECLARATION... or so. Please note that you have to name it exactly this way if you’re planning to use the below scripts without modification. Please also note that this text can appear within any other text on your site, e.g. your very long Data Privacy Policy statement.
Make sure the placeholder text has a paragraph style (not a heading) applied to it and is surrounded by line breaks (hit enter).
Keep everything open, as we’re soon coming back to your Wix.com website.
Google Tag Manager
In Google Tag Manager, click Create Account and configure your new Container accordingly, accept EULA and click all the way through till you end up in the main interface. Skip these steps in case you already have a configured Google Tag Manager environment for your Wix.com website.
At this point note your Google Tag Manager Id which is located right next to the Preview button. We’re going to use that one later.
In the Google Tag Manager main interface create two variables of type Constant.
- Variable Cookiebot Domain Group Id
It contains your Domain Group ID taken from Cookiebot.com. You find it in your Cookiebot.com account under Your scripts. - Variable Cookiebot Placeholder Text
It contains the text of the placeholder element you’ve set on your Wix.com website in the previous step.
Next, we create the necessary Tag in Google Tag Manager which is more or less just a plain JavaScript injected code snippet that is leveraging the previously created variables. The tag will listen to an event fired by your Wix.com website which we create later on.
In Google Tag Manager go to Triggers and add a new Trigger of Type Custom Event.
Name it something like On Inject Cookie Declaration Event and use the exact Event name InjectCookieDeclaration and hit Save.
Now we’re ready to create the Tag. Go to Tags in Google Tag Manager and click Tag Configuration.
From there find the Custom HTML Tag and add it.
Name it something like Inject Cookie Declaration and paste the below script into the HTML box.
When you hit the Save Button you’ll be asked to Add Trigger. Doing so results in the following view where you can select the previously created On Inject Cookie Declaration Event trigger. Add the Trigger and Save everything.
This should be your final view. Now hit the Submit button to publish all of your work.
Next, we need to tell your Wix.com website to trigger the event InjectCookieDeclaration which we’ve created previously. To do so, head over to your Wix.com website builder interface and Turn on Dev Mode through the Dev Mode menu.
When in Dev Mode, open the code editor by clicking the Page Code bar in your editor footer section.
Add the following Script to your Page Code and publish your site again. This little script uses the Analytics Layer (a.k.a. Data Layer) to signal various events to other listeners.
In our case, it is the Google Tag Manager connected to your Wix.com website which ist listening for this custom event to trigger the injection of your Cookiebot.com Cookie Declaration. We’re almost there!
Now we’re taking the final step in connecting your Wix.com website with your Google Tag Manager. To do so, open the Tracking & Analytics Dialog in the Settings menu.
From there click New Tool and select Google Tag Manager. Prompted for your Google Tag Manager Container ID, enter the ID that is shown in your Google Tag Manager's main interface, as mentioned before.
Save all your work and make sure you published your Wix.com website, your Google Tag Manager work and your Cookiebot.com settings.
Now it’s time to test our implementation. Visit your Wix.com website and head over to your Data Privacy Policy page to watch the magic happen. First, see your text label appear indicating a loading action through its placeholder text.
After a few seconds and after Google Tag Manager received the Event from your Wix.com website, the Cookie Declaration from Cookiebot.com gets loaded on the fly. Note how nicely it is applied to your website having exactly the style you want it to have (refer to the problem statements above).
Before you go, consider a small donation đź’—
I wrote this for you! And I made it free for everyone. Think about how much time and money you saved and consider a small donation of $100, $50, $25, or even less. It now powers your website🚀! Thank you so much!
Summary
That’s it. I hope you like this introduction on a concrete GDPR/EU ePrivacy Cookie Declaration implementation and it helped you to make your website compliant.
Make it so.
- Sebastian
Bonus: Styling Cookie Declaration
You may have noticed the following lines in our Tag script:
/* Add some quick css styling to injected content as WIX might override some styles */var styleNode = document.createElement('style');
styleNode.type = 'text/css';
styleNode.appendChild(document.createTextNode('a {text-decoration: underline;}'));
These lines are sort of a bonus for you as they give you the possibility to style your Cookie Declaration on the fly. In the above script, the stylesheet is set to underline all links in your Cookie Declaration. You need this, as Wix.com removes underlines from links by default and wraps them into a span to bring them back. This, of course, is a problem when you dynamically inject content.
If you followed the mentioned Cookiebot.com guide for Google Tag Manager Deployment, then you’ll see two links in your Cookie Declaration where users can change their consent.
Without our script, the result would look slightly different and not as user-friendly as you want it to be as links are not underlined and hard to spot by your users.
