Privacy Controls and Cookie Solution für Shopify: Cookie-Banner anzeigen und Cookie-Zustimmung einholen

1. Rufen Sie die Verwaltungseinstellungen Ihres Shopify-Shops auf und gehen Sie zu Online-Shop > Themes. Klicken Sie dort auf der rechten Seite auf Aktionen und anschließend auf Code bearbeiten.

2. Erstellen Sie ein neues Snippet im Ordner Snippets und nennen Sie es iub-cookie-banner.liquid

3. Deaktivieren Sie die Fernkonfiguration: Stellen Sie in Ihren Einstellungen für Datenschutz und Cookie-Lösung sicher, dass Sie die Option „Fernkonfiguration aktivieren“ deaktivieren.

4. Nachdem Sie die Fernkonfiguration deaktiviert haben, kopieren Sie das aktualisierte Snippet. Es wird ähnlich aussehen wie dieses:

<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. Bevor Sie das Snippet in Ihr Shopify-Theme einfügen, müssen Sie Ihr Privacy Controls and Cookie Solution-Skript ändern, um einige notwendige Shopify-spezifische Rückrufe hinzuzufügen, die sicherstellen, dass Ihre Datenschutzkontrollen korrekt funktionieren (beachten Sie die beiden „Code for Shopify“-Teile, mit dem onPreferenceExpressedOrNotNeededCallback, _iub.csConfiguration.callback und Tracking-API-Zeilen):

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

6. Fügen Sie das Privacy Controls and Cookie Solution-Snippet (komplett mit den beiden „Code for Shopify“-Teilen) in die Vorlage iub-cookie-banner.liquid ein und speichern Sie sie.

7. Öffnen Sie das Layout theme.liquid (im Ordner Layout ) und fügen Sie {% include 'iub-cookie-banner' %} zwischen {{ content_for_header }} und </head> ein.

8. Wiederholen Sie Schritt #7 für die Layouts gift_card.liquid und password.liquid.