Shopify installation – Cookiebot Support

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: https://help.shopify.com/en/manual/privacy-and-security/privacy/gdpr/comply-with-gdpr

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:

1. In the left-hand menu, go to Themes
2. Click the Customize button
3. Click the ••• button
4. Select Edit code

Enabling the Customer Privacy API

To enable Shopify's Customer Privacy API you need to create a new snippet:

Under the Snippets 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)
      window.Shopify.customerPrivacy.setTrackingConsent({
        "analytics": false,
        "marketing": false,
        "preferences": false,
        "sale_of_data": false,
      }, () => console.log("Awaiting consent")
    );
  }
);

window.addEventListener("CookiebotOnConsentReady", function () {
  const C = Cookiebot.consent,
      existConsentShopify = setInterval(function () {
        if (window.Shopify.customerPrivacy) {
          clearInterval(existConsentShopify);
          window.Shopify.customerPrivacy.setTrackingConsent({
            "analytics": C["statistics"],
            "marketing": C["marketing"],
            "preferences": C["preferences"],
            "sale_of_data": C["marketing"],
          }, () => console.log("Consent captured"))
        }
      }, 100);
});
</script>

Save the snippet by clicking the Save button.

If you intend to add Cookiebot via Google Tag Manager you may skip steps 4 and 5.

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.
If you intend to use Google Tag Manager, we recommend adding the Consent Mode script right above the Cookiebot script.
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):

<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.
Click the Save button to save your changes.

Comments

3 comments

Erman from Analyzify

February 09, 2022 14:29
Alternatively, you can use the Analyzify Shopify app to set up Cookiebot on your Shopify store. Analyzify provides:
- A complete data analytics setup for Shopify merchants
- Cookiebot setup & GDPR integration
- GDPR audit & validation
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.
0
Boubacar

May 18, 2024 13:55

Edited
Great tutorial!
But how to enable "prior consent" on Google analytics when it is implemented with the Shopify app "Google and Youtube"?
0
Hazel James

September 30, 2024 06:20
Implementing Google Consent Mode in Shopify can be a game-changer for ensuring compliance while managing user data effectively. As you navigate the steps, consider how it aligns with your broader digital strategy, especially if you're integrating features like Spotify for Mac into your Shopify store.

By using Cookiebot in conjunction with Shopify’s Customer Privacy API, you can set tracking preferences that respect user consent without compromising on analytics. It’s crucial to configure the script tags correctly to block cookies until consent is given. This not only adheres to privacy regulations but also builds trust with your users.

For those utilizing Spotify for Mac, make sure any related integrations are set up to respect user consent preferences. This ensures a seamless experience for your users while maintaining compliance with data privacy laws. If you have questions about specific integrations or best practices, feel free to share!
0

Please sign in to leave a comment.