Een headless Magento 2-configuratie integreren

Wat je leert

Lees hoe je Klaviyo integreert met een headless Magento 2-setup. Als je Magento 2 gebruikt voor de backend van je webshop, maar een ander framework voor de frontend (zoals React.js, Angular, enz.), dan is de volgende informatie relevant voor je.

Deze integratie vereist 3 stappen:

1. Koppel je Magento 2-winkel via Klaviyo’s native integratie om order-, catalogus- en abonneegegevens te synchroniseren.
2. Voeg handmatig codefragmenten toe aan je site om onsite tracking-functionaliteit in te schakelen.
3. (Als je een aangepaste URL-structuur gebruikt voor je productcatalogus) Voeg rewrite-regels toe voor product-URL's.

Koppel Klaviyo's native integratie

Verbind eerst je Magento 2-winkel via Klaviyo’s native integratie om bestel-, catalogus- en abonneegegevens te synchroniseren door de stappen in Aan de slag met Magento 2 te volgen.

Een groot deel van de Magento 2-integratie van Klaviyo is afhankelijk van het ophalen van gegevens via de server-side API van Magento. Meestal wordt dit niet beïnvloed door het gebruik van een decoupled frontend, en de native integratie houdt de volgende gebeurtenissen bij zonder verdere configuratie:

• Bestelling geplaatst
• Bestelling Afgerond
• Verzending Uitgevoerd
• Bestelling Geannuleerd
• Bestelling Terugbetaald
• Is begonnen met afrekenen

Houd bovendien rekening met het volgende:

• Started Checkout -events worden gesynchroniseerd, zolang je nog steeds offertes maakt en er een e-mailadres aan toewijst wanneer de gebruiker afrekent.
• Als je het synchroniseren van klanten die zijn aangemeld voor de Magento 2-nieuwsbrieftabel hebt ingeschakeld, zou de synchronisatie moeten werken zoals verwacht.

Codefragmenten handmatig toevoegen

Als je een headless setup gebruikt, moet je Klaviyo’s JavaScript voor “Active on Site” (ook wel Klaviyo.js genoemd) handmatig aan je site toevoegen. Klaviyo.js houdt bij wanneer gebruikers actief zijn op je site en maakt Klaviyo-formulieren mogelijk.

We bieden ook snippets waarmee je het volgende kunt doen:

• Tracking voor product bekeken
  Volg wanneer een gebruiker specifieke producten op je site bekijkt (wat je kunt gebruiken in een flow voor website verlaten).
• Tracking van onlangs bekeken items
  Houd onlangs bekeken items bij op het profiel van een gebruiker.
• Tracking voor toegevoegd aan winkelwagen
  Volg wanneer een gebruiker een item toevoegt aan de winkelwagen.
• Tracking van ingelogde gebruiker
  Als je accountaanmaakfunctionaliteit hebt, volg dan wanneer een gebruiker inlogt.

Actief op Website

Voeg het volgende Klaviyo.js-fragment toe zodat dit op elke pagina van je website verschijnt. Dit schakelt tracking van Actief op Website en Klaviyo-formulieren in. Zorg ervoor dat je PUBLIC_API_KEY vervangt door je openbare API-sleutel van Klaviyo.

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

Na het toevoegen van Klaviyo.js, je moet het Klaviyo-object laden op elke pagina waarop je een van de volgende snippets wilt toevoegen (zoals Viewed Product, Added to Cart, enz.). Het Klaviyo -object hoeft maar één keer per pagina te worden geladen.

Om het klaviyo -object te laden, installeer je het volgende snippet handmatig op de benodigde pagina's:

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

Product bekeken

Als je een flow voor website verlaten wilt instellen of segmenten wilt maken op basis van browse-activiteit voor producten, moet je JavaScript event tracking toevoegen voor de meetwaarde Product bekeken. Alle meetwaarden Product bekeken zijn gekoppeld aan profielen. Voeg in je template voor de productpagina het volgende snippet toe.

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

Zorg ervoor dat je de waarden van de JSON-eigenschappen in het fragment bijwerkt, zodat ze dynamisch worden opgehaald uit de relevante informatie die voor die eigenschap nodig is.

Onlangs bekeken items

Daarnaast is er nog een andere snippet waarmee items kunnen worden toegevoegd aan een visuele feed "Recently Viewed Items" op het profiel van de gebruiker. De volgende snippet kan direct onder de snippet Viewed Product worden toegevoegd.

Zorg ervoor dat je item.___ in het fragment vervangt door het itemobject dat jouw platform gebruikt voor producteigenschappen.

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

Toegevoegd aan Winkelwagen

Als je winkelwagen verlaten-e-mails wilt sturen naar bezoekers die items aan hun winkelwagen toevoegen, maar niet op de afrekenpagina komen, wil je een Added to Cart -meetwaarde bijhouden. Een klant moet worden geïdentificeerd (d.w.z. via een cookie) om deze gebeurtenis bij te houden. Hier is een voorbeeldrequest waarbij de winkelwagen al één item bevatte (Winnie the Pooh) en er net nog een item aan de winkelwagen werd toegevoegd (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>

Ingelogde gebruikers

Als klanten accounts kunnen aanmaken op je website, wil je misschien extra code toevoegen om ingelogde gebruikers te identificeren en te volgen. Deze code moet één keer worden uitgevoerd nadat de gebruiker is ingelogd.

Hier is een voorbeeldscript om je op weg te helpen:

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

Voeg rewrite-regels toe voor product-URL's

Je Magento 2-productcatalogus zou normaal moeten synchroniseren met Klaviyo via onze native integratie, maar als je een aangepaste URL-structuur gebruikt, moet je enkele rewrite-regels toevoegen aan je codebase.

De standaard product-URL van Magento 2 volgt de onderstaande structuur:

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

Als je winkel een URL-structuur gebruikt zoals:

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

Daarna moet je een aantal rewrite-regels toevoegen aan je codebase om de standaard Magento 2-productlinks om te leiden naar je aangepaste URL-structuur

Extra hulpbronnen