Important remark: Website Builders like Shopify add their own native scripts to the page before any of your own content is added, including third party scripts like Cookiebot. This means that by the time the Cookiebot script loads, cookies or similar trackers will potentially already have been set.
To avoid tracking by the Website Builder's native scripts prior consent, you would have to mark them up. Unfortunately these scripts aren't accessible to you, making this impossible.
Shopify does provide a Customer Privacy API though, which allows you to signal to Shopify whether or not consent has been given.
Be aware though that this does not block cookies prior consent! It merely makes these session based, instead of the normal persistent tracking.
You can read Shopify's own documentation for further details here: Tracking European customers and GDPR compliance.
Controlling cookies in Shopify
First and foremost, you need to activate the provision Shopify itself provides to limit the use of cookies.
To do this:
- Click Preferences under the SALES CHANNELS section in the left-hand menu.
- Scroll down to the Customer privacy section.
- Click the Activate button belonging to the "Limit data collection for EU buyers" section.
- Click the Save button in the top right corner.
Implementing Cookiebot in Shopify
To add the Cookiebot script and enable Shopify's Customer Privacy API you need to access the code editor.
Here is how to do this:
-
-
In the left-hand menu, click on Home.
-
Select the Customize theme tab and click the Customize theme button.
- Click the Actions buttons and select Edit code
-
Enabling the Customer Privacy API
To enable Shopify's Customer Privacy API you need to create a new snippet:
- Under the Snippet section, click the "Add a new snippet" link.
- Name the new snippet "cookie-consent" and confirm by clicking the Create snippet button.
- Open the new cookie-consent.liquid file and add the following content:
<script>
function feedback() {
const p = window.Shopify.customerPrivacy;
console.log(`Tracking ${p.userCanBeTracked() ? "en" : "dis"}abled`);
} window.Shopify.loadFeatures(
[
{
name: "consent-tracking-api",
version: "0.1",
},
],
function (error) {
if (error) throw error;
if ("Cookiebot" in window)
if (Cookiebot.consented || Cookiebot.declined) {
window.Shopify.customerPrivacy.setTrackingConsent(!Cookiebot.declined, feedback);
return;
}
window.Shopify.customerPrivacy.setTrackingConsent(false, feedback);
}
); window.addEventListener("CookiebotOnConsentReady", function () {
window.Shopify.customerPrivacy.setTrackingConsent(!Cookiebot.declined, feedback);
});
</script>
Save the snippet by clicking the Save button. - Open the theme.liquid file
- Insert the Cookiebot script directly under the
<head>tag:
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="00000000-0000-0000-0000-000000000000" type="text/javascript" defer ></script>
This ensures that the banner loads as fast as possible.
Replace 00000000-0000-0000-0000-000000000000 with the serial number (CBID) from the Domain Group to which the domain is added. You can find it on the Your scripts tab in the Manager. - Find this line:
{{ content_for_header }}
Add this code directly under it:{% render 'cookie-consent' %}
- Click the Save button to save your changes.
Enabling "prior consent" on third party scripts
To enable prior consent (block cookies until the user has consented), apply the data-cookieconsent attribute to all script tags that set cookies. Set the comma-separated value of the attribute to one or more of the three types of cookies: "preferences", "statistics" and "marketing" in accordance with the types of cookies being set by each script.
Finally change the script tag type attribute from "text/javascript" to "text/plain".
For example; If you are using Google Analytics Universal, make the following change to the code in such a way that this:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
becomes this (highlighted in bold):
<script type="text/plain" data-cookieconsent="statistics">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
Keep in mind that any apps you add to your store can potentially set cookies too. This can't be prevented without "breaking" these apps.
It is recommended to implement 3rd party script to the greatest extent possible using a Tag Manager, which can then be configured to require consent before firing these tags.
Implementing the Cookie Declaration in Shopify
To show the Cookie Declaration on your website (in a new page or e.g. as part of your existing privacy policy), do the following:
- Under the SALES CHANNELS section, click Pages on the left-hand side menu of the admin panel.
- Click the Add page button in the upper right corner.
- Once you've created the page, put something you'll be easily able to find in raw HTML code (for example "#THIS IS THE PLACE#") in the exact position where you want display the Cookie Declaration.
- Click on the <> (Show HTML) button to access the source code of the page:
- Replace the placeholder from step 4 with the CookieDeclaration script:
<script
id="CookieDeclaration"
src="https://consent.cookiebot.com/00000000-0000-0000-0000-000000000000/cd.js"
type="text/javascript"
async
></script>Replace the zeroes with the serial number (CBID) from the Domain Group to which the domain is added. You can find it on the Your scripts tab in the Manager.
- Click the Save button to save your changes.
Comments
1 comment
Alternatively, you can use the Analyzify Shopify app to set up Cookiebot on your Shopify store. Analyzify provides:
With Analyzify, you can make sure your Shopify store will be GDPR compatible - and you will have your tracking properly working once a user provides the consent.
You can view Analyzify on the Shopify app store to read the client reviews.
Please sign in to leave a comment.