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.

4. Je krijgt dan een code die hierop lijkt:

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

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 = {
        "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>

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

Nu heb je twee alternatieven:

• een plug-in gebruiken om aangepaste code aan je pagina’s toe te voegen, of
• je Shopify-thema handmatig bewerken.

Je thema handmatig bewerken

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.

4. 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-bewaarknop:</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>

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