Jak utworzyć zdarzenie "Added to Cart" dla BigCommerce?

Czego się dowiesz

Dowiedz się, jak utworzyć zdarzenie Added to Cart dla BigCommerce, które śledzi, kiedy klient dodaje produkt do koszyka i może wywołać porzucony koszyk zakupowy. Zdarzenia dodane do koszyka nie są automatycznie śledzone podczas integracji z BigCommerce; musisz najpierw dodać (i potencjalnie zmodyfikować) fragment JavaScript (zawarty w tym przewodniku) do plików motywu BigCommerce.

• Nie musisz tworzyć zdarzenia Added to Cart, aby wysłać sekwencję porzucony koszyk zakupowy; sekwencja Added to Cart porzucony koszyk zakupowy jest oddzielna od standardowej sekwencji porzucony koszyk zakupowy, która jest wyzwalana przez Started strona płatności kasa. 
• KlaviyoWbudowana integracja BigCommerce śledzi już zdarzenie Rozpoczęta strona płatności kasa, gdy klient wprowadza swój adres e-mail podczas procesu strona płatności kasa po dodaniu produktów do koszyka. 

Kilka słów na początek

Zdarzenie Dodano do koszyka jest śledzone tylko dla 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świetlanych produktów. Zazwyczaj klient Klaviyo instaluje to podczas procesu integracji BigCommerce, a instrukcje można znaleźć w naszym artykule na temat integracji. 

Dodaj fragment kodu

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

   <script text="text/javascript"> 
    //Inicjalizacja obiektu Klaviyo natychmiast po załadowaniu strony
   !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>

5. Następnie sprawdź, czy musisz zmodyfikować swój snippet. Aby to zrobić, musisz sprawdzić identyfikator przycisku "Dodaj do koszyka" na swojej stronie i sprawdzić, czy pasuje on do zmiennej "Dodaj do koszyka" podświetlonej w poniższym fragmencie, której domyślną wartością jest form-action-addToCart.
   
6. Aby sprawdzić identyfikator przycisku, otwórz jedną ze stron produktów w witrynie, kliknij prawym przyciskiem myszy przycisk "Dodaj do koszyka" i wybierz opcję Sprawdź.
   
7. Otworzy się konsola pokazująca kod źródłowy przycisku "Dodaj do koszyka". Poniższy obraz przedstawia identyfikator przycisku "Add to Cart" podświetlonego w konsoli.
   
8. Identyfikator przycisku na pokazanej tutaj stronie jest zgodny z form-action-addToCart, więc nie trzeba wprowadzać żadnych zmian.
   • Jeśli identyfikator przycisku "Dodaj do koszyka" w Twojej witrynie nie jest form-action-addToCart, musisz zmienić tekst zmiennej w cudzysłowie, aby pasował do identyfikatora przycisku
9. Jeśli twój kod źródłowy nie pokazuje identyfikatora przycisku, przejdź do następnej sekcji i dowiedz się, jak używać alternatywnego fragmentu kodu z notacją klasy zamiast notacji przycisku. 
10. Po zakończeniu zapisz plik product.html. 

Ukończyłeś dodawanie fragmentu i będziesz teraz śledzić zdarzenie Dodano do koszyka. 

Alternatywny fragment kodu dla przycisku "Dodaj do koszyka" bez identyfikatora przycisku

Ze względów stylistycznych niektóre witryny używają notacji klasy zamiast identyfikatora przycisku dla przycisków "Dodaj do koszyka".

Jeśli twój przycisk "Dodaj do koszyka" nie ma identyfikatora przycisku (który możesz określić, wykonując czynności opisane w poprzedniej sekcji) i zamiast tego używa notacji klasy, powinieneś użyć alternatywnego wycinka kodu źródłowego poniżej, aby włączyć zdarzenie Dodano do koszyka. 

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

   <script text="text/javascript"> 
    //Inicjalizacja obiektu Klaviyo natychmiast po załadowaniu strony
   !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>
   

2. Kod ten prawdopodobnie będzie musiał zostać zmodyfikowany o nazwę twojej klasy. Porównaj nazwę klasy przycisku między cudzysłowami, zaznaczoną w poniższym przykładzie, z zawartością między nawiasami po getElementsByClassName w wycinku kodu źródłowego powyżej. Na przykład nazwa klasy na zrzucie ekranu to btn product-form_cart-submit btn--secondary-accent, a klasa we fragmencie nosi nazwę add-to-cart.
   
   
   • Jeśli te dwa elementy nie pasują do siebie, zmień wycinek kodu źródłowego, aby odzwierciedlić nazwę klasy przycisku.
3. Na przykład wycinek kodu źródłowego poniżej został zmodyfikowany wartością classname btn product-form_cart-submit btn--secondary-accent otoczoną podwójnymi cudzysłowami.
   
4. Zapisz plik product.html

Po zapisaniu ukończyłeś dodawanie fragmentu i możesz teraz śledzić zdarzenie dodane do koszyka. 

Rozwiązywanie problemów z "Dodano do koszyka" snippet

Po dodaniu fragmentu kodu, powinien on obserwować przycisk ""Dodaj do koszyka" i śledzić zdarzenie " Dodano do koszyka " za każdym razem, gdy użytkownik cookie kliknie ten przycisk. 

To zdarzenie działa podobnie do zdarzenia Wyświetlany produkt. Każdy element dodany do koszyka wywoła nowe zdarzenie. Możesz przeglądać te wydarzenia przez:

1. Nawigacja do dane analityczne > metryka w Klaviyo
2. Wyszukiwanie wydarzenia
3. Kliknięcie kanału aktywności
   
   

Jeśli nie widzisz zdarzeń dodawania do koszyka na swoim koncie, spróbuj wykonać następujące czynności:

• Upewnij się, że Twój Klaviyo.js (znany również jako aktywni on Site snippet) działa, co jest niezbędne do prawidłowego działania Added to Cart. Powinien on zostać dodany do Twojej witryny automatycznie podczas integracji z Klaviyo, ale możesz sprawdzić, czy działa, wykonując czynności opisane w sekcji potwierdzającej instalację śledzenia w witrynie w naszym artykule na temat integracji BigCommerce .
• Sprawdź, czy działa funkcja Śledzenie przeglądanych produktów , która jest również niezbędna do prawidłowego działania funkcji Dodaj do koszyka . Ten snippet jest dodawany ręcznie i możesz dowiedzieć się, jak go dodać i przetestować w sekcji Wyświetlany produkt naszego artykułu o integracjach. 

The "Dodano do koszyka" porzucony koszyk zakupowy sekwencja

Tworząc sekwencję porzucony koszyk zakupowy (za pomocą opcji Dodano do koszyka lub Rozpoczęto stronę płatności kasa) możesz wykorzystać Klaviyo SMS jako dodatek do wiadomości e-mail. Ze względu na zgodność z przepisami, upewnij się, że wysyłasz tylko jeden SMS w swojej sekwencji, a jeśli używasz wielu rodzajów porzucony koszyk zakupowy sekwencja, upewnij się, że używasz tylko SMS w jednym z nich. 

W sekcji Essentials biblioteki znajdziesz standardowe porzucony koszyk zakupowy przypomnienie sekwencja. Ta sekwencja jest uruchamiana przez zdarzenie Uruchomiona strona płatności kasa.

Aby rozpocząć sekwencję porzucony koszyk zakupowy przy użyciu zdarzenia Dodano do koszyka, zalecamy skorzystanie z wbudowanej, wstępnie zbudowanej sekwencji dostępnej w Klaviyo bibliotece sekwencji, która ma już skonfigurowany odpowiedni filtr sekwencji. Ta sekwencja jest skierowana do bardziej przypadkowych potencjalnych kupujących, którzy jeszcze nie rozpoczęli strony płatności kasa.

Sekwencję porzucony koszyk zakupowy wyzwalaną przez zdarzenie Dodano do koszyka znajdziesz w sekcji "Zapobiegaj utracie sprzedaży". 

Jeśli zaimplementowałeś snippet BigCommerce Added to Cart, ta sekwencja będzie gotowa do pracy ze wszystkimi zalecanymi filtrami i dynamiczną treścią wiadomości e-mail gotową do obsługi spersonalizowanych wiadomości e-mail dotyczących koszyka.

Korzystasz z usługi Amazon Buy with Prime?

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

• Zintegruj 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
  • Złożono zamówienie (Buy with Prime) zero razy od rozpoczęcia tej sekwencji.

Dodatkowe źródła

• Tworzenie porzucony koszyk zakupowy sekwencja
• BigCommerce dane referencyjne