Implement a GDPR Compliant Cookie Banner for Wix.com Using Google Tag Manager and Cookiebot.
A simple guide to implementing a GDPR compliant Cookie Banner
I guess you know what a Cookie Banner is, don’t you? ;-) Then you also know what a challenge it is to implement it properly.
While GDPR did a very good job of strengthening our privacy protection on the internet, it all comes with a cost. This time it is the pain of implementing such a solution on your personal or your client website. While we all (mostly) love Wix.com, it doesn’t do a very good job of giving you nice options to solve this challenge. Fortunately we have solutions like Cookiebot which rush to help.
Cookiebot is a great product but the documentation for implementing it with Wix.com isn’t really the best in class.
This article is the first of a few articles aiming to help even non-coders to implement a nice and compliant cookie implementation on your website.
Here is what you need to follow me 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.
Special Note: This guide uses a fictive brand called Leantify. You may notice some IDs or secrets in this guide, especially on a screenshot. I left them to make it easier to follow me along. However, you have to replace them with your own IDs and secrets. For the hackers: All IDs and secrets are invalid ;-).
Disclaimer: Note that the provided sign up link for Cookiebot.com allows me to support you in case you have trouble implementing this guide.
Step by Step
Sign up and configure Cookiebot
Go to Cookiebot.com and create an account.
First, we clean up our setup by clicking the edit icon of our default Domain Group which is just a container for your website.
Give it a nice name, e.g. the name of your Domain or Company. It doesn’t matter what the domain group name is, but its cleaner to name it properly.
Next, add your domain to be scanned by Cookiebot. Note that this can take up to 24 hours (usually much faster), so we do it right at the beginning and let it run while we can go ahead without implementation.
Click the + sign next to Domain Name and enter the exact URL of your website. Note that this is the website that Cookiebot starts scanning for cookies so make sure it is up and running.
After you’ve entered your domain, click save and cookiebot starts scanning. Again, you don’t have to wait for this scan to complete. If you’re curious about the progress you can jump over to the Cookies Tab in your Cookiebot account.
While Cookiebot is scanning your domain, go to the Your script tab and note the Domain Group ID as we soon need it in Google Tag Manager.
Configure Google Tag Manager for Cookiebot
Login to Google Tag Manager and click Create Account
Setup your account accordingly for your domain. Choose Web as your target platform and click Create.
After you accepted the data privacy policy and the account was created, Google Tag Manager welcomes you with a bunch of cryptic JavaScript snippets. You can ignore those scripts. Only note the Google Tag Manager Container ID as marked in the screenshot below, as we later need it. This ID is also contained inside the scripts block where it is easier to copy it from.
Now click Templates and hit the button Search Gallery.
Search for cookiebot and select the resulting Cookiebot CMP entry. Click Add to workspace and confirm all warnings.
The next step is very similar to what we did before. Back in Templates we add Variable Templates by clicking Search Gallery, searching for cookiebot and selecting Cookiebot Consent State from the resulting list. Click Add to workspace and confirm all warnings just like before.
Your final configuration should look the same as below.
Now it’s time to configure our logic in Google Tag Manager. To do so, go to Tags and click New.
Click the Edit Icon in Tag Configuration section, search for cookiebot and select Cookiebot CMP from the resulting list.
Remember the Domain Group ID from our Cookiebot account setup? Now it’s time to use it. Enter the ID inside the Cookiebot ID field of your Tag configuration and name it Cookiebot. Don’t save it yet as we have to configure the trigger in the next step first.
Click the Edit icon in the Trigger section and select the All Pages trigger.
Finally, verify your settings and hit Save.
We’re getting closer! Hang tight.
Next, we configure a few variables to later control the behavior of cookies in our setup.
Go to Variables and click New. Give the configuration the name Cookie Consent and click the Edit icon in the Variables Configuration section.
Look for the custom template Cookiebot Consent State, select it, verify the configuration and save it.
Focus! Next, we implement 3 triggers representing the cookie categories Marketing, Preferences and Statistics. These triggers can later be used to control which Cookies are allowed and which are denied. You can find my guide on how to do this with Google Analytics here.
Marketing
Name: Cookie Consent Marketing
Event Name: cookie_consent_marketing
Condition value: marketing
Preferences
Name: Cookie Consent Preferences
Event Name: cookie_consent_preferences
Condition value: preferences
Statistics
Name: Cookie Consent Statistics
Event name: cookie_consent_statistics
Condition value: statistics
Now let’s configure the first trigger Marketing with the values above. For this, go to Triggers and click New. Name the Trigger according to the list above and click the Edit Icon in the Trigger Configuration section.
From the list of available Triggers, select Custom Event. Configure the event according to the list above. Use the values for Event name and the condition value. Hit Save and you’re done with the first trigger.
Repeat this step for the remaining two Triggers and verify your results against the screenshot below. This should be your final view:
Congratulation! You’re done configuring Google Tag Manager. Now it is time to publish your container. Click Submit, give it a nice comment for your publishing history and finally hit the Publish button.
You're almost there! Our next and last stop is Wix.com.
Configure Wix.com for Cookiebot using Google Tag Manager
Back on Wix.com, edit your website and click Settings. Choose Tracking & Analytics from the menu.
In the Tracking Tools & Analytics configuration click New Tool and select Google Tag Manager.
Now it is time to enter your Google Tag Manager Container ID. Remember that one? I told you to note it! ;-) Don’t worry if you haven’t. You will immediately spot it in your Google Tag Manager Account. Once you’ve entered it click Apply and make sure the Switch is on.
As a final step close the dialog, Publish your Website again and you’re DONE!
Before our final test, make sure that meanwhile, Cookiebot finished scanning your Website. In your Cookiebot Account, click Cookies and check the current status of the scanning process. Note again that this can take up to 24 hours.
When the scan was completed, jump over to your website URL and see the Cookiebot banner appear. Well done!
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 for now. You’ve successfully implemented a Cookie Banner on your Website using Wix.com, Google Tag Manager and Cookiebot.
But wait! There is more to do to achieve a GDPR/EU ePrivacy compliant website. See my second post about a proper Cookie Declaration in your Data Policy here on Medium.com.
Make it so.
- Sebastian
