Privacy Controls and Cookie Solution voor Shopify: een cookiebanner weergeven en toestemming voor cookies verzamelen

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:

• een volledig aanpasbare cookiebanner weer te geven
• toestemming voor cookies te verzamelen
• conversies en analytics te herstellen voor gebruikers die geen toestemming hebben gegeven dankzij volledige ondersteuning voor de Google Consent Mode
• voorafgaande blokkering te implementeren, zoals vereist door de cookiewetgeving

👉 In deze gids lees je hoe je onze Privacy Controls and Cookie Solution kunt integreren in je Shopify-winkel. (In luttele minuten!)

Zo voeg je een cookiebanner toe aan je Shopify-winkel

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. Genereer je cookiebeleid (als je dat nog niet hebt gedaan)

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.

2. Genereer je cookiebanner

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.

3. Voeg het codefragment van de Privacy Controls and Cookie Solution toe aan je Shopify-winkel

Zodra je codefragment van de Privacy Controls and Cookie Solution hebt gekopieerd, ziet het eruit als een van deze voorbeelden:

• (Nieuw) remote configuration snippet:
• (Oud) extended snippet:

<script src="https://embeds.iubenda.com/widgets/[site-code].js"></script>

<script type="text/javascript">
  var _iub = _iub || [];
  _iub.csConfiguration = {
    "countryDetection": true,
    "consentOnContinuedBrowsing": false,
    "perPurposeConsent": true,
    "lang": "en",
    "siteId": 11223344, //gebruik je siteId
    "cookiePolicyId": 55667788, //gebruik je 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>

1. Gebruik de CMP Insert Code-app (gemakkelijkste en snelste Methode!)

Met de CMP Insert Code-app kun je het codefragment van de Privacy Controls and Cookie Solution snel insluiten zonder dat je handmatig callbacks hoeft aan te passen. Deze optie bevat automatisch de benodigde Shopify-specifieke callbacks, waardoor je tijd en moeite bespaart.

Zo doe je dat:

1. Installeer de CMP Insert Code-app (die vind je [hier]).
2. Plak het codefragment van de Privacy Controls and Cookie Solution in het CMP Script-vak.
3. Als je, voordat je het fragment plakt, een bericht ziet met de tekst “Thema app extension not enabled” (app-extensie thema niet ingeschakeld), klik dan op de link en klik vervolgens op Opslaan om de app-extensie van het thema in te schakelen.
4. Dat is alles! Je hoeft het script niet handmatig aan te passen of callbacks toe te voegen.

2. Gebruik een andere app (XO Insert Code)

Als je liever een andere app gebruikt, kun je de app XO Insert Code proberen. Hiermee kun je het codefragment van de Privacy Controls and Cookie Solution toevoegen aan de <head> van je Shopify-winkel. Je moet echter wel de Shopify-specifieke callbacks handmatig toevoegen in stap 3 ⬇️.

Zo doe je dat:

1. Installeer de XO Insert Code-app (die vind je [hier]).
2. Gebruik de app om het codefragment van de Privacy Controls and Cookie Solution in je Shopify-winkel in te voegen.
3. Voordat je het codefragment in je Shopify-thema plakt, moet je het script van je Privacy Controls and Cookie Solution aanpassen om een aantal noodzakelijke callbacks toe te voegen.
   
   Dit bevat de Shopify-specifieke callbacks die ervoor zorgen dat je Privacy Controls correct functioneren.(Let op de twee onderdelen “code for Shopify”, met onPreferenceExpressedOrNotNeededCallback, _iub.csConfiguration.callback en Tracking API lines):

• (Nieuw) remote configuration snippet:
• (Oud) extended snippet:

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {}
 
<!-- 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 src="https://embeds.iubenda.com/widgets/[site-code].js"></script> //use your embedding code

<!-- 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, //gebruik je siteId
        "cookiePolicyId": 55667788, //gebruik je 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>

3. Bewerk je Shopify-thema handmatig

Als je meer controle wilt over de integratie, kun je het codefragment van de Privacy Controls and Cookie Solution handmatig toevoegen aan je Shopify-thema. Deze optie vereist basisvaardigheden op het gebied van codering.

Zo doe je dat:

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.

5. Voorafgaande blokkering van cookiescripts instellen

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.

Zo implementeer je voorafgaande blokkering via handmatig taggen in je Shopify winkel

Handmatig taggen is de methode van voorafgaande blokkering die we zullen gebruiken voor de tutorial hieronder. Je kunt hier andere methoden bekijken.

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.

Stap 1: Identificeer het script

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

Stap 2: Wijzig je script

Nu gaan we het script veranderen. Om dit te doen, brengen we 3 eenvoudige wijzigingen aan:

• voeg deze klasse toe: _iub_cs_activate aan de scripttags en verander het “type” attribuut van text/javascript → text/plain
• vervang de src door data-suppressedsrc of suppressedsrc
• specificeer de categorieën van de scripts/iframes met een speciaal door komma’s gescheiden attribuut data-iub-purposes, bijvoorbeeld data-iub-purposes="2" of data-iub-purposes="2, 3".

Meer over categorieën en doeleinden

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):

• Noodzakelijke (id: 1)
• Functionaliteit (id: 2)
• Ervaring (id: 3)
• Meting (id: 4)
• Marketing (id: 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 "Pin It" Button:</p>

a  <a href="//pinterest.com/pin/create/button/?url={{ shop.url }}{{ product.url }}&amp;media=http:{{ product | img_url: '1024x1024' | split: '?' | first }}&amp;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>

‼ Belangrijke opmerking over de waarschuwing voor “Google & YouTube”-app

Als je onlangs een cookiebanner hebt toegevoegd aan je Shopify-winkel met iubenda – of je hebt deze al geïmplementeerd – dan zie je misschien een rode waarschuwing in de “Google & YouTube“-app die aangeeft dat er geen cookiebanner actief is. Wees gerust, deze waarschuwing is een vals alarm.

De waarschuwing wordt geactiveerd omdat de app verwacht dat de Shopify native cookiebanner actief is. De app herkent geen banners van derden, zoals die van iubenda. Dit betekent echter niet dat je cookiebanner niet goed werkt.

Je cookiebanner van iubenda blijft volledig functioneel en voldoet aan de toestemmingseisen voor cookies. Deze waarschuwing belemmert je niet in het gebruik van Google-services, zoals conversietracking of gepersonaliseerde advertenties.

Je kunt deze waarschuwing gerust negeren. Ter referentie is hier een voorbeeld van hoe die eruit zou kunnen zien:

Zie ook

• Het Privacybeleid van iubenda in Shopify integreren
• De weergave en het gedrag van de cookiebanner aanpassen (voor beginners)
• Inleiding tot het vooraf blokkeren van cookies