Privacy Controls and Cookie Solution til Shopify: Introduktion til visning af cookiebanner og indhentning af cookiesamtykke

Hvis du befinder dig på denne side, er det formentlig, fordi du har sat din Shopify-butik op og har behov for hjælp til at administrere cookies. Eller fordi du overvejer at oprette en Shopify-butik, men er i tvivl om, hvordan du viser din cookiemeddelelse. Her kan du se, hvordan du gør. 👉

Når du har integreret privatlivspolitikken på din Shopify-hjemmeside (som omfatter en cookiepolitik, hvis du har aktiveret den), kan du fuldføre konfigurationen ved at indlejre vores Privacy Controls and Cookie Solution, som gør det muligt at:

• Vise et fuldt tilpasset cookiebanner
• Indhente cookiesamtykke
• Måle konverteringer og analyser for brugere, der ikke har givet deres samtykke takket være fuld support til Google Consent Mode
• Implementere forebyggende blokering i overensstemmelse med cookielovgivningen

👉 I denne vejledning lærer du, hvordan du integrerer vores Privacy Controls and Cookie Solution i din Shopify-butik. (På få minutter!)

Sådan tilføjer du et cookiebanner til din Shopify-butik

I metoden nedenfor anvendes Shopifys Customer Privacy API (som automatisk blokerer cookies og trackere, som enten er installeret direkte af ​​Shopify eller med understøttende plugins).

1. Generér din cookiepolitik (hvis du ikke allerede har gjort det)

1. Start med at gå til dit iubenda-dashboard og klikke på [Din hjemmeside] > Privatlivs- og cookiepolitik > Rediger. Du vil se et felt med en cookiepolitik i højre kolonne.

2. Klik på Aktivér cookiepolitik og Gem ændringer: Din cookiepolitik vil blive genereret automatisk baseret på konfigurationen af ​​din privatlivspolitik.

2. Generér dit cookiebanner

1. Klik på Generér nu under Dashboard > [Din hjemmeside/app] > Privacy Controls and Cookie Solution.

2. Dette sender dig direkte videre til konfigurationspanelet til dit cookiebanner.

3. Når du har tilpasset det, som du vil, skal du gemme og kopiere kodestykket til Privacy Controls and Cookie Solution.

4. Du får en kode , der ser nogenlunde sådan ud:

<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": sand,
            "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. Før du indsætter det i dit Shopify-tema, skal du lave nogle tilføjelser (bemærk de to “kode for Shopify”-delemed linjerne onPreferenceFirstExpressedCallback, _iub.csConfiguration.callback og Tracking API):

<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": sand,
            "customizeButtonDisplay": true,
            "rejectButtonDisplay": true,
            "position": "float-top-center"
        }
    };

    <!-- kode til Shopify (1 af 2) -->
    var onPreferenceFirstExpressedCallback = function(consent) {
        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 => {
            hvis (consent.purposes && typeof consent.purposes[item] === 'boolean') {
              purposeExpressed = consent.purposes[item];
            }

            hvis (consent.uspr && typeof consent.uspr[item] === 'boolean' && purposeExpressed !== false) {
              purposeExpressed = consent.uspr[item];
            }
          })
 
          hvis (typeof purposeExpressed === 'boolean') {
            expressedConsent[purposeItem] = purposeExpressed;
          }
        })

        window.Shopify.customerPrivacy.setTrackingConsent(expressedConsent, function() {});
    }
    hvis (typeof _iub.csConfiguration.callback === 'object') {
        _iub.csConfiguration.callback.onPreferenceFirstExpressed = onPreferenceFirstExpressedCallback;
    } eller {
        _iub.csConfiguration.callback = {
            onPreferenceFirstExpressed: onPreferenceFirstExpressedCallback
        };
    }
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

    <!-- kode til Shopify (2 af 2) - Tracking API -->
<script type="text/javascript">
window.Shopify.loadFeatures(
  [
    {
      navn: 'consent-tracking-api',
      version: '0.1',
    },
  ],
  function(error) {
    hvis (error) {
      udløs fejl;
    }
  }
);
</script>

3. Tilføj kodestykket til Privacy Controls and Cookie Solution til din Shopify-butik

Du har nu to muligheder:

• Du kan bruge en plugin til at tilføje en brugerdefineret kode til dine sider, eller du kan
• redigere dit Shopify-tema manuelt.

Rediger dit tema manuelt

1. Gå til din Shopify-butiks administrationspanel, og gå derefter til Onlinebutik > Temaer. Her skal du klikke på Handlinger i højre side og derefter Rediger kode.

2. Opret et nyt kodestykket i mappen Kodestykker, og navngiv den iub-cookie-banner.liquid

3. Indsæt kodestykket til Privacy Controls and Cookie Solution (komplet med de to “kode til Shopify”-dele) i iub-cookie-banner.liquid--skabelonen, og gem.

4. Åbn layoutet theme.liquid (inde i Layout-mappen), og tilføj {% include 'iub-cookie-banner' %} mellem {{ content_for_header }} og </ head>-tagget.

5. Gentag trin 4 for layoutene gift_card.liquid og password.liquid.

4. Konfiguration af forebyggende blokering af cookiescripts

Kun få kategorier af cookies er undtaget fra kravet om samtykke. Derfor skal du blokere scripts, til du har indhentet gyldigt samtykke fra dine brugere.

Sådan implementerer du forebyggende blokering i din Shopify-butik med manuel tagging

Manuel tagging er den fremgangsmåde, vi bruger til forebyggende blokering i træningsvideoen nedenfor. Du kan se andre fremgangsmåder her.

I denne træningsvideo viser vi, hvordan du blokerer en pin-knap på Pinterest.

💡 Er du i tvivl om, hvilke tjenester du skal blokere? Hvis du bruger en cookiepolitik genereret af iubenda, er det højst sandsynligt de tjenester, der er nævnt i din cookiepolitik, som du skal ændre nu.

Trin 1: Identificer scriptet

Klik på Onlinebutik i din Shopify- administrator, og klik derefter på Temaer. Klik på Rediger kode i rullemenuen med tema

Åbn derefter mappen med kodestykker for at finde det script, du vil ændre (du skal blot søge efter den tjeneste, du vil blokere, i dette tilfælde Pinterest-pin-knappen) Dette kan du gøre via søgelinjen øverst til venstre på siden

Trin 2: Rediger dit script

Nu skal vi ændre scriptet. For at gøre det laver vi tre simple ændringer:

• tilføj denne klasse: _iub_cs_activate til scripttags, og ændr “type”-attributten fra tekst/javascript → tekst/almindelig
• erstat SRC’en med data-suppressedsrc eller suppressedsrc
• angiv kategorierne for scripts/iframes med en speciel kommasepareret data-iub-purposes- attribut, fx data-iub-purposes="2" eller data-iub-purposes="2, 3"

Mere om kategorier og formål

Formål er de juridiske årsager, der ligger til grund for din behandling af denne specifikke type brugerdata. Forskellige scripts på din hjemmeside vil falde inden for forskellige kategorier og tjene forskellige formål. Google Analytics kan for eksempel bruges til Måling, mens Pinterest-knappen kan bruges til Oplevelse (formål 3 nedenfor). Formål er grupperet i fem kategorier med eget id (1, 2, 3, 4 og 5):

• Nødvendigt (id: 1)
• Funktionalitet (id: 2)
• Oplevelse (id: 3)
• Måling (id: 4)
• Markedsføring (id: 5)

Du kan finde flere oplysninger om kategorier og formål i vores vejledning her.

Lad os bruge Pinterest-pin-knappen som eksempel:

Vi skal 1. Tilføje klassen og ændre “type”-attributten, 2. erstatte SRC’en og 3. angive kategorierne.

Og kodestrukturen skal se sådan ud:

<p>Pinterest-pin:</p>

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

Se også

• Sådan integrerer du iubendas privatlivspolitik på Shopify
• Sådan tilpasser du ​​iubenda-cookiebannerets udseende og adfærd (begyndervejledning)
• Introduktion til forebyggende blokering af cookies