Implementing Cookiebot and Enabling Customer Privacy API on Shopify
Learn how to implement the Cookiebot script and enable Shopify's Customer Privacy API to enhance GDPR compliance on your Shopify store. Follow step-by-step instructions to limit data collection for EU buyers, create a new snippet for cookie consent, and insert the Cookiebot script via the code editor. Maintain control over cookies and tracking to respect customer privacy.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Shopify installation Cookiebot support 7 months ago Updated FollowNot yet followed by anyone 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: 1. 1. In the left-hand menu, click on Home.
2. Select the Customize theme tab and click the Customize theme button. 3. 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: 1. Under the Snippet section, click the "Add a new snippet" link. 2. Name the new snippet "cookie-consent" and confirm by clicking the Create snippet button. 3. Open the new cookie-consent.liquid file and add the following content: 4. <script> function feedback() { const p = window.Shopify.customerPrivacy; console.log(`Tracking ${p.userCanBeTracked() ? "en" : "dis"}abled`); } 5. 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.dec lined, feedback); return; } window.Shopify.customerPrivacy.setTrackingConsent(false, feedback); } ); window.addEventListener("CookiebotOnConsentReady", function () { window.Shopify.customerPrivacy.setTrackingConsent(!Cookiebot.dec lined, feedback); }); </script> Save the snippet by clicking the Save button. 6. Open the theme.liquid file 7. Insert the Cookiebot script directly under the <head> tag: 8. <script 9. id="Cookiebot" 10. 11. data-cbid="00000000-0000-0000-0000-000000000000" src="https://consent.cookiebot.com/uc.js"
12. 13. 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. 14. Find this line: {{ content_for_header }} Add this code directly under it: {% render 'cookie-consent' %} 15. 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. type Finally change the script tag 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]||f unction(){ (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.inser tBefore(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]||f unction(){ (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.inse rtBefore(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: 1. Under the SALES CHANNELS section, click Pages on the left-hand side menu of the admin panel. 2. Click the Add page button in the upper right corner. 3. 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. 4. Click on the <> (Show HTML) button to access the source code of the page:
5. 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. 6. Click the Save button to save your changes. .
