Hoe een headless Magento 2 installatie integreren
Wat je leert
Leer hoe je Klaviyo kunt integreren 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, etc.), dan is de volgende informatie relevant voor je.
Deze integratie vereist 3 stappen:
- Verbind je Magento 2 zaak via Klaviyo's native integraties om bestellingen, catalogi en abonneegegevens te synchroniseren.
- Voeg handmatig een codefragment toe aan je site om onsite tracking functionaliteit in te schakelen.
- (Als je een aangepaste URL-structuur gebruikt voor je productcatalogus) Voeg herschrijfregels toe voor product-URLS.
Verbind Klaviyo's native integraties
Verbind eerst je Magento 2 zaak via Klaviyo's native integraties om bestelling, catalogus en abonneegegevens te synchroniseren door de stappen in Aan de slag met Magento 2 te volgen.
Een groot deel van Klaviyo's Magento 2 integraties berust op het ophalen van gegevens via Magento's serverkant API. Normaal gesproken wordt dit niet beïnvloed door het gebruik van een ontkoppeld frontend en de native integraties zullen de volgende gebeurtenissen volgen zonder verdere instellingen:
- Bestelling geplaatst
- Afgeronde bestelling
- Verzending Uitgevoerd
- Geannuleerde bestelling
- Terugbetaalde bestelling
- Afrekenen gestart
Houd er bovendien rekening mee dat:
- Begonnen afrekenen gebeurtenissen zullen synchroniseren op voorwaarde dat je nog steeds offertes aanmaakt en er een e-mailadres aan toewijst wanneer de gebruiker afrekent.
- Als je het synchroniseren van klant aanmelden hebt ingeschakeld in de Magento 2 nieuwsbrief tabel, zou de synchronisatie moeten werken zoals verwacht.
Codefragment handmatig toevoegen
Als je een headless setup gebruikt, moet je handmatig Klaviyo's "actief op site" JavaScript (ook bekend als Klaviyo.js) aan je site toevoegen. Klaviyo.js houdt bij wanneer gebruikers actief zijn op je site en schakelt Klaviyo formulieren in.
We bieden ook snippets waarmee je het volgende kunt doen:
-
Bekeken product tracking
Volg wanneer een gebruiker specifieke producten op je site bekijkt (dit kan worden gebruikt in een flow voor websiteverlaters). -
Onlangs Viewed Items tracking
Traceer recent bekeken items op het profiel van een gebruiker. -
Toegevoegd aan winkelwagen tracking
Volg wanneer een gebruiker een artikel toevoegt aan zijn winkelwagentje. -
inloggen gebruiker tracking
Als je account functionaliteit hebt voor het aanmaken, houd dan bij wanneer een gebruiker inlogt.
actief op locatie
Voeg de volgende Klaviyo.js snippet toe zodat deze op elke pagina van je website verschijnt. Dit zal actief inschakelen op Site tracking en Klaviyo formulieren. Zorg ervoor dat u PUBLIC_API_KEY vervangt door uw Klaviyo openbare API-sleutel.
<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>Na het toevoegen van Klaviyo.js, moet je het Klaviyo object laden op elke pagina waar je een van de volgende snippets wilt toevoegen (zoals Product bekeken, Aan winkelwagen toegevoegd, etc). Het Klaviyo hoeft maar één keer per pagina geladen te worden.
Om het Klaviyo object te laden, installeer je handmatig het volgende knipsel 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]=argumenten[w];var t="functie"==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>
Bekeken product
Als je een flow voor websiteverlaters wilt instellen of segmenten wilt bouwen op basis van productbladeractiviteit, moet je JavaScript-event tracking toevoegen voor de bekeken product meetwaarde. Alle Viewed Product meetwaarde zijn gebonden aan het gebruikersprofiel. Voeg op je productpagina template het volgende fragment 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("Bekeken Product", item);
</script>Zorg ervoor dat je de waarden van de JSON eigenschappen in het knipsel update zodat ze dynamisch de relevante informatie ophalen die nodig is voor die eigenschap.
Recent Viewed ItemsRecent Viewed Items
Daarnaast is er nog een snippet waarmee items kunnen worden toegevoegd aan een visuele "Recent Viewed Items" feed op het profiel van de gebruiker. Het volgende knipsel kan direct onder het knipsel voor Bekeken product worden toegevoegd.
Zorg ervoor dat je item.___ in het knipsel 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-mail wilt sturen naar bezoekers die artikelen aan hun winkelwagen toevoegen, maar niet op de afrekenpagina komen, dan wil je een Toegevoegd aan winkelwagen meetwaarde bijhouden. Een klant moet geïdentificeerd zijn (d.w.z. gekookt) om deze gebeurtenis te kunnen volgen. Hier is een voorbeeldverzoek waarbij de winkelwagen al één artikel bevatte (Winnie de Poeh) en er net een ander artikel aan de winkelwagen was toegevoegd (A Tale of Two Cities):
<script type="tekst/javascript">
Klaviyo.track("Toegevoegd aan winkelwagen", {
" $waarde": 29,98,
" ToegevoegdItemProductNaam": "A Tale of Two Cities",
" ToegevoegdProductID": "1112",
" ToegevoegdItemSKU": "TALEOFTWO",
" ToegevoegdItemCategorieën": ["Fictie", "Klassiekers", "Kinderen"],
" ToegevoegdItemImageURL": "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 klant een account kan aanmaken op je website, wil je misschien extra code toevoegen om inloggen gebruikers te identificeren en te volgen. Deze code moet worden uitgevoerd zodra de gebruiker heeft ingelogd.
Hier is een voorbeeldscript om je op weg te helpen:
Klaviyo.identificeren({
"$email" : customer.email,
"$first_name" : customer.first_name,
"$last_name" : customer.last_name
});
Herschrijfregels toevoegen voor product URL's
Je Magento 2 productcatalogus zou normaal moeten synchroniseren met Klaviyo via onze native integraties, maar als je een aangepaste URL-structuur gebruikt, moet je wat herschrijfregels toevoegen aan je codebase.
De standaard Magento 2 product URL volgt de onderstaande structuur:
https://[JOUW zaak]/catalog/product/view/id/[PRODUCT ID]Als je zaak een URL-structuur gebruikt zoals:
https://[JOUW zaak]/producten/[Productnaam]Dan moet je een aantal herschrijfregels toevoegen aan je codebase om de standaard Magento 2 productlinks om te leiden naar je aangepaste URL-structuur
Extra hulpbronnen