Hur man integrerar en huvudlös Magento 2-installation

Du kommer att lära dig

Lär dig mer om hur du integrerar Klaviyo med en huvudlös Magento 2-installation. Om du använder Magento 2 för att driva din e-handelsbutiks backend, men ett annat ramverk för frontend (t.ex. React.js, Angular, etc.), då är följande information relevant för dig.

Denna integration kräver 3 steg:

1. Anslut din Magento 2-butik via Klaviyo:s inbyggda integrationsprogram för att synkronisera order, katalog och prenumeranterdata.
2. Lägg till kodsnippet manuellt på din webbplats för att aktivera spårningsfunktionalitet på plats.
3. (Om du använder en anpassad URL-struktur för din produktkatalog) Lägg till omskrivningsregler för produkt-URL:er.

Anslut Klaviyo's inbyggda integrationsprogram

Anslut först din Magento 2-butik via Klaviyo:s inbyggda integrationsprogram för att synkronisera order, katalog och prenumerantdata genom att följa stegen i Komma igång med Magento 2.

En stor del av Klaviyo:s Magento 2 integrationer är beroende av att data hämtas via Magento:s serversida API. Vanligtvis påverkas inte detta av att använda en frikopplad frontend, och den inbyggda integrationsprogrammet spårar följande händelser utan ytterligare inställningar:

• Skapad beställning
• Uppfyllde beställning
• Hanterad Leverans
• Annullerad order
• Återbetalade beställning
• Påbörjad kassaprocess

Observera dessutom att:

• Startade kassahändelser kommer att synkroniseras förutsatt att du fortfarande skapar offerter och tilldelar en e-postadress till dem när användaren kassa.
• Om du har aktiverat synkronisering av kund prenumerera till tabellen Magento 2 nyhetsbrev, bör synkroniseringen fungera som förväntat.

Lägg till kodsnippet manuellt

Om du använder en headless-installation måste du manuellt lägga till Klaviyo:s JavaScript "Aktiv on Site" (även känt som Klaviyo.js) på din webbplats. Klaviyo.js spårar när användare är Aktiv på din webbplats och möjliggör Klaviyo formulär. 

Vi tillhandahåller också utdrag som gör att du kan göra följande:

• Spårning av visad produkt
  Spåra när en användare tittar på specifika produkter på din webbplats (vilket kan utnyttjas i ett flöde för övergiven surfning).
• Nyligen visade föremål spårning
  Spåra nyligen visade objekt på en användares profil.
• Added to Cart spårning
  Spåra när en användare lägger till en artikel i sin varukorg.
• logga in Användarspårning
  Om du har en funktion för att skapa konto kan du spåra när en användare loggar in.

Aktiv på plats 

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

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

Efter att ha lagt till Klaviyo.js, måste du ladda Klaviyo-objektet på alla sidor där du vill lägga till ett av följande utdrag (t.ex. Visad produkt, Lagt till i kundvagn etc.). Objektet Klaviyo objektet behöver bara laddas en gång per sida.

För att ladda Klaviyo objektet genom att manuellt installera följande snippet på de sidor som behövs:

<script type="text/javascript"> !function(){if(!window.Klaviyo){window._klOnsite=window._klOnsite||[];try{window.Klaviyo=new Proxy({},{get:function(n,i){return"pushnotis"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function() {for(var n=argument.längd,o=ny 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.pushnotis([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.Klaviyo=window.Klaviyo[],window.Klaviyo.pushnotis=function(){var n;(n=window._klOnsite).pushnotis.apply(n,arguments)}}}}(); </script>

Visad produkt 

Om du vill skapa ett flöde för övergiven surfning eller bygga segment baserat på produktbläddringsaktivitet måste du lägga till JavaScript-händelsespårning för Viewed Product-mättalen. Alla Visad produkt mättal är knutna till användarprofil. Lägg till följande snippet på din produktsidas mall.

<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 Produkt", objekt);
 </script>

Se till att uppdatera värdena för JSON-egenskaperna i utdraget så att de dynamiskt hämtar den relevanta information som behövs för den egenskapen.

Senast visade artiklar

Dessutom finns det ett annat utdrag som gör att poster kan läggas till i ett visuellt flöde med "Senast visade objekt" på användarens profil. Följande snippet kan läggas till direkt under snippet Viewed Product. 

Se till att ersätta item.___ i utdraget 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 övergiven kundvagn e-post till besökare som lägger till varor i sin kundvagn, men inte kommer till kassasidan, vill du spåra en Added to Cart mättal. En kund måste identifieras (dvs. cookied) för att spåra denna händelse. Här är ett exempel på en begäran där varukorgen redan innehöll en artikel (Nalle Puh) och en annan artikel just lagts till i varukorgen (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",
 " TillagdItemCategories": ["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",
     "Objekt": [{
         "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 kund kan skapa Konto på din webbplats, kanske du vill lägga till ytterligare kod för att identifiera och spåra logga in användare. Den här koden ska köras när användaren har loggat in.

Här är ett exempel på ett skript som hjälper dig att komma igång:

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

Lägg till omskrivningsregler för produktwebbadresser

Din Magento 2 produktkatalog bör synkroniseras normalt med Klaviyo via vår inbyggda integration, men om du använder en anpassad URL-struktur måste du lägga till några omskrivningsregler i din kodbas.

Standardwebbadressen för Magento 2-produkter följer strukturen nedan:

https://[DIN butik]/katalog/produkt/vy/id/[PRODUKT-ID]

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

https://[DIN butik]/produkter/[Produktnamn]

Sedan måste du lägga till några omskrivningsregler i din kodbas för att omdirigera standard Magento 2-produktlänkar till din anpassade URL-struktur

Ytterligare resurser

• Komma igång med Magento 2.x (CE och EE)
• Magento krav på integrationssystem
• Magento 2 data referens