Integration & Setup

  1. Home
  2. Integration & Setup
  3. Plugins & Integration
  4. Shopify

Shopify

Die Einbindung in einen Shopify Webshop ist sowohl für den Einsatz von etracker Analytics als auch Signalize sehr einfach und benötigt nur wenige Minuten.

Aktuell ist es nicht möglich, etracker Analytics und Signalize gemeinsam in einem Shopify Webshop einzusetzen.

  1. etracker Analytics in einen Shopify-Shop integrieren.
  2. Signalize Integration in Shopify.

1. etracker Analytics in einen Shopify-Shop integrieren

Mit nur wenigen Klicks bindest du den etracker Code in einen Shopify-Shop ein und profitierst von datenschutzkonformer und einwilligungsfreier Web-Analyse mit top Datenqualität. Die simple Integration dauert nur wenige Minuten und erfordert keine bis wenige technische Vorkenntnisse. Die Installation einer speziellen Erweiterung ist nicht notwendig. Es werden die neuesten nativen Funktionen von Shopify genutzt.

Mittels der im Folgenden beschriebenen Integration via Customer Events ist das hybride Tracking mit Cookie-Aktivierung nach Einwilligung technisch nicht möglich. Das einwilligungsfreie Cookie-lose Tracking funktioniert hingegen einwandfrei. Das hybride Tracking mit etracker Analytics ist nur in der Pro Edition von Shopify möglich, indem der Tracking Code nativ im Header-html (Theme und Checkout) integriert wird.

Highlights

eCommerce Events nativ erfassen: Produkt gesehen, in den Warenkorb gelegt und Kauf mit Artikelname, -kategorie und -preis

Standardmäßig Cookie-los und Einwilligungs-frei: unabhängig geprüft und bestätigt durch das ePrivacy-Siegel

Funktionen

Automatische Erfassung:

  • Alle Seitenaufrufe mit Domain, URL und Seitentitel sowie Zuordnung zu Bereichen anhand der URL-Struktur
  • Alle externen, mailto- und Telefon-Linkaufrufe sowie Downloads als Klick-Events
  • Abspielbare Medien (Videos, Podcasts, Musik) als Events
  • Scroll-Events pro Seite 0-9%, 10-24% usw.
  • Interne Suchen
  • Herkunft: Referrer-Domain und -Pfad, organischer Suchbegriff (sofern übergeben), Klassifizierung des Traffics nach Medium (Direkt, Search, Social Media, Referrer)
  • Geo-Informationen
  • Technik-Angaben: Gerätetyp, Gerätebezeichnung und Hersteller, Betriebssystem und -version, Browser, -version und -sprache

Anleitung

Zur Integration gehe bitte wie folgt vor:

1. Melde dich bei deinem Shopify-Konto an.

2. Öffne die Einstellungen deines Shops und wähle im Menü Customer events aus:

3. Klicke auf Benutzerdefiniertes Pixel hinzufügen, vergebe einen beliebigen Namen wie z.B. “etracker connector” und bestätige mit Klick auf Pixel hinzufügen.

4. Füge nun folgenden Code ein:

// -- etracker custom pixel code --

// General etracker Code
(function(y,o,d,a){
    s=d.createElement('script');s.async=1;s.type='text/javascript';s.charset='UTF-8';s.id='_etLoader';
    s.src=o;s[a]('data-respect-dnt', 'true');s[a]('data-secure-code',y);
    s[a]('data-block-cookies', 'true');s[a]('data-plugin-version', 'shopify_ce_1.0.0');
    d.getElementsByTagName('head').item(0).appendChild(s);
})('<INSERT_ACCOUNT_KEY_HERE>','//code.etracker.com/code/e.js',document,'setAttribute');

// etracker eCommerce Events
analytics.subscribe("product_viewed", async (event) => {
    var variant = event.data.productVariant;
    var product = variant.product;

    var productObject = {
        id : product.id,
        name : product.title,
        category : [ product.type ],
        price : variant.price.amount.toString(),
        currency : variant.price.currencyCode,
    };

    window._etrackerOnReady = typeof window._etrackerOnReady === 'object' ? window._etrackerOnReady : [];
    window._etrackerOnReady.push(function() {
        etCommerce.sendEvent('viewProduct', productObject);
    });
});

analytics.subscribe("product_added_to_cart", async (event) => {
    var variant = event.data.cartLine.merchandise;
    var product = variant.product;

    var productObject = {
        id : product.id,
        name : product.title.replace(' - ' + variant.title, ''),
        category : [ product.type ],
        variants: { var1: variant.title },
        price : variant.price.amount.toString(),
        currency : variant.price.currencyCode
    };

    window._etrackerOnReady = typeof window._etrackerOnReady === 'object' ? window._etrackerOnReady : [];
    window._etrackerOnReady.push(function() {
        etCommerce.sendEvent('insertToBasket', productObject, 1);
    });
});

analytics.subscribe("checkout_completed", async (event) => {
    var checkout = event.data.checkout;

    var orderObject = {
        orderNumber: checkout.order.id,
        status: 'sale',
        orderPrice: checkout.totalPrice.amount.toString(),
        currency: checkout.totalPrice.currencyCode,
        basket: {
            id: 'basket' + checkout.order.id,
            products: []
        }
    };

    checkout.lineItems.forEach(item => {
        var variant = item.variant;
        var product = variant.product;

        var productObject = {
            id: product.id,
            name: product.title,
            category: [ product.type ],
            variants: { var1: variant.title },
            price: variant.price.amount.toString(),
            currency: variant.price.currencyCode
        };

        orderObject.basket.products.push({
            product: productObject,
            quantity: item.quantity
        });
    });

    window._etrackerOnReady = typeof window._etrackerOnReady === 'object' ? window._etrackerOnReady : [];
    window._etrackerOnReady.push(function() {
        etCommerce.sendEvent('order', orderObject);
    });
});

5. Ersetze <INSERT_ACCOUNT_KEY_HERE> mit deinem individuellen etracker Account-Schlüssel. Diesen findest du in deinem etracker Account unter Einstellungen > Account > Account-Schlüssel.

6. Klicke oben rechts auf Speichern.

Fertig! In der Übersicht der Customer events findest du nun das eben erstellte benutzerdefinierte Pixel mit dem Status verbunden.

Damit die Customer events von Shopify stets gefeuert und nicht blockiert werden, ist folgende Option in Shopify ebenfalls einzustellen bzw. zu überprüfen:

2. Signalize Integration in Shopify

Um deinen Shopify Kunden Push-Nachrichten zu senden, nutze die Signalize App unter https://apps.shopify.com/signalize.

Folge der Anleitung nach der Installation der App. Es wird automatisch ein Account für dich erstellt und der Code in deinen Shop integriert.

Es ist nicht möglich, die Signalize App für Shopify mit einem bestehenden etracker Analytics oder Signalize Account einzusetzen.