So integrierst du ein headless Magento 2-Setup

Übersicht

Erfahre, wie du Klaviyo in ein Headless-Magento-2-Setup integrierst. Wenn du Magento 2 nutzt, um das Backend deines E-Commerce-Shops zu betreiben, aber ein anderes Framework für das Frontend (wie React.js, Angular usw.) verwendest, sind die folgenden Informationen für dich relevant.

Für diese Integration sind 3 Schritte erforderlich:

1. Verbinde deinen Magento-2-Store über Klaviyo native Integration, um Bestell-, Katalog- und Abonnentendaten zu synchronisieren.
2. Füge manuell Code-Fragmente zu deiner Website hinzu, um die Onsite-Tracking-Funktionalität zu aktivieren.
3. (Wenn du eine benutzerdefinierte URL-Struktur für deinen Produktkatalog verwendest) Füge Rewrite-Regeln für Produkt-URLS hinzu.

Klaviyo native Integrationen verbinden

Verbinde zuerst deinen Magento-2-Shop über Klaviyo-Integration, um Bestell-, Katalog- und Abonnent*innendaten zu synchronisieren, indem du die Schritte in Erste Schritte mit Magento 2 befolgst.

Ein großer Teil von Klaviyo’s Magento-2-Integration basiert darauf, Daten über Magentos serverseitige API abzurufen. Normalerweise wird dies durch die Verwendung eines entkoppelten Frontends nicht beeinträchtigt, und die native Integration erfasst die folgenden Ereignisse ohne weitere Einrichtung:

• Bestellung aufgegeben
• Bestellung erfüllt
• Sendung erfüllt
• Bestellung storniert
• Bestellung erstattet
• Bezahlvorgang gestartet

Beachte außerdem Folgendes:

• Checkout gestartet -Events werden synchronisiert, sofern du weiterhin Angebote erstellst und ihnen beim Checkout eine E-Mail-Adresse zuweist.
• Wenn das Synchronisieren von Kund*innen, die die Magento-2-Newsletter-Tabelle abonniert haben, aktiviert wurde, sollte die Synchronisierung wie erwartet funktionieren.

Code-Fragmente manuell hinzufügen

Wenn du ein Headless-Setup verwendest, musst du Klaviyos „Active on Site“-JavaScript (auch bekannt als Klaviyo.js) manuell zu deiner Website hinzufügen. Klaviyo.js erfasst, wann Nutzer*innen auf deiner Website aktiv sind, und ermöglicht Klaviyo-Formulare.

Außerdem stellen wir Snippets bereit, mit denen du Folgendes tun kannst:

• Tracking von „Produkt angesehen“
  Verfolge, wann eine Person bestimmte Produkte auf deiner Website ansieht (was in einem Browse Abandonment Flow genutzt werden kann).
• Tracking von kürzlich angesehenen Artikeln
  Verfolge kürzlich angesehene Artikel im Profil der Nutzer*innen.
• Tracking „Zum Warenkorb hinzugefügt“
  Verfolge, wenn eine Person einen Artikel zu ihrem Warenkorb hinzufügt.
• Tracking von angemeldeten Nutzer*innen
  Wenn du eine Funktion zur Kontoerstellung hast, tracke, wann sich Nutzer*innen anmelden.

Auf Seite aktiv

Füge das folgende Klaviyo.js-Snippet hinzu, damit es auf jeder Seite deiner Website angezeigt wird. Dadurch werden Aktiv auf der Website -Tracking und Klaviyo-Formulare aktiviert. Stelle sicher, dass du PUBLIC_API_KEY durch deinen öffentlichen API-Schlüssel von Klaviyo ersetzt.

<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 (wie Angesehenes Produkt, In den Warenkorb gelegt usw.) hinzufügen möchtest. Das Klaviyo -Objekt muss nur einmal pro Seite geladen werden.

Um das klaviyo -Objekt zu laden, installiere das folgende Snippet manuell auf den erforderlichen 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>

Produkt aufgerufen

Wenn du einen Browse Abandonment-Flow einrichten oder Segmente basierend auf der Produkt-Surfaktivität erstellen möchtest, musst du das JavaScript-Event-Tracking für die Metrik Viewed Product hinzufügen. Alle Viewed Product -Metriken sind mit Profilen von Nutzer*innen verknüpft. Füge in deiner Produktseitenvorlage das folgende Snippet hinzu.

<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("Viewed Product", item);
 </script>

Achte darauf, die Werte der JSON-Eigenschaften im Snippet zu aktualisieren, damit sie dynamisch aus den relevanten Informationen für diese Eigenschaft gezogen werden.

Kürzlich angesehene Artikel

Zusätzlich gibt es ein weiteres Snippet, mit dem Einträge zu einem visuellen Feed „Zuletzt angesehene Artikel“ im Profil der Nutzer*innen hinzugefügt werden können. Das folgende Snippet kann direkt unter dem Snippet Angesehenes Produkt hinzugefügt werden.

Stell sicher, dass du item.___ im Snippet durch das item-Objekt ersetzt, das deine Plattform für Produkteigenschaften verwendet.

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

Zum Warenkorb hinzugefügt

Wenn du Besucher*innen, die Artikel in ihren Warenkorb legen, aber nicht bis zur Checkout-Seite gelangen, Warenkorbabbruch-E-Mails senden möchtest, solltest du eine Added to Cart -Metrik tracken. Damit dieses Ereignis getrackt werden kann, muss eine Kund*in identifiziert sein (d. h. per Cookie). Hier ist eine Beispielanfrage, bei der der Warenkorb bereits einen Artikel (Winnie the Pooh) enthielt und gerade ein weiterer Artikel zum Warenkorb hinzugefügt wurde (A Tale of Two Cities):

<script type="text/javascript">
klaviyo.track("Added to Cart", {
     "$value": 29.98,
     "AddedItemProductName": "A Tale of Two Cities",
     "AddedItemProductID": "1112",
     "AddedItemSKU": "TALEOFTWO",
     "AddedItemCategories": ["Fiction", "Classics", "Children"],
     "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",
     "Items": [{
         "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 Kund*innen auf deiner Website Konten erstellen können, solltest du ggf. zusätzlichen Code hinzufügen, um angemeldete Nutzer*innen zu identifizieren und zu tracken. Dieser Code sollte ausgeführt werden, sobald sich die Person angemeldet hat.

Hier ist ein Beispielskript, mit dem du starten kannst:

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

Umschreiberegeln für Produkt-URLs hinzufügen

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

Die Standard-Produkt-URL von Magento 2 folgt der untenstehenden Struktur:

https://[YOUR STORE]/catalog/product/view/id/[PRODUCT ID]

Wenn dein Shop eine URL-Struktur wie diese verwendet:

https://[YOUR STORE]/products/[Product Name]

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

Weitere Ressourcen