Imparerai
Scopra come integrare Klaviyo con una configurazione di Magento 2 senza testa. Se utilizza Magento 2 per alimentare il backend del suo negozio di e-commerce, ma un framework diverso per il frontend (come React.js, Angular, ecc.), allora le seguenti informazioni sono rilevanti per lei.
Questa integrazione richiede 3 passaggi:
- Colleghi il suo negozio Magento 2 tramite l'integrazione nativa di Klaviyo per sincronizzare i dati degli ordini, del catalogo e degli abbonati.
- Aggiunga manualmente degli snippet di codice al suo sito per attivare la funzionalità di tracciamento sul posto.
- (Se utilizza una struttura URL personalizzata per il suo catalogo prodotti) Aggiunga le regole di riscrittura per gli URL dei prodotti.
Collegare l'integrazione nativa di Klaviyo
Per prima cosa, colleghi il suo negozio Magento 2 tramite l'integrazione nativa di Klaviyo per sincronizzare i dati degli ordini, del catalogo e degli abbonati, seguendo i passaggi riportati in Come iniziare con Magento 2.
Gran parte dell'integrazione di Klaviyo con Magento 2 si basa sull'acquisizione di dati tramite l'API lato server di Magento. In genere, questo non è influenzato dall'utilizzo di un frontend disaccoppiato e l'integrazione nativa terrà traccia dei seguenti eventi senza ulteriori configurazioni:
- Ordine effettuato
- Ordine evaso
- Spedizione completata
- Ordine annullato
- Ordine rimborsato
- Avviato il checkout
Inoltre, tenga presente che:
- Gli eventi di Checkout avviato si sincronizzeranno a condizione che lei stia ancora creando preventivi e assegnando loro un indirizzo e-mail al momento del check-out dell'utente.
- Se ha abilitato la sincronizzazione dei clienti iscritti alla tabella delle newsletter di Magento 2, la sincronizzazione dovrebbe funzionare come previsto.
Aggiungere manualmente gli snippet di codice
Se utilizza una configurazione headless, deve aggiungere manualmente il JavaScript "Attivo sul sito" di Klaviyo (noto anche come Klaviyo.js) al suo sito. Klaviyo.js tiene traccia di quando gli utenti sono attivi sul suo sito e abilita i moduli Klaviyo.
Forniamo anche snippet che le permettono di fare quanto segue:
-
Tracciamento dei prodotti visualizzati
Traccia quando un utente visualizza prodotti specifici sul suo sito (che può essere sfruttato in un flusso di abbandono della navigazione). -
Tracciamento degli articoli visti di recente
Traccia gli articoli visti di recente sul profilo di un utente. -
Tracciamento dell'aggiunta al carrello
Traccia quando un utente aggiunge un articolo al suo carrello. -
Tracciamento degli utenti registrati
Se dispone di una funzionalità di creazione dell'account, tenga traccia di quando un utente effettua l'accesso.
Attivo sul posto
Aggiunga il seguente snippet Klaviyo.js in modo che appaia in ogni pagina del suo sito web. Questo abiliterà il monitoraggio Active on Site e i moduli Klaviyo. Si assicuri di sostituire PUBLIC_API_KEY con la sua chiave API pubblica di Klaviyo.
<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>Dopo aver aggiunto Klaviyo.js, dovrà caricare l'oggetto Klaviyo su ogni pagina in cui desidera aggiungere uno dei seguenti snippet (come ad esempio Prodotto visto, Aggiunto al carrello, ecc). L'oggettoklaviyo deve essere caricato solo una volta per pagina.
Per caricare l'oggetto klaviyo, installi manualmente il seguente snippet nelle pagine necessarie:
<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]=argomenti[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){finestra._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){finestra.klaviyo=finestra.klaviyo||[],finestra.klaviyo.push=funzione(){var n;(n=finestra._klSito).push.apply(n,argomenti)}}}}(); </script>
Prodotto visto
Se desidera impostare un flusso di abbandono della navigazione o costruire segmenti basati sull'attività di navigazione del prodotto, dovrà aggiungere il tracciamento degli eventi JavaScript per la metrica Prodotto visto. Tutte le metriche del Prodotto Visualizzato sono legate ai profili degli utenti. Nel modello della pagina del prodotto, aggiunga il seguente snippet.
<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("Visualizzato Prodotto", articolo);
</script>Si assicuri di aggiornare i valori delle proprietà JSON nello snippet, in modo che attingano dinamicamente alle informazioni pertinenti necessarie per quella proprietà.
Articoli visti di recenteArticoli visti di recente
Inoltre, c'è un altro snippet che consente di aggiungere voci a un feed visivo "Articoli visti di recente" sul profilo dell'utente. Il seguente snippet può essere aggiunto direttamente sotto lo snippet Prodotto visto.
Si assicuri di sostituire item.___ nello snippet con l'oggetto item che la sua piattaforma utilizza per le proprietà del prodotto.
<script type="text/javascript">
var klaviyo = window.klaviyo || [];
klaviyo.trackViewedItem({
"Titolo": articolo.NomeProdotto,
"ItemId": articolo.ProductID,
"Categorie": articolo.Categorie,
"ImageUrl": articolo.ImageURL,
"Url": articolo.URL,
"Metadati": {
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
}
});
</script>Aggiunto al carrello
Se desidera inviare e-mail di carrello abbandonato ai visitatori che aggiungono articoli al carrello, ma non arrivano alla pagina di checkout, dovrà tracciare una metrica Added to Cart. Per tracciare questo evento, è necessario identificare un cliente (cioè, cucinare). Ecco un esempio di richiesta in cui il carrello conteneva già un articolo (Winnie the Pooh) e un altro articolo è stato appena aggiunto al carrello (A Tale of Two Cities):
<script type="text/javascript">
klaviyo.track("Aggiunto al carrello", {
"$valore": 29.98,
"AddedItemProductName": "Racconto di due città",
"AddedItemProductID": "1112",
"AddedItemSKU": "TALEOFTWO",
"AddedItemCategories": ["Narrativa", "Classici", "Bambini"],
"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",
"Articoli": [{
"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>Utenti registrati
Se i clienti possono creare degli account sul suo sito web, potrebbe voler aggiungere del codice aggiuntivo per identificare e tracciare gli utenti che hanno effettuato il login. Questo codice deve essere eseguito una volta che l'utente ha effettuato l'accesso.
Ecco un esempio di script per iniziare:
klaviyo.identify({
"$email" : customer.email,
"$first_name" : customer.first_name,
"$last_name" : customer.last_name
});
Aggiungere regole di riscrittura per gli URL dei prodotti
Il suo catalogo prodotti Magento 2 dovrebbe sincronizzarsi normalmente con Klaviyo tramite la nostra integrazione nativa, anche se se utilizza una struttura URL personalizzata dovrà aggiungere alcune regole di riscrittura alla sua base di codice.
L'URL del prodotto predefinito di Magento 2 segue la struttura seguente:
https://[IL TUO NEGOZIO]/catalogo/prodotto/view/id/[ID PRODOTTO]Se il suo negozio utilizza una struttura di URL come:
https://[IL SUO NEGOZIO]/prodotti/[Nome del prodotto]Quindi dovrà aggiungere alcune regole di riscrittura alla sua base di codice per reindirizzare i link ai prodotti standard di Magento 2 alla sua struttura URL personalizzata.
Risorse aggiuntive