Jak zintegrować bezgłową konfigurację Magento 2?

Czego się dowiesz

Dowiedz się, jak zintegrować Klaviyo z bezgłową konfiguracją Magento 2. Jeśli używasz Magento 2 do zasilania backendu swojego sklepu internetowego, ale innego frameworka dla frontendu (takiego jak React.js, Angular itp.), to poniższe informacje są dla Ciebie istotne.

Ta integracja wymaga 3 kroków:

1. Połącz swój sklep Magento 2 za pośrednictwem natywnej integracji Klaviyo, aby zsynchronizować zamówienia, katalog i dane subskrybentów.
2. Ręcznie dodaj wycinek kodu źródłowego do swojej witryny, aby włączyć funkcję śledzenia w witrynie.
3. (Jeśli używasz niestandardowej struktury adresów URL dla swojego katalogu produktów) Dodaj reguły przepisywania dla adresów URL produktów.

Połącz Klaviyo z natywnymi integracjami

Najpierw połącz swój sklep Magento 2 za pośrednictwem natywnej integracji Klaviyo, aby zsynchronizować zamówienie, katalog i dane subskrybentów, wykonując czynności opisane w sekcji Pierwsze kroki z Magento 2.

Duża część integracji Klaviyoz Magento 2 polega na pobieraniu danych przez Magento po stronie serwera API. Zazwyczaj nie ma na to wpływu korzystanie z odłączonego frontendu, a natywne integracje będą śledzić następujące zdarzenia bez dalszej konfiguracji:

• Złożone zamówienie
• Zrealizowano zamówienie
• Zrealizowano wysyłkę
• Anulowane zamówienie
• Zwrócono płatność za zamówienie
• Zakupy dodane do kasy

Ponadto pamiętaj, że:

• Uruchomiona strona płatności kasa wydarzenia zostaną zsynchronizowane, pod warunkiem, że nadal tworzysz oferty i przypisujesz do nich adres e-mail, gdy użytkownik przejdzie na stronę płatności przejść do kasy.
• Jeśli włączyłeś synchronizację klienta subskrybować do Magento 2 newsletter tabeli, synchronizacja powinna działać zgodnie z oczekiwaniami.

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

Jeśli korzystasz z konfiguracji headless, musisz ręcznie dodać skrypt JavaScript "aktywni on Site" Klaviyo(znany również jako Klaviyo.js) do swojej witryny. Klaviyo.js śledzi, kiedy użytkownicy są aktywni na Twojej stronie i włącza formularze Klaviyo. 

Zapewniamy również fragmenty, które pozwalają Ci wykonać następujące czynności:

• Wyświetlone śledzenie produktu
  Śledź, kiedy użytkownik ogląda określone produkty w Twojej witrynie (co można wykorzystać w sekwencji porzuconego przeglądania).
• Ostatnio oglądane przedmioty śledzenie
  Śledź ostatnio oglądane elementy na profilu użytkownika.
• Dodano do koszyka śledzenie
  Śledź, kiedy użytkownik dodaje przedmiot do koszyka.
• Zaloguj się User śledzenie
  Jeśli masz funkcję tworzenia konta, śledź, kiedy użytkownik loguje się.

aktywni na stronie 

Dodaj następujący fragment Klaviyo.js, aby pojawiał się na każdej stronie w Twojej witrynie. To włączy aktywni na Stronie śledzenie i Klaviyo formularzy. Upewnij się, że zastąpiłeś PUBLIC_API_KEY swoim kluczem publicznymKlaviyo API .

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

Po dodaniu Klaviyo.js, Musisz załadować obiekt Klaviyo na każdej stronie, na której chcesz dodać jeden z poniższych fragmentów (takich jak Wyświetlony produkt, Dodano do koszyka itp.). Obiekt Klaviyo musi zostać załadowany 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>

Oglądany produkt 

Jeśli chcesz skonfigurować sekwencję porzuconego przeglądania lub zbudować segment na podstawie aktywności przeglądania produktów, musisz dodać śledzenie zdarzeń JavaScript dla metryki Viewed Product. Wszystkie wyświetlane metryki produktów są powiązane z profilem użytkownika. Na szablonie strony produktu dodaj następujący fragment.

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

Upewnij się, że aktualizujesz wartości właściwości JSON w snippecie, aby dynamicznie pobierały odpowiednie informacje potrzebne dla danej właściwości.

Ostatnio oglądane przedmioty

Dodatkowo istnieje inny fragment, który umożliwia dodawanie wpisów do wizualnego kanału "Ostatnio przeglądane elementy" w profilu użytkownika. Poniższy fragment kodu można dodać bezpośrednio pod fragmentem Wyświetlany produkt. 

Pamiętaj, aby zastąpić item.___ we fragmencie dowolnym obiektem item używanym przez twoją platformę 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 wysłać porzucony koszyk zakupowy e-mail do odwiedzających, którzy dodają produkty do koszyka, ale nie trafiają na stronę płatności kasa, będziesz chciał śledzić metrykę Dodano do koszyka. Aby śledzić to zdarzenie, klient musi być zidentyfikowany (tj. cookied). Oto przykładowe żądanie, w którym koszyk zawierał już jeden przedmiot (Kubuś Puchatek) i właśnie dodano do niego kolejny przedmiot (Opowieść o dwóch miastach): 

<script type="text/javascript">
Klaviyo.track("Dodano do koszyka", {
 " $value": 29.98,
 " AddedItemProductName": "A Tale of Two Cities",
 " AddedItemProductID": "1112",
 " AddedItemSKU": "TALEOFTWO",
 " AddedItemCategories": ["Fikcja", "Klasyka", "Dzieci"],
 " 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",
     "Pozycje": [{
         "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 klient może utworzyć konto w Twojej witrynie, możesz dodać dodatkowy kod, aby zidentyfikować i śledzić użytkowników logujących się. Kod ten powinien zostać wykonany po zalogowaniu się użytkownika.

Oto przykładowy skrypt, który pomoże Ci 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

Twój katalog produktów Magento 2 powinien synchronizować się normalnie z Klaviyo poprzez nasze natywne integracje, chociaż jeśli używasz niestandardowej struktury adresów URL, będziesz musiał dodać kilka reguł przepisywania do swojej bazy kodu.

Domyślny adres URL produktu Magento 2 ma poniższą strukturę:

https://[TWÓJ SKLEP]/catalog/product/view/id/[ID PRODUKTU]

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

https://[TWÓJ sklep]/products/[Nazwa produktu]

Następnie musisz dodać kilka reguł przepisywania do swojej bazy kodu, aby przekierować standardowe linki produktów Magento 2 do niestandardowej struktury adresów URL

Dodatkowe źródła

• Pierwsze kroki z Magento 2.x (CE i EE)
• Magento wymagania systemowe integracji
• Magento 2 dane referencyjne