Als je hier terecht bent gekomen, heb je waarschijnlijk je Shopify-winkel opgezet en moet je cookies beheren. Of overweeg je een Shopify-winkel op te zetten, maar wil je weten hoe je de cookiemelding kunt weergeven? Laten we eens kijken hoe dat werkt! 👉
Zodra je het Privacybeleid op je Shopify-website hebt geïntegreerd (dat ook het Cookiebeleid omvat als je het hebt geactiveerd) kun je de configuratie voltooien door onze Privacy Controls and Cookie Solution in te sluiten om:
In feite omvat de cookiewetgeving, met uitzondering van vrijgestelde cookies, niet alleen de verplichting om een cookiebeleid op te stellen en aan de gebruiker te tonen, maar ook om een korte kennisgeving (banner) weer te geven bij het eerste bezoek van de gebruiker en om scripts te blokkeren die cookies (kunnen) installeren, totdat de gebruiker toestemming heeft gegeven.
👉 In deze gids lees je hoe je onze Privacy Controls and Cookie Solution kunt integreren in je Shopify-winkel. (In luttele minuten!)
De methode hieronder maakt gebruik van de Customer Privacy API van Shopify (die automatisch cookies en trackers blokkeert die geïnstalleerd zijn door Shopify zelf of door plug-ins die dit ondersteunen).
1. Ga eerst naar je Dashboard van iubenda en klik op [Je website] > Privacy- en cookiebeleid > Bewerken. In de rechterkolom zie je een vak Cookiebeleid.
2. Klik op Cookiebeleid activeren en Wijzigingen opslaan: je Cookiebeleid wordt automatisch gegenereerd op basis van de configuratie van je Privacybeleid.
💡 Als je al een eigen cookiebeleid hebt, kun je de link toevoegen in de geavanceerde weergave van de Privacy Controls and Cookie Solution-configurator. Selecteer Aangepast onder Cookie- en Privacybeleid > URL Cookiebeleid. Meer informatie in de gids over geavanceerd gebruik van de Privacy Controls and Cookie Solution.
1. Klik op Nu genereren onder Dashboard > [Je website/app] > Privacy Controls and Cookie Solution.
2. Dit brengt je direct naar het configuratiescherm van je cookiebanner.
3. Zodra je het codefragment van de Privacy Controls and Cookie Solution naar wens hebt aangepast, sla je deze op en kopieer je deze.
4. Je krijgt dan een code die hierop lijkt:
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"siteId": XXXXXX, // your siteId,
"cookiePolicyId": YYYYYY, // your cookiePolicyId,
"lang": "en"
};
</script>
<script type="text/javascript" src="https://cs.iubenda.com/autoblocking/3095420.js"></script>
<script type="text/javascript" src="///cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"countryDetection": true,
"consentOnContinuedBrowsing": false,
"perPurposeConsent": true,
"lang": "en",
"siteId": 11223344, //use your siteId
"cookiePolicyId": 55667788, //use your cookiePolicyId
"floatingPreferencesButtonDisplay": "bottom-right",
"banner": {
"acceptButtonDisplay": true,
"customizeButtonDisplay": true,
"rejectButtonDisplay": true,
"position": "float-top-center"
}
};
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>5. Voordat je de code in je Shopify-thema plakt, moet je wat toevoegingen doen(let op de twee delen met “code for Shopify”, met de onPreferenceFirstExpressedCallback, _iub.csConfiguration.callback en Tracking API-regels):
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"lang": "en",
"siteId": 11223344, //use your siteId
"cookiePolicyId": 55667788, //use your cookiePolicyId
};
<!-- code for Shopify (1 of 2) -->
var onPreferenceExpressedOrNotNeededCallback = function(prefs) {
var isPrefEmpty = !prefs || Object.keys(prefs).length === 0;
var consent = isPrefEmpty ? _iub.cs.api.getPreferences() : prefs;
var shopifyPurposes = {
"analytics": [4, 's'],
"marketing": [5, 'adv'],
"preferences": [2, 3],
"sale_of_data": ['s', 'sh'],
}
var expressedConsent = {};
Object.keys(shopifyPurposes).forEach(function(purposeItem) {
var purposeExpressed = null
shopifyPurposes[purposeItem].forEach(item => {
if (consent.purposes && typeof consent.purposes[item] === 'boolean') {
purposeExpressed = consent.purposes[item];
}
if (consent.uspr && typeof consent.uspr[item] === 'boolean' && purposeExpressed !== false) {
purposeExpressed = consent.uspr[item];
}
})
if (typeof purposeExpressed === 'boolean') {
expressedConsent[purposeItem] = purposeExpressed;
}
})
window.Shopify.customerPrivacy.setTrackingConsent(expressedConsent, function() {});
}
if (typeof _iub.csConfiguration.callback === 'object') {
_iub.csConfiguration.callback.onPreferenceExpressedOrNotNeeded = onPreferenceExpressedOrNotNeededCallback;
} else {
_iub.csConfiguration.callback = {
onPreferenceExpressedOrNotNeeded: onPreferenceExpressedOrNotNeededCallback
};
}
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
<!-- code for Shopify (2 of 2) - Tracking API -->
<script type="text/javascript">
window.Shopify.loadFeatures(
[
{
name: 'consent-tracking-api',
version: '0.1',
},
],
function(error) {
if (error) {
throw error;
}
}
);
</script>
<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"countryDetection": true,
"consentOnContinuedBrowsing": false,
"perPurposeConsent": true,
"lang": "en",
"siteId": 11223344, //use your siteId
"cookiePolicyId": 55667788, //use your cookiePolicyId
"floatingPreferencesButtonDisplay": "bottom-right",
"banner": {
"acceptButtonDisplay": true,
"customizeButtonDisplay": true,
"rejectButtonDisplay": true,
"position": "float-top-center"
}
};
<!-- code for Shopify (1 of 2) -->
var onPreferenceExpressedOrNotNeededCallback = function(prefs) {
var isPrefEmpty = !prefs || Object.keys(prefs).length === 0;
var consent = isPrefEmpty ? _iub.cs.api.getPreferences() : prefs;
var shopifyPurposes = {
"analytics": [4, 's'],
"marketing": [5, 'adv'],
"preferences": [2, 3],
"sale_of_data": ['s', 'sh'],
}
var expressedConsent = {};
Object.keys(shopifyPurposes).forEach(function(purposeItem) {
var purposeExpressed = null
shopifyPurposes[purposeItem].forEach(item => {
if (consent.purposes && typeof consent.purposes[item] === 'boolean') {
purposeExpressed = consent.purposes[item];
}
if (consent.uspr && typeof consent.uspr[item] === 'boolean' && purposeExpressed !== false) {
purposeExpressed = consent.uspr[item];
}
})
if (typeof purposeExpressed === 'boolean') {
expressedConsent[purposeItem] = purposeExpressed;
}
})
window.Shopify.customerPrivacy.setTrackingConsent(expressedConsent, function() {});
}
if (typeof _iub.csConfiguration.callback === 'object') {
_iub.csConfiguration.callback.onPreferenceExpressedOrNotNeeded = onPreferenceExpressedOrNotNeededCallback;
} else {
_iub.csConfiguration.callback = {
onPreferenceExpressedOrNotNeeded: onPreferenceExpressedOrNotNeededCallback
};
}
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
<!-- code for Shopify (2 of 2) - Tracking API -->
<script type="text/javascript">
window.Shopify.loadFeatures(
[
{
name: 'consent-tracking-api',
version: '0.1',
},
],
function(error) {
if (error) {
throw error;
}
}
);
</script>Nu heb je twee alternatieven:
Gebruik een plug-in zoals deze om het codefragment voor de Privacy Controls and Cookie Solution toe te voegen(compleet met de twee onderdelen “code for Shopify”, zie 2. Genereer je cookiebanner) aan de <head> van je Shopify-winkel.
1. Ga naar het beheerderspaneel van je Shopify-winkel en ga naar Onlinewinkel > Thema’s. Daar klik je rechts op Acties en vervolgens op Code bewerken.
2. Maak een nieuw codefragment in de map Snippets en noem het iub-cookie-banner.liquid
3. Plak het codefragment van de Privacy Controls and Cookie Solution(met de twee delen “code for Shopify”) in het template iub-cookie-banner.liquid en sla het op.
4. Open de lay-out theme.liquid (in de map Layout ) en voeg {% include 'iub-cookie-banner' %} toe tussen {{ content_for_header }} en </head>.
5. Herhaal stap 4 voor de lay-outs gift_card.liquid en password.liquid.
Er zijn maar weinig categorieën cookies die zijn vrijgesteld van het toestemmingsvereiste. Daarom moet je scripts blokkeren totdat je geldige toestemming van de gebruiker hebt.
Handmatig taggen is de methode van voorafgaande blokkering die we zullen gebruiken voor de tutorial hieronder. Je kunt hier andere methoden bekijken.
Om voorafgaande blokkering in te stellen, moet je een paar kleine wijzigingen aanbrengen in de scripts van je site. Maar het is eenvoudig; volg deze stappen:
In deze tutorial gaan we een Pinterest-bewaarknop blokkeren.
Weet je niet zeker welke diensten je moet blokkeren? Als je een Cookiebeleid gebruikt dat door iubenda is gegenereerd, dan zijn de diensten die in je Cookiebeleid staan waarschijnlijk de diensten die je nu moet aanpassen.
Klik in je Shopify beheerspaneel op Online winkel en vervolgens op Thema’s. Klik in het vervolgkeuzemenu van het thema op Code bewerken
Open vervolgens je map Snippets om het script te vinden dat je moet aanpassen (zoek naar de dienst die je wilt blokkeren, in dit geval is dat de bewaarknop van Pinterest) Je kunt dit doen met de zoekbalk in de linkerbovenhoek van de pagina
_iub_cs_activate aan de scripttags en verander het “type” attribuut van text/javascript → text/plaindata-suppressedsrc of suppressedsrcdata-iub-purposes, bijvoorbeeld data-iub-purposes="2" of data-iub-purposes="2, 3".Doeleinden zijn je wettelijke redenen voor het verwerken van het specifieke type gebruikersgegevens. Verschillende scripts op je site vallen in verschillende categorieën en dienen verschillende doeleinden. Google Analytics kan bijvoorbeeld worden gebruikt voor Meting, terwijl de Pinterest-knop kan worden gebruikt voor Ervaring (Doel 3 hieronder). Doeleinden zijn gegroepeerd in 5 categorieën met elk een id (1, 2, 3, 4 en 5):
1)2)3)4)5)Meer gedetailleerde informatie over categorieën en doeleinden, vind je in onze gids hier.
Laten we de Pinterest-bewaarknop als voorbeeld nemen:
Het volgende is nodig 1. 1. Voeg de klasse toe en verander het “type”-attribuut, 2. Vervang het src en 3. Specificeer de categorieën.
En de codestructuur moet er als volgt uitzien:
<p>Pinterest-bewaarknop:</p>
a <a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&description={{ product.title | strip_html | truncate: 200, '' | url_param_escape }}{% for tag in product.tags limit: 3 %}{{ tag | replace: ' ', '-' | prepend: ' #' | url_param_escape }}{% endfor %}" data-pin-do="buttonPin" data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>
<script async type="text/plain" class="_iub_cs_activate" data-suppressedsrc="//assets.pinterest.com/js/pinit.js" data-iub-purposes="3" charset="utf-8"></script>Weet je niet zeker of je het goed hebt ingesteld? Bekijk het live voorbeeld en de veelgestelde vragen hieronder
Dit is een voorbeeld dat alles laat zien wat we hierboven hebben beschreven. Je kunt deze codepen gebruiken als leidraad om te zien wat er gebeurt voor en na het blokkeren van scripts via handmatig taggen.
Om de functie voor het blokkeren van cookies te demonstreren, hebben we een YouTube-video en een Twitter-volgknop ingesloten:
@iubenda volgen
Beide scripts worden geblokkeerd door handmatige tagging. Omdat zowel de YouTube-videowidget als de Twitter-volgknop deel uitmaken van het doel Ervaring (id 3) hebben we data-iub-purposes="3" toegevoegd aan hun scripts zodat de Privacy Controls and Cookie Solution ze goed kunnen identificeren voor vrijgave.
Klik op de knop Accepteren – of activeer de knop “Ervaring” – om deze scripts vrij te geven (ververs de pagina om terug te keren naar het beginpunt).
Zoals je kunt zien in het voorbeeld van de codepen, worden de scripts van Youtube en Twitter niet geladen als je geen toestemming geeft. (Je kunt deze functie opnieuw testen door deze link(https://codepen.io/iubenda/pen/KKKxmVO/?editors=1000) in incognitomodus in je browser te openen)
Nadat je je werk hebt opgeslagen, open je je website in een incognitomodus en controleer je of de scripts die je hebt geblokkeerd via handmatig taggen, geblokkeerd blijven totdat je toestemming geeft.
Raadpleeg dit artikel hierover als je wilt weten hoe je cookies voorafgaand aan toestemming kunt blokkeren met behulp van andere beschikbare opties. Kijk ook eens naar Google Consent Mode als alternatief voor blokkeren vooraf, Google Tag Manager om het blokkeren van cookies te vereenvoudigen of het IAB Transparency & Consent Framework en hoe je dit inschakelt.