Wie integriere ich ein Magento 2 Setup ohne Kopfhörer?

Du wirst lernen

Erfahre, wie du Klaviyo in ein Headless Magento 2 Setup integrieren kannst. Wenn du Magento 2 für das Backend deines E-Commerce-Shops verwendest, aber ein anderes Framework für das Frontend (wie React.js, Angular etc.), dann sind die folgenden Informationen für dich relevant.

Diese Integration erfordert 3 Schritte:

1. Verbinde deinen Magento 2 Laden über die native Integration von Klaviyo, um Bestell-, Katalog- und Abonnentendaten zu synchronisieren.
2. Füge manuell ein Code-Fragment zu deiner Website hinzu, um die Onsite-Tracking-Funktion zu aktivieren.
3. (Wenn du eine eigene URL-Struktur für deinen Produktkatalog verwendest) Füge Rewrite-Regeln für Produkt-URLs hinzu.

Verbinde die native Integration von Klaviyo

Verbinde zunächst deinen Magento 2 Laden über die native Integration von Klaviyo, um Bestell-, Katalog- und Abonnentendaten zu synchronisieren. Befolge dazu die Schritte unter Erste Schritte mit Magento 2.

Ein großer Teil der Magento 2-Integration von Klaviyo basiert auf dem Abrufen von Daten über die serverseitige API von Magento. Normalerweise wird dies durch die Verwendung eines entkoppelten Frontends nicht beeinträchtigt, und die native Integration wird die folgenden Ereignisse ohne weitere Einstellungen verfolgen:

• Bestellung aufgegeben
• Erfüllte Bestellung
• Erfüllte Sendung
• Stornierte Bestellung
• Erstattete Bestellung
• Begonnener Bezahlvorgang

Bitte beachte außerdem, dass:

• Gestartete Bezahlvorgänge werden synchronisiert, sofern du noch Angebote erstellst und ihnen eine E-Mail-Adresse zuordnest, wenn der Nutzer auscheckt.
• Wenn du die Synchronisierung von Kunde mit der Magento 2 Newsletter-Tabelle aktiviert hast, sollte die Synchronisierung wie erwartet funktionieren.

Code-Fragment manuell hinzufügen

Wenn du ein Headless-Setup verwendest, musst du das "Active on Site"-JavaScript von Klaviyo (auch bekannt als Klaviyo.js) manuell zu deiner Website hinzufügen. Klaviyo.js verfolgt, wann Nutzerinnen und Nutzer auf deiner Seite aktiv sind und aktiviert Klaviyo-Formulare. 

Wir stellen auch Snippets zur Verfügung, mit denen du Folgendes tun kannst:

• Verfolgung der angesehenen Produkte
  Verfolge, wann ein Nutzer bestimmte Produkte auf deiner Website ansieht (was in einem Browse-Abandonment-Flow genutzt werden kann).
• Kürzlich gesehene Artikel verfolgen
  Verfolge die zuletzt angesehenen Artikel im Profil eines Nutzers.
• In den Warenkorb legen
  Verfolge, wann ein Nutzer einen Artikel in seinen Warenkorb legt.
• Angemeldete Benutzer verfolgen
  Wenn du eine Funktion zur Erstellung eines Kontos hast, kannst du verfolgen, wann sich ein Nutzer anmeldet.

Aktiv vor Ort 

Füge den folgenden Klaviyo.js-Snippet hinzu, damit er auf jeder Seite deiner Website erscheint. Dadurch werden Active on Site Tracking und Klaviyo-Formulare aktiviert. Ersetze PUBLIC_API_KEY durch deinen öffentlichen API-Schlüssel von Klaviyo.

<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

Nachdem du Klaviyo.js hinzugefügt hast, musst du das Klaviyo-Objekt auf jeder Seite laden, auf der du eines der folgenden Snippets hinzufügen möchtest (z. B. " Produkt angesehen", " In den Warenkorb gelegt" usw.). Das Objekt Klaviyo muss nur einmal pro Seite geladen werden.

Um das Klaviyo-Objekt zu laden, installiere das folgende Snippet manuell auf den benötigten Seiten:

<script type="text/javascript"> !function(){if(!window.Klaviyo){window._klOnsite=window._klOnsite||[];try{window.Klaviyo=new Proxy({},{get:function(n,i){return"Push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.Push([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){window.Klaviyo=window.Klaviyo[],window.Klaviyo.Push=function(){var n;(n=window._klOnsite).Push.apply(n,arguments)}}}}(); </script>

Gesehenes Produkt 

Wenn du einen Browse-Abandonment-Flow einrichten oder ein Segment auf der Basis von Produkt-Browsing-Aktivitäten erstellen möchtest, musst du JavaScript-Event-Tracking für die Viewed Product Metrik hinzufügen. Alle angezeigten Produktmetriken sind an das Benutzerprofil gebunden. Füge das folgende Snippet in die Vorlage deiner Produktseite ein.

<script type="text/javascript">
var Klaviyo = window.Klaviyo || [];
var item = {
     "ProductName": item.ProductName,
     "ProductID": item.ProductID,
     "SKU": item.SKU,
     "Categories": item.Categories,
     "ImageURL": item.ImageURL,
     "URL": item.URL,
     "Brand": item.Brand,
     "Price": item.Price,
     "CompareAtPrice": item.CompareAtPrice
 };
 Klaviyo.track("Gesehen Produkt", Artikel);
 </script>

Achte darauf, dass du die Werte der JSON-Eigenschaften im Snippet aktualisierst, damit sie dynamisch die für die jeweilige Eigenschaft benötigten Informationen abrufen.

Zuletzt angesehene Artikel

Außerdem gibt es ein weiteres Snippet, mit dem Einträge zu einem visuellen Feed "Kürzlich angesehene Artikel" im Profil des Nutzers hinzugefügt werden können. Das folgende Snippet kann direkt unter dem Snippet "Viewed Product" eingefügt werden. 

Ersetze item.___ in dem Snippet durch das Item-Objekt, das deine Plattform für Produkteigenschaften verwendet.

<script type="text/javascript">
var Klaviyo = window.Klaviyo || [];
Klaviyo.trackViewedItem({
     "Titel": item.ProductName,
    "ItemId": item.ProductID,
    "Kategorien": item.Categories,
    "ImageUrl": item.ImageURL,
    "Url": item.URL,
    "Metadaten": {
       "Brand": item.Brand,
       "Price": item.Price,
       "CompareAtPrice": item.CompareAtPrice
     }
   });
 </script>

Zum Warenkorb hinzugefügt

Wenn du Warenkorbabbruch-E-Mails an Besucher senden möchtest, die Artikel in den Warenkorb legen, es aber nicht bis zur Bezahlvorgang-Seite schaffen, solltest du eine Added to Cart Metrik verfolgen. Um dieses Ereignis zu verfolgen, muss ein Kunde identifiziert (d.h. gekocht) werden. Hier ist eine Beispielanfrage, bei der der Warenkorb bereits einen Artikel enthielt (Winnie the Pooh) und ein weiterer Artikel gerade hinzugefügt wurde (A Tale of Two Cities): 

<script type="text/javascript">
Klaviyo.track("In den Warenkorb", {
    "$value": 29.98,
    "AddedItemProductName": "Eine Geschichte aus zwei Städten",
    "AddedItemProductID": "1112",
    "AddedItemSKU": "TALEOFTWO",
    "AddedItemCategories": ["Belletristik", "Klassiker", "Kinder"],
    "AddedItemImageURL": "http://www.example.com/path/to/product/image2.png",
     "AddedItemURL": "http://www.example.com/path/to/product2",
     "AddedItemPrice": 19.99,
    "AddedItemQuantity": 1,
    "ItemNames": ["Winnie the Pooh", "A Tale of Two Cities"],
    "CheckoutURL": "http://www.example.com/path/to/checkout",
     "Artikel": [{
         "ProductID": "1111",
         "SKU": "WINNIEPOOH",
         "ProductName": "Winnie the Pooh",
         "Quantity": 1,
         "ItemPrice": 9.99,
         "RowTotal": 9.99,
         "ProductURL": "http://www.example.com/path/to/product",
         "ImageURL": "http://www.example.com/path/to/product/image.png",
         "ProductCategories": ["Fiction", "Children"]
       },
       {
         "ProductID": "1112",
         "SKU": "TALEOFTWO",
         "ProductName": "A Tale of Two Cities",
         "Quantity": 1,
         "ItemPrice": 19.99,
         "RowTotal": 19.99,
         "ProductURL": "http://www.example.com/path/to/product2",
         "ImageURL": "http://www.example.com/path/to/product/image2.png",
         "ProductCategories": ["Fiction", "Classics"]
       }
     ]
   });
 </script>

Angemeldete Benutzer

Wenn Kunde auf deiner Website Konten anlegen kann, möchtest du vielleicht zusätzlichen Code hinzufügen, um eingeloggte Nutzer zu identifizieren und zu verfolgen. Dieser Code sollte ausgeführt werden, sobald sich der Nutzer eingeloggt hat.

Hier ist ein Beispielskript, das dir den Einstieg erleichtert:

Klaviyo.identify({
  "$email" : customer.email,
  "$first_name" : customer.first_name,
  "$last_name" : customer.last_name
});

Rewrite-Regeln für Produkt-URLs hinzufügen

Dein Magento 2 Produktkatalog sollte über unsere native Integration normal mit Klaviyo synchronisiert werden. Wenn du jedoch eine benutzerdefinierte URL-Struktur verwendest, musst du einige Rewrite-Regeln in deine Codebasis einfügen.

Die Standard-URL für Magento 2-Produkte hat die folgende Struktur:

https://[DEIN Laden]/catalog/product/view/id/[PRODUCT ID]

Wenn dein Laden eine URL-Struktur verwendet wie:

https://[YOUR Laden]/products/[Produktname]

Dann musst du einige Rewrite-Regeln zu deiner Codebasis hinzufügen, um die Standard Magento 2 Produktlinks auf deine benutzerdefinierte URL-Struktur umzuleiten

Zusätzliche Ressourcen

• Erste Schritte mit Magento 2.x (CE und EE)
• Anforderungen an das Magento-Integrationssystem
• Magento 2 Daten Referenz