Jak utworzyć zdarzenie "Dodano do koszyka" dla BigCommerce

Czego się dowiesz?

Dowiedz się, jak utworzyć zdarzenie Added to Cart dla BigCommerce, które śledzi kliknięcia przycisku „Dodaj do koszyka” na stronie produktu i może uruchomić sekwencję porzuconego koszyka zakupowego. Zdarzenia Added to Cart nie są śledzone automatycznie po integracji z BigCommerce — najpierw musisz dodać (i ewentualnie zmodyfikować) fragment kodu JavaScript (dołączony do tego przewodnika) do plików 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 BigCommerce w Klaviyo już śledzi zdarzenie Started Checkout, gdy koszyk zawiera produkty i podano prawidłowy adres e-mail. W przypadku kupujących zalogowanych na konto w sklepie może się to zdarzyć, gdy po raz pierwszy dodadzą produkt, zanim przejdą do kasy.

Kilka słów na początek

Klaviyo musi zidentyfikować odwiedzającego, zanim aktywność Dodano do koszyka pojawi się na jego profilu. Jeśli włączono opcję Anonimowe uzupełnianie danych, aktywność zebrana przed identyfikacją może zostać dodana do profilu po zidentyfikowaniu odwiedzającego. Dowiedz się więcej o tym, jak Klaviyo ustawia pliki cookie dla odwiedzających.

Upewnij się, że Klaviyo.js jest zainstalowany i że masz już skonfigurowane śledzenie zdarzeń Wyświetlono produkt, aby zdarzenie Dodano do koszyka działało poprawnie. Zazwyczaj klienci Klaviyo instalują to podczas procesu integracji BigCommerce, a instrukcje znajdziesz w naszym artykule o integracji. Oba fragmenty kodu poniżej korzystają z danych o produktach dostarczanych przez śledzenie oglądanych produktów.

Dodaj wycinek kodu źródłowego

1. Otwórz panel administracyjny BigCommerce i przejdź do Storefront > My Themes.
2. Znajdź bieżący motyw, otwórz menu rozwijane Ustawienia zaawansowane i wybierz Edytuj pliki motywu. Jeśli ta opcja jest niedostępna w domyślnym motywie, zrób kopię i edytuj kopię. Przed testowaniem upewnij się, że edytowany motyw jest zastosowany w Twoim sklepie.
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 type="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 type="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. Otworzą się narzędzia deweloperskie w Twojej przeglądarce, pokazując kod HTML przycisku „Dodaj do koszyka”. Znajdź jego identyfikator, jak pokazano na poniższym przykładzie.
   

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 Twojej witrynie nie ma wartości form-action-addToCart, musisz zmienić tekst zmiennej w cudzysłowie tak, aby pasował do identyfikatora przycisku.
5. Jeśli przycisk nie ma identyfikatora (ID), zastąp powyższy fragment kodu alternatywnym fragmentem kodu w następnej sekcji, który używa klasy przycisku. Użyj tylko 1 z 2 fragmentów kodu.
6. Gdy skończysz, zapisz plik product.html.

Po zapisaniu wykonaj poniższe kroki testowania, aby potwierdzić, że zdarzenia Added to Cart docierają do Klaviyo.

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. Zastąp pierwszy snippet alternatywnym snippetem poniżej w product.html, bezpośrednio pod snippetem Klaviyo Viewed Product:

<script type="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 type="text/javascript">
//Added to Cart
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 swój plik product.html.

Po zapisaniu wykonaj poniższe kroki testowania, aby potwierdzić, że zdarzenia Added to Cart docierają do Klaviyo.

Przetestuj i rozwiąż problemy ze snippetem "Dodano do koszyka"

Gdy dodasz snippet, powinien obserwować przycisk „Dodaj do koszyka” i śledzić zdarzenie Added to Cart za każdym razem, gdy odwiedzający z plikiem cookie kliknie ten przycisk.

Każde kliknięcie skonfigurowanego przycisku wysyła informacje o produkcie z fragmentu Wyświetlony produkt. Nie potwierdza to, że BigCommerce pomyślnie dodał produkt ani nie przechwytuje całej zawartości koszyka.

Aby to przetestować, otwórz stronę produktu w przeglądarce, w której Klaviyo Cię zidentyfikowało, na przykład po kliknięciu linku do Twojego sklepu w wiadomości Klaviyo Email. Kliknij przycisk „Dodaj do koszyka” przy produkcie, a następnie sprawdź, czy zdarzenie pojawiło się w Klaviyo:

1. W Klaviyo przejdź do Analityka > Metryki .
2. Wyczyść wszystkie filtry integracje BigCommerce, a następnie wyszukaj i otwórz Added to Cart. Ten fragment kodu tworzy metrykę API.
3. Kliknij kanał aktywności i poszukaj swojego zdarzenia testowego.

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 kodu aktywni on Site) działa — jest to konieczne, aby Added to Cart działało prawidłowo. Jest to dodawane automatycznie, gdy w ustawieniach integracje BigCommerce włączysz opcję Automatycznie dodaj javascript Klaviyo na stronie (zalecane). Sprawdź, czy działa, wykonując kroki opisane w sekcji potwierdzania instalacji śledzenia na stronie w naszym artykule o integracje 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 użyciem Added to Cart lub Started Checkout) możesz wykorzystać Klaviyo SMS oprócz e-maila. Ze względów związanych ze zgodnością z przepisami upewnij się, że w swojej sekwencji wysyłasz tylko 1 SMS, a jeśli używasz wielu typów sekwencji porzuconego koszyka zakupowego, upewnij się, że używasz SMS tylko w 1 z nich. Zanim dodasz SMS, zapoznaj się z wymaganiami dotyczącymi porzuconego koszyka zakupowego dla SMS, w tym z wymaganiami dotyczącymi zgody i czasu wysyłki.

W sekcji Start with the essentials w bibliotece znajdziesz standardową sekwencję przypomnień 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.

1. Gdy potwierdzisz, że Twoje zdarzenie testowe się pojawia, przejdź do Sekwencje i kliknij Utwórz sekwencję.
2. W sekcji Zapobieganie utracie sprzedaży wybierz szablon BigCommerce dla porzuconego koszyka zakupowego z wyzwalaczem Dodano do koszyka.

3. Nadaj nazwę swojej sekwencji i kliknij Użyj szablonu.

Szablon zawiera zalecane filtry i dynamiczną treść e-maili do spersonalizowanych wiadomości uzupełniających po porzuceniu koszyka. Przejrzyj wiadomości i potwierdź, że filtry wykluczają kupujących, którzy od rozpoczęcia sekwencji przeszli do realizacji zamówienia lub złożyli zamówienie. Jeśli korzystasz z Buy with Prime, dodaj filtry w następnej sekcji, zanim włączysz sekwencję.

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

Włącz sekwencję

1. Gdy zakończysz przeglądanie treści, czasu oraz filtrów sekwencji, kliknij Sprawdź i włącz w kreatorze sekwencji. Jeśli sekwencja ma już wiadomości w innym statusie, zamiast tego kliknij Zaktualizuj status.
2. Wybierz Na żywo i kliknij Zapisz. Kwalifikujące się wiadomości będą wysyłane automatycznie, gdy profile do nich dotrą.

Dodatkowe źródła