How to Create a GDPR Compliant Cookie Banner for a Squarespace Site, using CookiePro (2019)
So, this post I explain how these challenges can be overcome. Specifically, I look at how to create a GDPR-compliant cookie banner for Squarespace that not only tells users that cookies are being used on your site, but allows them to control their use fully too (as GDPR requires).
Before reading on however, please bear in mind that although this article aims to help you achieve GPDR compliance in the area of cookie consent, I’m not a lawyer and you shouldn’t treat the post as legal advice.
With that disclaimer out of the way, let’s begin by looking at what GDPR requires you to do when it comes to cookies.
GDPR and cookie consent: the key requirements
GDPR requires site owners to follow 5 key rules with regard to cookie consent:
Let site visitors know that cookies are being used.
Explain how cookies are being used, and why.
Provide visitors with a means to consent to ‘non-essential’ cookies being used BEFORE they are run.
Log consent of cookie usage.
Allow users to withdraw that consent (i.e., switch cookies they’ve previously activated off).
(For a full list of the GDPR requirements on cookie consent, I’d suggest reading the UK Information Commissioner’s Office’s guidelines on cookies).
Now, Squarespace allows you to meet the first two requirements — it’s easy enough to display content in Squarespace saying that cookies are being used, or add a page to your site containing a cookies notice which details how and why.
However, the other three requirements - obtaining prior consent, logging consent and providing a mechanism for withdrawing consent are not catered for adequately (or at all, really) in Squarespace.
Whilst it IS possible to display a cookies banner in Squarespace allowing visitors to consent to the built-in Squarespace analytics cookies being run, that’s pretty much it. (And as the consent for this is not logged, and can’t be revoked, you could argue that even if the only cookies run on your website were those run by the built-in Squarespace stats, you’d still be breaching GDPR rules).
Things get even worse when it comes to third-party cookies, because out of the box there is absolutely no way to offer your Squarespace site visitors the option to block them before they are run.
This means that as soon as you add a Facebook pixel, Google Analytics tracking code or Google adverts to your Squarespace site — something routinely done by thousands of Squarespace customers — you end up breaking the law (something which can technically result in fairly hefty financial penalties).
Thankfully, workarounds exist to add a GDPR-compliant cookie banner to a Squarespace site, in the form of various free scripts (Google is your friend here) or paid-for tools which are designed to give your users fine-grain control and prior consent over cookie usage.
As most Squarespace site owners use the platform as a means to avoid coding, it’s fair to say that the paid-for options are probably going to be the most appealing to Squarespace customers (because they minimize — although not entirely eliminate — technical work on your site).
After a fair bit of research, I’ve settled on a tool called CookiePro as the solution that I use to add a GDPR-compliant cookie banner to my clients’ Squarespace sites; accordingly, this post focuses on using this tool to ensure cookie consent compliance.
There are two ways to set up your banner on Squarespace with CookiePro: the first is basically to pay the company that makes it, OneTrust, to do it (or to provide significant hand-holding). This costs $250 but may well be worth it for many users, because although getting CookiePro working well with a Squarespace site does not involve a degree in rocket science, it is nonetheless a pretty lengthy process which involves a reasonable amount of technical configuration.
The other option is to integrate CookiePro with Squarespace yourself, and in the below set of steps we explain how to do just that.
1. Sign up for a CookiePro account
The free version of CookiePro is for users who have less than 100 pages on their site; the paid-for versions contain more features and allows you to use the tool on more pages (exact limits depend on the plan in question). If your site is fairly small and static, you’ll probably get away with using the free version of CookiePro; if you blog a lot or have a large site, you’ll need a paid-for version.
Within an hour of signing up, you’ll receive an email prompting you to activate both the CookiePro product and their support portal. Do both, as you’ll need access to the support portal to access some files which you’ll need to get your banner live.
2. Add your website to CookiePro
To do this,
Log into CookiePro and click the 'grid’ icon at the top of the screen, followed by the ‘Cookie Consent’ option.
Click the ‘Add website’ button at the top right corner of the screen.
Follow the instructions on screen to add your website to CookiePro.
3. Disable the non-essential Squarespace built-in cookies
CookiePro can’t be used to disable or run the non-essential Squarespace cookies dropped by its Analytics and Activity Log features. And as described above, the cookie banner provided by Squarespace to provide control over its Analytics feature isn’t fully GDPR compliant.
So, to ensure full compliance, both these features need to be disabled, annoying as this might be! To measure web traffic, e-commerce goals etc., I’d suggest using Google Analytics (which is a more comprehensive Analytics solution anyway).
To disable the banner, Squarespace Analytics and Activity Log, go to Settings > Cookies and Visitor Data and then make sure that:
the ‘enable cookie banner’ option is unchecked
the ‘disable Squarespace analytics cookies’ option is checked
the ‘enable activity log’ option is unchecked
4. Install Google Tag Manager in Squarespace
The best way to make CookiePro work with Squarespace is to use Google Tag Manager to run all your cookies.
Google Tag Manager is a free tool that allows you manage and deploy multiple marketing tags (snippets of code or tracking pixels) on your website.
To install Google Tag Manger in Squarespace,
Sign up and log into Google Tag Manager
Create an account for your project — Tag Manager will guide you through this.
Go to Admin > Install Google Tag Manager
You’ll see two pieces of code. Copy the first one to your clipboard.
In Squarespace, go to Settings > Advanced > Code Injection and paste this code into the header section.
Return to Google Tag Manager > Admin > Install Google Tag Manager, and copy the second piece of code to the clipboard.
In Squarespace, go to Settings > Advanced > Code Injection and paste this code into the footer section. Make sure you save your changes.
5. Add your cookie scripts to Google Tag Manager
You now need to add any cookie scripts you want to use on your Squarespace site to Google Tag Manager (Google Analytics, Facebook pixel and so on).
In Google Tag Manager, go to the relevant account for your site, then click Workspace > New Tag.
Add your script. You’ll find some more detailed instructions on how to do this on the Tag Manager help site, but it’s usually a case of choosing the Custom HTML tag (for Facebook pixels, Twitter pixels etc.) or the Google Analytics option.
During this process you will be asked to select a trigger for your tags. Choose ‘All Pages’ for now for each tag that you create.
When you’re done adding tags, publish them in Google Tag Manager by clicking Submit > Publish.
Important: You should also make sure that any scripts you have added to Google Tag Manager as tags are no longer present in the code injection sections of Squarespace site. If you’ve added Google Analytics as a tag, and had previously added it to the ‘External API Keys’ section of Squarespace, you should remove it from the latter.
6. Scan your site for cookies in CookiePro
You now need to use CookiePro to scan your site for cookies and assign relevant categories to them.
To start a scan in CookiePro,
Go to the Cookie Consent dashboard (using the grid option at the top of the screen).
Click on your website name.
Click the ‘Scan Now’ button at the top right of the screen.
Wait until the scan is over (depending on the size of your site, it can take quite a while for it to finish).
7. Choose your banner type
In Cookie Pro, click the ‘Cookie banner’ tab to decide on where you’d like to the banner to appear on your site. You can choose from a few different banner positions here, including top, centre or bottom. Just pick your preferred option, then click ‘Create.’
Tip: I normally recommend choosing the layout that places the banner in the middle of the screen, as this makes it more likely that users will accept the cookies before continuing to browse the site (the other banner layouts, by contrast, are more easily ignored, and allow people to browse the site without accepting your cookies).
To ensure maximum GDPR compliance,
enable the Cookie Settings button.
You can use the ‘Colors’, ‘Content’ and ‘Behaviour’ sections to further tweak your banner’s appearance.
Additionally, you can use the ‘Preference Center’ tab to add custom CSS to style your banner with. This enables you to display a banner which is in keeping with the rest of your website or brand.
8. Assign your cookies to categories in CookiePro
You now need to assign your cookies to the relevant categories in CookiePro (note: make sure your scan has 100% finished first - see step 7 above for details). The categories are as follows:
Strictly necessary — put anything vital to the running of your website in here
Performance cookies — this should be used for any web stat tools (i.e., Google Analytics)
Functional cookies — this category should be used for cookies which enhance the functionality of your site but are not 100% essential to users
Targeting cookies — use this category for things like Facebook pixels or Google Ads cookies (scripts that retarget users or track conversions etc.)
Social media cookies — this section can be used for any cookies related to social networks.
To assign your cookies, click the ‘Cookies List’ tab. You’ll see a list of all the cookies identified by the scan, which you can then assign to the above categories as necessary.
You can do this using the ‘auto assign’ button or by dragging cookies over from your list to the relevant category.
Once you’re done, click the ‘Publish’ button at the top right hand corner of the CookiePro dashboard screen, followed by ‘Submit’.
9. Decide how you want your cookies to run
CookiePro provides a wide range of ways to run your cookies, with varying degrees of compliance with GDPR. For example, you can configure things so that every cookie is run the moment that a visitor lands on your site (not very compliant!) — or you can block everything until a user has gone in and reviewed what cookies they’d like to run.
For the record, and to ensure compliance, I usually recommend an approach where all cookies are simply activated by the ‘Accept’ button, but with an option provided to go in and switch off particular cookies as desired.
To do this, go to Cookie List > Consent Settings in CookiePro and set all cookies, other than the strictly necessary ones, to ‘Inactive LandingPage.’ You should also enable logging.
Additionally, to ensure full GDPR compliance, you should always allow users to manage their cookie settings - this allows them to switch individual cookies on and off, as GDPR requires. To do this, click Cookie Banner > Content in Cookie Pro, scroll down the settings a little bit and ensure you have the ‘cookie settings button’ switched on.
Once you’re happy, click the ‘Publish’ button at the top-right hand corner of the screen to save your changes, then ‘Submit’.
10. Add the CookiePro triggers to Google Tag Manager
The next step is to upload a special CookiePro ‘container’ file to Google Tag Manager and get it talking to CookiePro. This container file holds a set of ‘triggers’ which Google Tag Manager will use to switch your cookies on or off based on what visitors to your site do on your banner.
1. Download the container file. You’ll find this at the bottom of the page about Google Tag Manager integration on the CookiePro help portal — look for the link that says ‘GTM attachment.’ Note that you’ll only get access to this page once you are a CookiePro customer and after you’ve logged into the CookiePro help portal.
2. Go to Google Tag Manger and select your account.
3. Click the Admin tab and click the ‘Import Container’ option.
4. When you see the ‘Import Container’ screen
use the ‘select the file to import’ option to add the CookiePro triggers to Google Tag Manger
when asked to choose a new or existing workspace, choose ‘existing’ followed by ‘default.’ (if you are using multiple workspaces, you might need to choose a different one, but for the vast majority of users, ‘default’ will be the correct and usually only available choice).
5. Select Merge and then Overwrite conflicting tags, triggers and variables as the import option.
6. Click the Confirm button.
7. Go back into CookiePro and click Script Integration > Production Single Location.
8. Copy the 2nd line of code in the box. It usually looks something like this:
9. On the main navigation menu in Google Tag Manager, select Tags.
10. Select Cookie Banner Script. The Cookie Banner Script tag configuration modal appears.
11. In the HTML field, paste the first line of your banner script that you copied in step 6, as per the below screengrab.
12. Click Save.
13. Click Workspace > Tags
14. Open a tag (cookie) that you’d like the CookiePro banner to activate and click the ‘Choose a trigger’ option (we’re using Google Analytics as an example here).
15. Chose a trigger from the list provided. Which trigger to use will depend on how you want your cookies to run, but in most cases it’s a case of choosing one of the ‘Activate’ options. (Note that if you have previously chosen trigger for a particular cookie, you will need to remove it before adding the new CookiePro one).
16. When you’re done click Save > Submit > Publish.
11. Deal with any ‘client side’ cookies
The steps above will help you deal with cookies that you drop across your whole site (for example, analytics cookies, tracking pixels and so on). However, if you embed third-party content on specific pages of your site — in the form of Google ads, Youtube videos, third-party widgets etc. — and those pieces of content drop cookies, you’ll need to take an additional step to offer your visitors control over them.
This involves following CookiePro’s instructions for client-side cookie management (which you can access here once you’ve signed up as a CookiePro user).
To be honest, depending on how comfortable you are with scripts, you may need some assistance from CookiePro’s support team to get this running successfully on your site (I certainly did!), but my experience of the support team has been extremely positive and you should get the technical assistance you need to get this working.
12. Add a cookie settings button to your site
You now need to add a button to your site which allows people to modify their cookie settings (this is the option which allows them to revoke consent).
This can be done by going into CookiePro then clicking the ‘Script Integration’ tab, where you’ll find a snippet of code you can add to generate the button (look for the “Cookie Settings Button” script).
Where you put the button is up to you — I include the Style Factory button in our cookies notice, but you could put it in your footer if you’d like to make it more visible.
13. Test your cookie banner
The last step in the process is to check that your cookie banner is appearing and functioning correctly. To do this it’s best to use an ‘incognito’ or ‘private’ browser.
Using your private browser, load your website. Your cookie banner should now be appearing as expected and you should check it carefully to ensure it’s looking as it should, and giving users the cookie control options you’d expect to see.
You can use Google Tag Manager’s ‘Preview’ option to check the banner is actually running the cookies as expected.
To do this,
Log into Tag Manager in a new incognito window.
Locate your workspace where you’ve set up your tags.
Click the ‘Preview’ button in the top right corner.
Load your website in another tab.
In the bottom half of the window you should now see a Google Tag Manager summary telling you what scripts are being run (or ‘fired’). You can compare the information it displays before you click the ‘Accept’ option with what it displays subsequently. The screenshot below shows you an example of this in action, with Google Tag Manager highlighting which scripts have been fired on this website after the ‘accept’ button on banner has been clicked.
And that — eventually — is that!
As you can see, it’s quite a job to get all this set up — but if you want to ensure cookie compliance on your Squarespace site, it’s worth it.
You can find out more about CookiePro here.
Other Squarespace GDPR resources
Cookie banners are just one part of the picture when it comes to ensuring that your Squarepace website is GDPR-compliant — there are several other tasks you need to complete to ensure full compliance. We outline these in our Squarespace GDPR guide, which contains a useful checklist of all the steps you need to complete to make sure your Squarespace site is fully GDPR compliant.