Jak zintegrować bezgłową konfigurację Magento 2

Czego się dowiesz?

Dowiedz się, jak zintegrować Klaviyo z konfiguracją headless Magento 2. Jeśli używasz Magento 2 do obsługi backendu sklepu internetowego, ale innego frameworka dla frontendu (np. React.js, Angular itd.), poniższe informacje są dla Ciebie istotne.

Ta integracja wymaga 3 kroków:

1. Połącz swój sklep Magento 2 za pomocą natywnej integracji Klaviyo, aby synchronizować dane o zamówieniach, katalogu i subskrybentach.
2. Ręcznie dodaj wycinki kodu źródłowego do swojej witryny, aby włączyć funkcje śledzenia na stronie.
3. (Jeśli używasz niestandardowej struktury URL dla katalogu produktów) dodaj reguły przepisywania dla adresów URL produktów.

Połącz natywną integrację Klaviyo

Najpierw połącz sklep Magento 2 za pomocą natywnej integracji Klaviyo, aby zsynchronizować dane zamówień, katalogu i subskrybentów, wykonując kroki opisane w artykule Pierwsze kroki z Magento 2.

Duża część integracji Klaviyo z Magento 2 opiera się na pobieraniu danych za pośrednictwem API po stronie serwera Magento. Zwykle nie ma na to wpływu używanie odseparowanego frontendu, a natywna integracja będzie śledzić następujące zdarzenia bez dodatkowej konfiguracji:

• Złożone zamówienia
• Zrealizowano zamówienie
• Zrealizowano wysyłkę
• Anulowano zamówienie
• Zwrócono płatność za zamówienie
• Rozpoczęto proces płatności

Ponadto pamiętaj, że:

• Zdarzenia Rozpoczęto realizację zakupu będą synchronizowane, o ile nadal tworzysz wyceny i przypisujesz do nich adres e-mail, gdy użytkownik finalizuje zakup.
• Jeśli włączono synchronizację klientów subskrybujących tabelę newslettera Magento 2, synchronizacja powinna działać zgodnie z oczekiwaniami.

Ręcznie dodaj wycinek kodu źródłowego

Jeśli używasz konfiguracji typu headless, musisz ręcznie dodać do swojej witryny kod JavaScript „Active on Site” Klaviyo (znany również jako Klaviyo.js). Klaviyo.js śledzi, kiedy użytkownicy są aktywni w Twojej witrynie, i umożliwia korzystanie z formularzy Klaviyo.

Udostępniamy też fragmenty kodu, które umożliwiają wykonanie następujących czynności:

• Śledzenie wyświetlenia produktu
  Śledź, kiedy użytkownik wyświetla konkretne produkty w Twojej witrynie (co można wykorzystać w sekwencji porzuconego przeglądania).
• Śledzenie ostatnio przeglądanych produktów
  Śledź ostatnio przeglądane produkty w profilu użytkownika.
• Śledzenie dodania do koszyka
  Śledź, kiedy użytkownik dodaje element do koszyka.
• Śledzenie zalogowanych użytkowników
  Jeśli masz funkcję tworzenia kont, śledź moment, w którym użytkownik się loguje.

Aktywność na stronie

Dodaj poniższy fragment kodu Klaviyo.js, aby pojawiał się na każdej stronie Twojej witryny. Umożliwi to śledzenie aktywnych na stronie oraz formularze Klaviyo. Pamiętaj, aby zastąpić PUBLIC_API_KEY swoim publicznym kluczem API Klaviyo.

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

Po dodaniu Klaviyo.js, trzeba wczytać obiekt Klaviyo na każdej stronie, na której chcesz dodać jeden z poniższych fragmentów kodu (np. Wyświetlono produkt, Dodano do koszyka itp.). Obiekt Klaviyo wystarczy wczytać tylko raz na stronę.

Aby załadować obiekt klaviyo, ręcznie zainstaluj poniższy fragment kodu na odpowiednich stronach:

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

Przeglądany produkt

Jeśli chcesz skonfigurować sekwencję porzuconego przeglądania lub tworzyć segmenty na podstawie aktywności przeglądania produktów, musisz dodać śledzenie zdarzeń JavaScript dla metryki Viewed Product. Wszystkie metryki Viewed Product są powiązane z profilami użytkowników. W szablonie strony produktu dodaj następujący fragment kodu.

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

Pamiętaj, aby zaktualizować wartości właściwości JSON w tym fragmencie kodu, tak aby były dynamicznie pobierane z odpowiednich informacji potrzebnych dla danej właściwości.

Ostatnio przeglądane pozycje

Dodatkowo istnieje jeszcze jeden fragment kodu, który umożliwia dodawanie wpisów do wizualnego kanału „Recently Viewed Items” w profilu użytkownika. Poniższy fragment kodu można dodać bezpośrednio pod fragmentem Viewed Product.

Pamiętaj, aby zastąpić item.___ w snippecie dowolnym obiektem item, którego platforma używa dla właściwości produktu.

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

Dodano do koszyka

Jeśli chcesz wysyłać e-maile dotyczące porzuconego koszyka zakupowego do odwiedzających, którzy dodają produkty do koszyka, ale nie przechodzą na stronę realizacji zakupu, musisz śledzić metrykę Added to Cart. Aby śledzić to zdarzenie, klient musi zostać zidentyfikowany (tj. za pomocą plików cookie). Oto przykładowe żądanie, w którym koszyk zawierał już jeden produkt (Winnie the Pooh), a kolejny produkt został właśnie dodany do koszyka (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>

Zalogowani użytkownicy

Jeśli klienci mogą tworzyć konta w Twojej witrynie, możesz chcieć dodać dodatkowy kod, aby identyfikować i śledzić zalogowanych użytkowników. Ten kod powinien zostać wykonany raz po zalogowaniu się użytkownika.

Oto przykładowy skrypt, który pomoże zacząć:

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

Dodaj reguły przepisywania dla adresów URL produktów

Katalog produktów Magento 2 powinien synchronizować się normalnie z Klaviyo za pośrednictwem naszej natywnej integracje, jednak jeśli używasz niestandardowej struktury adresów URL, musisz dodać do bazy kodu pewne reguły przepisywania.

Domyślny adres URL produktu Magento 2 ma następującą strukturę:

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

Jeśli Twój sklep używa struktury URL, takiej jak:

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

Następnie trzeba będzie dodać do bazy kodu reguły przepisywania, aby przekierować standardowe linki do produktów Magento 2 na niestandardową strukturę adresów URL.

Dodatkowe źródła