Implementing Cookiebot and Enabling Customer Privacy API on Shopify

 
Shopify
 
installation
 
 
 
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:
 
compliance. GDPR andcustomersEuropean  Tracking
 
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.
 
src="https://consent.cookiebot.com/uc.js"
data-cbid="00000000-0000-0000-0000-000000000000"
 
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.
 
.
Slide Note
Embed
Share

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.


Uploaded on Jul 17, 2024 | 1 Views


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


  1. 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.

  2. 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.

  3. 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( [ {

  4. 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"

  5. 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:

  6. <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:

  7. 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. .

More Related Content

giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#