Iubenda logo
Generator starten

Anleitungen

INHALTSÜBERSICHT

Cookie Solution für Shopify: Wie Sie einen Cookie-Banner anzeigen und Einwilligungen einholen können

Sobald Sie Ihre Datenschutzerklärung in Ihrer Shopify Website integriert haben (welche auch die Cookie-Richtlinie beinhaltet, falls Sie diese aktiviert haben) können Sie die Konfiguration beenden, indem Sie unsere Cookie Solution einbetten um [1] einen vollständig anpassbaren Cookie-Banner anzuzeigen, [2] die Einwilligungen zu erfassen und [3] eine vorherige Blockierung mit asynchroner Reaktivierung zu implementieren, wie von der EU-Cookie-Richtlinie gefordert.

Außer einige Ausnahmefällen, verlangt die EU-Cookie-Richtlinie, dass nicht nur eine Cookie-Richtlinie erstellt und dem Nutzer angezeigt wird, sondern auch ein kurzer Hinweis (Banner) beim ersten Besuch des Nutzers. Skripte, die Cookies installieren (oder installieren können) müssen vor der Einwilligung präventiv blockiert werden.

In dieser Anleitung lernen Sie, wie Sie unsere Cookie Solution in Ihren Shopify-Shop integrieren können. Da diese Methode Shopify’s Customer Privacy API nutzt (welches automatisch Cookies blockiert und Trackers installiert, entweder direkt von Shopify oder durch Plug-ins, die dieses unterstützen), müssen Sie zuerst das Tracking auf Nutzer in Europa beschränken. Gehen Sie hierfür auf Online Store > Preferences.

Shopify - Limit tracking to customers in Europe

Als erstes, gehen Sie zu Ihrem iubenda Dashboard und klicken Sie auf [Ihre Website] > Datenschutzerklärungen und Cookie-Richtlinien > Bearbeiten. Sie sollten eine Box mit “Cookie-Richtlinie” in der rechten Spalte finden.

Cookie-Richtlinie aktivieren

Klicken Sie auf Cookie-Richtlinie aktivieren und Änderungen speichern: Ihre Cookie-Richtlinie wird automatisch basierend auf den Konfigurationen Ihrer Datenschutzerklärung generiert.

If you already have your own Cookie Policy, you can add the link in the Advanced View of the Cookie Solution configurator. Select Custom under Cookie and Privacy Policy > Cookie Policy URL. More info on the Cookie Solution advanced guide.

Klicken Sie auf Jetzt generieren unter Dashboard > [Ihre Website/App] > Cookie Solution.

Cookie Banner generieren

Das wird Sie direkt auf das Konfigurationsmenü Ihres Cookie-Banners führen.

Cookie Solution - Cookie Banner Konfigurationsmenü

Sobald Sie alles angepasst haben, speichern und kopieren Sie Ihren Cookie Solution-Ausschnitt.

Cookie Solution - Cookie Banner implementieren

Sie erhalten einen ähnlichen Code wie diesen:

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

Bevor Sie diesen in Ihr Shopify Theme einbauen, müssen Sie ein paar zusätzliche Ergänzungen machen (beachten Sie die zwei Abschnitte “code for Shopify”, mit onPreferenceFirstExpressedCallback, _iub.csConfiguration.callback und Tracking API Linien):

<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 onPreferenceFirstExpressedCallback = function(consent) {
        if (true == _iub.csConfiguration.perPurposeConsent) {
            consent.consent = Object.keys(consent.purposes).every(function(k) {
                return consent.purposes[k]
            });
        }
        window.Shopify.customerPrivacy.setTrackingConsent(consent.consent, function() {});
    }

    if (typeof _iub.csConfiguration.callback === 'object') {
        _iub.csConfiguration.callback.onPreferenceFirstExpressed = onPreferenceFirstExpressedCallback;
    } else {
        _iub.csConfiguration.callback = {
            onPreferenceFirstExpressed: onPreferenceFirstExpressedCallback
        };
    }
</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. Fügen Sie den Cookie Solution-Ausschnitt zu Ihrem Shopify Store hinzu

Jetzt haben Sie zwei Möglichkeiten:

Nutzen Sie ein Plug-in

Nutzen Sie ein Plug-in wie dieses, um Ihren Cookie Solution-Ausschnitt (mit den zwei “code for Shopify”-Abschnitten) im <head> Ihres Shopify Stores hinzuzufügen, wie hier 2. Generieren Sie Ihren Cookie Banner.

1. Loggen Sie sich in Ihr Shopify Store Admin Panel und klicken Sie auf Online Store > Themes. Klicken Sie dann auf Actions rechts, und dann Edit Code.

Shopify - Edit code

2. Kreieren Sie einen neuen Abschnitt im Snippets Ordner und nennen Sie ihn: iub-cookie-banner.liquid

Shopify - Add a new snippet

3. Fügen Sie Ihren Cookie Solution Abschnitt (mit den zwei “code for Shopify” Abschnitten) in die iub-cookie-banner.liquid Vorlage und speichern Sie.

Shopify - Cookie Solution snippet

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

Shopify - theme.liquid

5. Wiederholen Sie Schritt #4 für gift_card.liquid und password.liquid Layouts.

Nur wenige Kategorien von Cookies sind von der Einwilligungspflicht ausgenommen. Deswegen müssen alle Skripte, die Sie in Ihren Seiten eingefügt haben und Cookies installieren, präventiv blockiert werden, bevor eine Einwilligung eingeholt wird.

Um die vorherige Blockierung von Cookies einzurichten, die nicht von Shopify installiert werden, (oder installierte Plug-ins, die nicht den Customer Privacy API nutzen), schauen Sie sich am besten unsere Anleitung zur Blockierung durch manuelles Tagging oder nutzen Sie andere Methoden, die in unserer Einführung in die vorherige Blockierung von Skripten aufgeführt sind.

Cookie Einwilligungen für Ihren Shopify Store verwalten

Erstellen Sie einen Cookie-Banner

Siehe auch