Come integrare una configurazione headless di Magento 2

Cosa imparerai

Scopri come integrare Klaviyo con una configurazione headless di Magento 2. Se utilizzi Magento 2 per gestire il backend del tuo negozio e-commerce, ma un framework diverso per il frontend (come React.js, Angular, ecc.), allora le seguenti informazioni sono pertinenti per te.

Questa integrazione richiede 3 passaggi:

1. Collega il tuo negozio Magento 2 tramite l'integrazione nativa di Klaviyo per sincronizzare i dati di ordini, catalogo e iscritti.
2. Aggiungi manualmente snippet di codice al tuo sito per abilitare le funzionalità di tracciamento onsite.
3. (Se utilizzi una struttura URL personalizzata per il tuo catalogo prodotti) Aggiungi regole di riscrittura per gli URL dei prodotti.

Connetti l’integrazione nativa di Klaviyo

Per prima cosa, collega il tuo negozio Magento 2 tramite l'integrazione nativa di Klaviyo per sincronizzare i dati di ordini, catalogo e iscritti seguendo i passaggi in Primi passi con Magento 2.

Gran parte dell’integrazione Magento 2 di Klaviyo si basa sul recupero dei dati tramite l’API lato server di Magento. In genere, questo non è influenzato dall’uso di un frontend disaccoppiato e l’integrazione nativa traccerà i seguenti eventi senza ulteriori configurazioni:

• Ordine effettuato
• Ordine evaso
• Spedizione evasa
• Ordine annullato
• Ordine rimborsato
• Pagamento avviato

Inoltre, ricorda quanto segue:

• Gli eventi Checkout avviato verranno sincronizzati a condizione che tu stia ancora creando preventivi e assegnando un indirizzo e-mail quando l'utente completa il checkout.
• Se hai attivato la sincronizzazione dei clienti iscritti alla tabella della newsletter Magento 2, la sincronizzazione dovrebbe funzionare come previsto.

Aggiungi manualmente snippet di codice

Se utilizzi una configurazione headless, devi aggiungere manualmente al tuo sito il JavaScript “Active on Site” di Klaviyo (noto anche come Klaviyo.js). Klaviyo.js rileva quando gli utenti sono attivi sul tuo sito e abilita i moduli Klaviyo.

Forniamo anche snippet che ti consentono di fare quanto segue:

• Tracciamento Viewed Product
  Tieni traccia di quando una persona visualizza prodotti specifici sul tuo sito (che può essere sfruttato in un flusso di abbandono della navigazione).
• Tracciamento degli articoli visualizzati di recente
  Tieni traccia degli articoli visualizzati di recente sul profilo di un utente.
• Tracciamento Added to Cart
  Tieni traccia di quando una persona aggiunge un articolo al carrello.
• Tracciamento dell'utente che ha effettuato l'accesso
  Se hai una funzionalità di creazione dell'account, traccia quando un utente accede.

Attivo sul sito

Aggiungi il seguente snippet di Klaviyo.js in modo che venga visualizzato su ogni pagina del tuo sito web. Questo abiliterà il tracciamento Active on Site e i moduli Klaviyo. Assicurati di sostituire PUBLIC_API_KEY con la tua 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, dovrai caricare l'oggetto Klaviyo in qualsiasi pagina in cui vuoi aggiungere uno dei seguenti snippet (come Prodotto visualizzato, Aggiunto al carrello e così via). L'oggetto Klaviyo deve essere caricato solo una volta per pagina.

Per caricare l’oggetto Klaviyo, installa 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]=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>

Prodotto visualizzato

Se desideri impostare un flusso di abbandono della navigazione o creare segmenti basati sull'attività di navigazione dei prodotti, dovrai aggiungere il tracciamento degli eventi JavaScript per la metrica Viewed Product. Tutte le metriche Viewed Product sono legate ai profili utente. Nel modello della pagina prodotto, aggiungi 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("Viewed Product", item);
 </script>

Assicurati di aggiornare i valori delle proprietà JSON nello snippet in modo che vengano recuperati dinamicamente dalle informazioni pertinenti necessarie per quella proprietà.

Articoli visti di recente

Inoltre, è presente un altro snippet che consente di aggiungere voci a un feed visivo “Articoli visualizzati di recente” sul profilo dell'utente. Il seguente snippet può essere aggiunto direttamente sotto lo snippet Viewed Product.

Assicurati di sostituire item.___ nello snippet con l’oggetto item che la tua piattaforma usa per le proprietà del prodotto.

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

Aggiunto al carrello

Se desideri inviare e-mail per carrello abbandonato ai visitatori che aggiungono articoli al carrello, senza però arrivare alla pagina di pagamento, ti consigliamo di tracciare una metrica Aggiunto al carrello. Per tracciare questo evento, è necessario identificare un cliente (ad esempio tramite cookie). Ecco una richiesta di esempio in cui il carrello conteneva già un articolo (Winnie the Pooh) e ne è stato appena aggiunto un altro (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>

Utenti connessi

Se i clienti possono creare account sul tuo sito web, potresti voler aggiungere codice aggiuntivo per identificare e monitorare gli utenti che hanno effettuato l'accesso. 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
});

Aggiungi regole di riscrittura per gli URL dei prodotti

Il tuo catalogo prodotti Magento 2 dovrebbe sincronizzarsi normalmente con Klaviyo tramite la nostra integrazione nativa, anche se, se utilizzi una struttura URL personalizzata, dovrai aggiungere alcune regole di riscrittura alla tua base di codice.

L'URL predefinito del prodotto Magento 2 segue la struttura riportata di seguito:

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

Se il tuo negozio utilizza una struttura URL come:

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

Poi dovrai aggiungere alcune regole di riscrittura alla tua base di codice per reindirizzare i link standard dei prodotti Magento 2 alla tua struttura URL personalizzata

Risorse aggiuntive