Jak utworzyć zdarzenie "Dodano do koszyka" dla BigCommerce

Czego się dowiesz?

Dowiedz się, jak utworzyć zdarzenie Dodano do koszyka dla BigCommerce, które śledzi, kiedy klient dodaje produkt do koszyka, i może uruchomić sekwencję porzuconego koszyka zakupowego. Zdarzenia Dodano do koszyka nie są śledzone automatycznie po integracji z BigCommerce; najpierw musisz dodać (i ewentualnie zmodyfikować) fragment kodu JavaScript (dołączony do tego przewodnika) w plikach motywu BigCommerce.

• Nie musisz tworzyć zdarzenia Added to Cart, aby wysłać sekwencję porzuconego koszyka zakupowego; sekwencja porzuconego koszyka zakupowego Added to Cart jest oddzielna od standardowej sekwencji porzuconego koszyka zakupowego, która jest wyzwalana przez Started Checkout.
• Wbudowana integracja Klaviyo z BigCommerce już śledzi zdarzenie Rozpoczęto realizację zakupu, gdy klient wprowadzi swój adres e-mail podczas realizacji zakupu po dodaniu produktu(-ów) do koszyka.

Kilka słów na początek

Zdarzenie Dodano do koszyka jest śledzone tylko w przypadku użytkowników, którzy wcześniej korzystali z plików cookie Klaviyo .

Aby zdarzenie Dodano do koszyka działało poprawnie, musisz mieć już zainstalowane śledzenie Wyświetlono produkt. Zwykle klienci Klaviyo instalują to podczas procesu integracji z BigCommerce, a instrukcje znajdziesz w naszym artykule o integracji.

Dodaj wycinek kodu źródłowego

1. Otwórz panel administracyjny BigCommerce i przejdź do Storefront > My Themes.
2. Znajdź swój obecny motyw i kliknij menu rozwijane Ustawienia zaawansowane.
3. Wyszukaj plik product.html i kliknij go, aby go otworzyć.
4. Wklej poniższy fragment kodu bezpośrednio pod fragmentem kodu Klaviyo Viewed Product.

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!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>
<script text="text/javascript">
//Added to Cart
var klaviyo = window.klaviyo || [];
document.getElementById("form-action-addToCart").addEventListener('click',function (){
   klaviyo.track("Added to Cart", item);
});
</script>

1. Następnie sprawdź, czy musisz zmodyfikować swój snippet. Aby to zrobić, sprawdź identyfikator przycisku „Dodaj do koszyka” w swojej witrynie i zobacz, czy pasuje do zmiennej „Dodaj do koszyka” wyróżnionej w poniższym fragmencie kodu, której wartość domyślna to form-action-addToCart.
   

2. Aby sprawdzić identyfikator przycisku, otwórz jedną ze stron produktu w swojej witrynie, kliknij prawym przyciskiem myszy przycisk „Dodaj do koszyka” i wybierz Zbadaj.
   

3. Otworzy się konsola, pokazując kod źródłowy przycisku „Dodaj do koszyka”. Poniższy obraz pokazuje identyfikator przycisku "Dodaj do koszyka" podświetlony w konsoli.
   

4. Identyfikator przycisku na stronie pokazanej tutaj jest zgodny z form-action-addToCart, więc nie trzeba wprowadzać żadnych zmian.
   • Jeśli identyfikator przycisku „Dodaj do koszyka” w witrynie nie jest równy form-action-addToCart, musisz zmienić tekst zmiennej w cudzysłowie tak, aby odpowiadał identyfikatorowi przycisku
5. Jeśli kod źródłowy nie pokazuje identyfikatora przycisku, przejdź do następnej sekcji i dowiedz się, jak użyć alternatywnego fragmentu kodu z notacją klas zamiast notacji przycisku.
6. Gdy skończysz, zapisz plik product.html.

Zakończono dodawanie fragmentu kodu i teraz będzie śledzone zdarzenie Dodano do koszyka.

Alternatywny wycinek kodu źródłowego dla przycisku "Dodaj do koszyka" bez identyfikatora przycisku

Ze względów stylizacyjnych niektóre witryny używają notacji klasy zamiast identyfikatora przycisku w przypadku przycisków „Dodaj do koszyka”.

Jeśli przycisk „Dodaj do koszyka” nie ma identyfikatora przycisku (co możesz ustalić, wykonując kroki w poprzedniej sekcji), a zamiast tego korzysta z notacji klasy, użyj poniższego alternatywnego wycinka kodu źródłowego, aby włączyć zdarzenie Dodano do koszyka.

1. Jeśli przycisk jest zdefiniowany za pomocą notacji klasy, wklej następujący alternatywny fragment kodu na dole pliku product.html:

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!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>
<script text="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];var classname = document.getElementsByClassName("add-to-cart");var addToCart = function() {   klaviyo.track("Added to Cart", item);}; for (var i = 0; i < classname.length; i++) {   classname[i].addEventListener('click', addToCart, false);}
</script>

1. Ten kod prawdopodobnie będzie trzeba zmodyfikować, używając swojej nazwy klasy. Porównaj nazwę klasy przycisku między cudzysłowami, podświetloną w poniższym przykładzie, z zawartością między nawiasami po getElementsByClassName w powyższym wycinku kodu źródłowego. Na przykład nazwa klasy na zrzucie ekranu to btn product-form_cart-submit btn--secondary-accent, a klasa we fragmencie kodu nosi nazwę add-to-cart.
   
   

• Jeśli te dwie wartości nie są takie same, zmień wycinek kodu źródłowego, aby odzwierciedlał nazwę klasy przycisku.

2. Na przykład poniższy wycinek kodu źródłowego został zmodyfikowany tak, że wartość classname btn product-form_cart-submit btn--secondary-accent jest ujęta w podwójny cudzysłów.
   

3. Zapisz plik product.html

Po zapisaniu dodawanie fragmentu kodu zostanie ukończone i od teraz można śledzić zdarzenie Added to Cart.

Rozwiązywanie problemów z fragmentem kodu „Dodano do koszyka”

Po dodaniu fragmentu kodu powinien on obserwować przycisk "Dodaj do koszyka'' i śledzić zdarzenie Dodano do koszyka za każdym razem, gdy odwiedzający z plikiem cookie kliknie ten przycisk.

To zdarzenie działa podobnie do zdarzenia Viewed Product. Każdy element dodany do koszyka przez daną osobę wywoła nowe zdarzenie. Te zdarzenia możesz wyświetlić, wykonując następujące czynności:

1. W Klaviyo przejdź do Analityka > Metryki
2. Wyszukiwanie zdarzenia
3. Kliknięcie Kanał aktywności
   
   

Jeśli na koncie nie widzisz zdarzeń Added to Cart, wypróbuj następujące rozwiązania:

• Upewnij się, że Twój Klaviyo.js (znany też jako fragment Active on Site) działa, co jest niezbędne, aby Dodano do koszyka działało prawidłowo. Powinno to zostać dodane do Twojej witryny automatycznie podczas integracji z Klaviyo, ale możesz sprawdzić, czy działa, wykonując kroki opisane w sekcji potwierdzania instalacji śledzenia na stronie w naszym artykule o integracji z BigCommerce.
• Sprawdź, czy działa śledzenie Viewed Product , które jest również niezbędne, aby Added to Cart działało prawidłowo. Ten fragment kodu jest dodawany ręcznie. Informacje o tym, jak go dodać i przetestować, znajdziesz w sekcji Viewed Product w naszym artykule o integracjach.

Jeżeli nadal występują problemy z wstawką Dodano do koszyka, może to wynikać z problemu z identyfikacją przycisku „Dodaj do koszyka”. W takiej sytuacji skontaktuj się ze wsparciem Klaviyo.

Sekwencja porzuconego koszyka zakupowego „Dodano do koszyka”

Podczas tworzenia sekwencji porzuconego koszyka zakupowego (z wykorzystaniem Dodano do koszyka lub Rozpoczęto realizację zakupu) możesz wykorzystać Klaviyo SMS oprócz e-maila. Ze względów zgodności z przepisami pamiętaj, aby w swojej sekwencji wysyłać tylko jedną wiadomość SMS, a jeśli używasz wielu typów sekwencji porzuconego koszyka zakupowego, pamiętaj, aby używać SMS tylko w jednej z nich.

W sekcji Essentials biblioteki znajdziesz standardową sekwencję przypomnienia o porzuconym koszyku zakupowym. Ta sekwencja jest wyzwalana przez zdarzenie Started Checkout.

Aby rozpocząć sekwencję dotyczącą porzuconego koszyka zakupowego z użyciem zdarzenia Added to Cart, zalecamy skorzystanie z gotowej sekwencji dostępnej w Bibliotece sekwencji Klaviyo, która ma już skonfigurowane odpowiednie filtr sekwencji. Ta sekwencja zwykle jest kierowana do mniej zdecydowanych potencjalnych klientów, którzy jeszcze nie rozpoczęli realizacji zakupu.

Sekwencję porzuconego koszyka zakupowego wyzwalaną przez zdarzenie Dodano do koszyka można znaleźć w sekcji celów „Zapobiegaj utracie sprzedaży”.

Jeśli wdrożono fragment kodu BigCommerce Dodano do koszyka, ta sekwencja będzie gotowa do użycia ze wszystkimi zalecanymi filtrami i dynamiczną treścią e-maili, która umożliwia wysyłanie spersonalizowanych wiadomości uzupełniających po porzuceniu koszyka.

Korzystasz z usługi Amazon Buy with Prime?

Jeżeli do wspomagania obsługi płatności i realizacji zamówień na dowolne produkty w swoim sklepie korzystasz z usługi Buy with Prime, wykonaj następujące czynności:

• Zintegruj usługę Buy with Prime z Klaviyo, aby przenieść dane z usługi Buy with Prime do swojego konta Klaviyo.
• W przypadku sekwencji porzuconego koszyka związanego z „Dodano do koszyka” dodaj następujące filtry sekwencji, aby wykluczyć klientów, którzy rozpoczęli proces płatności lub dokonali zakupów za pośrednictwem usługi Buy with Prime, z otrzymywania nieprawidłowych wiadomości:
  
  • Rozpoczęto proces płatności (Buy with Prime) zero razy od uruchomienia tej sekwencji ORAZ
  • Od początku tej sekwencji zamówienie złożono zero razy (Buy with Prime).