Zum Inhalt

Shopify

Shopify ist ein Baukasten mit stetig wachsender Beliebtheit zum schnellen und einfachen Einrichten Ihres Webshops. Genauso einfach wie die Erstellung des Shops ist auch die Einbindung unseres Code-Schnipsels in Shopify.

CCM19 in Shopify einbinden

1. Code-Schnipsel dem Dashboard entnehmen

Rufen Sie das Dashboard Ihrer Domain in CCM19 auf. Dort finden Sie Code-Schnipsel, um CCM19 in Ihre Seiten einzubinden. Kopieren Sie den Code in Ihre Zwischenablage, um ihn im nächsten Schritt in Shopify einzufügen.

2. Shopify-Backend

Loggen Sie sich in das Backend Ihres Shops ein. Navigieren Sie in die Theme-Einstellungen ① und bearbeiten Sie Ihr aktuelles Theme ②.

f534cc4d-3eb8-4af4-9b39-545e4246ecfa.png

Öffnen Sie anschließend die Einstellungen mithilfe der drei Punkte im oberen linken Bereich ① und klicken Sie auf "Edit code" ②.

3ee52b73-4947-46d8-a2c1-ebcb6c61b207.png

Hier sehen Sie die Dateien, aus denen Ihr Shop besteht. Unter Layout befindet sich die Datei theme.liquid, die Sie nun editieren müssen ① & ②. Fügen Sie den Code-Schnipsel von CCM19, das Sie im ersten Schritt kopiert haben, nach dem Element ein, so wie hier im Bild zu sehen ③.

5bd83878-93c9-401d-9a56-de13a8266730.png

3. Testen

Testen Sie im Frontend Ihrer Seite, ob das Widget nun erscheint. Denken Sie daran, das Widget vor der ersten Verwendung zu aktivieren. (Menüpunkt: Frontend-Verhalten)

Customer Privacy API

Shopify bietet die Möglichkeit, Zustimmung zur Datenerhebung seitens des Besuchers zu signalisieren. Hierzu stellt Shopify die Customer Privacy API bereit, über die die Zustimmung des Webseitenbesuchers, oder eben auch das Ausbleiben dieser, mitgeteilt werden kann.

Im folgenden Beispiel gehen wir davon aus, dass eine Einbindung "Shopify Pixel" in Ihrer CCM19-Konfiguration existiert, die die Zustimmung steuern wird.

Die grundsätzliche Verwendung der API ist im folgenden Code-Block implementiert. Fügen Sie das Skript in einer technisch notwendigen Einbindung (beispielsweise die Einbindung von CCM19 selbst, die immer vorhanden ist und ausgeführt wird) unter "Einbindungen & Cookies" im Feld "Quellcode der Einbindung" ein:

<script defer>
    (function () {
        var intervals = {};
        var shopifyFeaturesLoaded = false;

        function updateShopifyCustomerPrivacy() {
            if (typeof window.Shopify == 'object'
                && typeof window.Shopify.loadFeatures == 'function'
                && !shopifyFeaturesLoaded
            ) {
                window.Shopify.loadFeatures([{
                    name: 'consent-tracking-api',
                    version: '0.1',
                }],
                function(error) {
                    if (error) {
                       throw error;
                    }
                });

                shopifyFeaturesLoaded = true;
            }

            if (typeof window.Shopify == 'object'
                && typeof window.Shopify.customerPrivacy == 'object'
                && typeof window.Shopify.customerPrivacy.setTrackingConsent == 'function'
            ) {
                var accepted = CCM.acceptedEmbeddings.reduce(function (c,i) {
                    return c || i.name == 'Shopify Pixel';
                }, false);

                window.Shopify.customerPrivacy.setTrackingConsent(accepted, function () {
                    console.log('setTrackingConsent', accepted);
                });

                window.clearInterval(intervals.shopifyCustomerPrivacy);
                intervals.shopifyCustomerPrivacy = null;
            }
        }

        function updateThirdPartyConsentState() {
            if (!intervals.shopifyCustomerPrivacy) {
                intervals.shopifyCustomerPrivacy = window.setInterval(updateShopifyCustomerPrivacy, 200);
            }
        }

        window.addEventListener('ccm19WidgetClosed', updateThirdPartyConsentState);
        updateThirdPartyConsentState();
    })();
</script>

Wichtig ist hierbei, dass der Name der Variable in i.name == 'Shopify Pixel' immer mit dem Namen der entsprechenden Shopify-Einbindung in CCM19 übereinstimmt. Sollte der Name Ihrer Einbindung abweichen, müssten Sie die Zeichenkette Shopify Pixel durch den tatsächlichen Namen ersetzen.