Så här integrerar du en headless Magento 2-installation

Du kommer att lära dig

Läs mer om hur du integrerar Klaviyo med en headless Magento 2-konfiguration. Om du använder Magento 2 för att driva backend i din e-handelsbutik, men ett annat ramverk för frontend (till exempel React.js, Angular osv.), är följande information relevant för dig.

Den här integrationen kräver tre steg:

1. Anslut din Magento 2-butik via Klaviyos inbyggda integration för att synkronisera order-, katalog- och prenumerantdata.
2. Lägg manuellt till kodsnippet på din webbplats för att aktivera funktioner för spårning på webbplatsen.
3. (Om du använder en anpassad URL-struktur för din produktkatalog) Lägg till omskrivningsregler för produkt-URL:er.

Anslut Klaviyos inbyggda integration

Anslut först din Magento 2-butik via Klaviyos inbyggda integration för att synka order-, katalog- och prenumerantdata genom att följa stegen i Kom igång med Magento 2.

En stor del av Klaviyos Magento 2-integrationer bygger på att hämta data via Magentos API på serversidan. Vanligtvis påverkas detta inte av att du använder en frikopplad frontend, och den inbyggda integrationen spårar följande händelser utan ytterligare konfiguration:

• Skapade Beställning
• Hanterad Beställning
• Hanterad Leverans
• Avbruten Beställning
• Återbetalad Beställning
• Startade kassaprocessen

Observera dessutom att:

• Händelser av typen Påbörjade kassan synkroniseras, förutsatt att du fortfarande skapar offerter och tilldelar dem en e-postadress när användaren checkar ut.
• Om du har aktiverat synkronisering av kunder som prenumererar på tabellen för Magento 2-nyhetsbrev bör synkroniseringen fungera som förväntat.

Lägg till kodsnippet manuellt

Om du använder en headless-konfiguration måste du manuellt lägga till Klaviyos JavaScript ”Active on Site” (även kallat Klaviyo.js) på din webbplats. Klaviyo.js spårar när användare är aktiva på din webbplats och aktiverar Klaviyo-formulär.

Vi tillhandahåller även kodavsnitt som gör att du kan göra följande:

• Spårning av visade produkter
  Spåra när en användare tittar på specifika produkter på din webbplats (vilket kan användas i ett flöde för övergiven surfning).
• Spårning av nyligen visade artiklar
  Spåra nyligen visade artiklar på en användares profil.
• Spårning av tillagt i kundvagn
  Spåra när en användare lägger till en artikel i sin kundvagn.
• Spårning av inloggad användare
  Om du har funktioner för kontoskapande kan du spåra när en användare loggar in.

Aktiv på Webbplats

Lägg till följande Klaviyo.js-snippet så att det visas på varje sida på webbplatsen. Detta aktiverar spårning för Aktiv på webbplats och Klaviyo-formulär. Se till att ersätta PUBLIC_API_KEY med din offentliga Klaviyo-API-nyckel.

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

När du har lagt till Klaviyo.js måste du läsa in Klaviyo-objektet på alla sidor där du vill lägga till någon av följande kodsnuttar (till exempel Visad produkt, Lagt i kundvagn osv.). Objektet klaviyo behöver bara läsas in en gång per sida.

För att läsa in klaviyo -objektet installerar du följande kodsnutt manuellt på de nödvändiga sidorna:

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

Visad produkt

Om du vill konfigurera ett flöde för övergiven surfning eller skapa segment baserat på produktens surfaktivitet måste du lägga till spårning av JavaScript-händelser för mättalet Viewed Product. Alla mättal för Viewed Product är kopplade till användarprofiler. Lägg till följande kodsnutt i din mall för produktsidan.

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

Se till att uppdatera värdena för JSON-egenskaperna i kodavsnittet så att de hämtas dynamiskt från den relevanta information som behövs för respektive egenskap.

Nyligen visade objekt

Dessutom finns det en annan snippet som gör att poster kan läggas till i ett visuellt flöde för ”Nyligen visade objekt” på användarens profil. Följande kodsnutt kan läggas till direkt under kodsnutten Viewed Product.

Se till att ersätta item.___ i kodsnutten med det item-objekt som din plattform använder för produktegenskaper.

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

Tillagd i Varukorgen

Om du vill skicka e-post om övergiven kundvagn till besökare som lägger till artiklar i sin kundvagn men inte kommer till kassasidan ska du spåra ett Tillagt i Kundvagn -mättal. En kund måste vara identifierad (dvs. ha en cookie) för att spåra den här händelsen. Här är ett exempel på en begäran där kundvagnen redan innehöll en artikel (Winnie the Pooh) och en annan artikel precis lades till i kundvagnen (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>

Inloggade användare

Om kunder kan skapa Konto på din webbplats kanske du vill lägga till ytterligare kod för att identifiera och spåra inloggade användare. Den här koden ska köras en gång när användaren har loggat in.

Här är ett exempelskript för att komma igång:

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

Lägg till omskrivningsregler för produktwebbadresser

Din Magento 2-produktkatalog ska normalt synkroniseras med Klaviyo via våra inbyggda integrationer, men om du använder en anpassad URL-struktur måste du lägga till vissa omskrivningsregler i din kodbas.

Standard-URL:en för Magento 2-produkter följer strukturen nedan:

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

Om din butik använder en URL-struktur som:

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

Sedan behöver du lägga till några omskrivningsregler i din kodbas för att omdirigera de vanliga Magento 2-produktlänkarna till din anpassade URL-struktur

Ytterligare resurser