Wie man ein "Added to Cart" Ereignis für BigCommerce erstellt

Du wirst lernen

Erfahre, wie du ein Added to Cart-Ereignis für BigCommerce erstellst, das nachverfolgt, wenn ein Kunde einen Artikel in seinen Warenkorb legt und einen Warenkorbabbruch Flow auslösen kann. Ereignisse, die in den Warenkorb gelegt werden, werden bei der Integration mit BigCommerce nicht automatisch verfolgt. Du musst zuerst ein JavaScript-Snippet (das in diesem Leitfaden enthalten ist) zu deinen BigCommerce-Themedateien hinzufügen (und möglicherweise ändern).

• Du musst das Ereignis "In den Warenkorb" nicht erstellen, um einen Warenkorbabbruch-Flow zu senden. Der Warenkorbabbruch-Flow ist vom Standard-Warenkorbabbruch-Flow getrennt, der durch den gestarteten Bezahlvorgang ausgelöst wird. 
• KlaviyoDie integrierte Integration von BigCommerce erfasst bereits das Ereignis "Bezahlvorgang gestartet", wenn ein Kunde während des Bezahlvorgangs seine E-Mail eingibt, nachdem er Artikel in den Warenkorb gelegt hat. 

Bevor du beginnst

Das Ereignis "In den Warenkorb gelegt" wird nur für Nutzer getrackt, die zuvor von Klaviyo gekocht wurden. 

Du musst die Produktverfolgung bereits installiert haben, damit das Ereignis " In den Warenkorb" richtig funktioniert. Normalerweise installiert Klaviyo Kunde dies während des BigCommerce Integrationsprozesses und die Anleitung findest du in unserem Integrationsartikel. 

Füge das Snippet hinzu

1. Öffne deinen BigCommerce-Admin und navigiere zu Storefront > My Themes.
2. Suche dein aktuelles Thema und klicke auf das Dropdown-Menü Erweiterte Einstellungen.
3. Suche nach der Datei product.html und klicke darauf, um sie zu öffnen.
4. Füge das Snippet unten direkt unter dem Klaviyo Viewed Product Snippet ein.

   <script text="text/javascript"> 
   //Initialisiere das Klaviyo Objekt sofort beim Laden der Seite
   !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">
   / / Zum Warenkorb hinzugefügt
   var Klaviyo = window.Klaviyo || [];
   document.getElementById("form-action-addToCart").addEventListener('click',function (){
      klaviyo.track("Added to Cart", item);
   });
   </script>

5. Prüfe als nächstes, ob du dein Snippet ändern musst. Dazu musst du die ID des "Add to Cart"-Buttons auf deiner Website überprüfen und sehen, ob sie mit der "Add to Cart"-Variable übereinstimmt, die im folgenden Snippet hervorgehoben ist.
   
6. Um die ID der Schaltfläche zu überprüfen, öffne eine der Produktseiten deiner Website, klicke mit der rechten Maustaste auf die Schaltfläche "In den Warenkorb" und wähle "Überprüfen".
   
7. Die Konsole wird geöffnet und zeigt den Quellcode der Schaltfläche "In den Warenkorb" an. Das folgende Bild zeigt die ID der Schaltfläche "In den Warenkorb", die in der Konsole hervorgehoben ist.
   
8. Die ID der Schaltfläche auf der hier gezeigten Seite stimmt mit form-action-addToCart überein, sodass keine Änderungen vorgenommen werden müssen.
   • Wenn die ID der Schaltfläche "In den Warenkorb" auf deiner Website nicht form-action-addToCart lautet, musst du den variablen Text innerhalb der Anführungszeichen ändern, damit er der ID der Schaltfläche entspricht
9. Wenn in deinem Quellcode keine Button-ID angezeigt wird, fahre mit dem nächsten Abschnitt fort und lerne, wie du ein alternatives Snippet mit Klassennotation anstelle der Button-Notation verwenden kannst. 
10. Wenn du fertig bist, speichere deine product.html-Datei. 

Du hast das Hinzufügen des Snippets abgeschlossen und verfolgst nun das Ereignis "In den Warenkorb". 

Alternatives Snippet für "In den Warenkorb" Button ohne Button-ID

Aus stilistischen Gründen verwenden einige Websites eine Klassennotation anstelle einer Button-ID für "In den Warenkorb"-Buttons.

Wenn deine "In den Warenkorb"-Schaltfläche keine Schaltflächen-ID hat (die du mit den Schritten im vorherigen Abschnitt ermitteln kannst) und stattdessen eine Klassennotation verwendet, solltest du das alternative Code-Fragment unten verwenden, um das Ereignis "In den Warenkorb" zu aktivieren. 

1. Wenn deine Schaltfläche durch eine Klassennotation definiert ist, füge den folgenden alternativen Schnipsel am Ende deiner Datei product.html ein:

   <script text="text/javascript"> 
   //Initialisiere das Klaviyo Objekt sofort beim Laden der Seite
   !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">
   //Betrachtetes Produkt
   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. Dieser Code muss wahrscheinlich mit deinem Klassennamen geändert werden. Vergleiche den Klassennamen deiner Schaltfläche zwischen den Anführungszeichen, der im folgenden Beispiel hervorgehoben ist, mit dem Inhalt zwischen den Klammern nach getElementsByClassName im obigen Code-Fragment. Zum Beispiel lautet der Klassenname im Screenshot btn product-form_cart-submit btn--secondary-accent und die Klasse im Snippet heißt add-to-cart.
   
   
   • Wenn diese beiden nicht übereinstimmen, ändere das Code-Fragment so, dass es den Klassennamen für deinen Button wiedergibt.
3. Das folgende Code-Fragment wurde zum Beispiel mit dem Klassennamen btn product-form_cart-submit btn--secondary-accent, umgeben von doppelten Anführungszeichen, geändert.
   
4. Speichere deine Datei product.html

Sobald du speicherst, hast du das Snippet hinzugefügt und kannst nun das Ereignis "In den Warenkorb" verfolgen. 

Fehlerbehebung für dein "In den Warenkorb" Snippet

Nachdem du das Snippet hinzugefügt hast, sollte es den "Add to Cart''-Button beobachten und ein Added to Cart-Ereignis verfolgen, wenn ein gekookter Besucher auf diesen Button klickt. 

Dieses Ereignis funktioniert ähnlich wie das Ereignis " Gesehenes Produkt". Jeder Artikel, den jemand in seinen Warenkorb legt, löst ein neues Ereignis aus. Du kannst diese Veranstaltungen einsehen, indem du:

1. Navigieren zu Analytics > Metrik in Klaviyo
2. Suche nach dem Ereignis
3. Anklicken von Activity Feed
   
   

Wenn du in deinem Konto keine "In den Warenkorb" -Ereignisse siehst, versuche Folgendes:

• Vergewissere dich, dass deine Klaviyo.js (auch bekannt als Active on Site Snippet) funktioniert, denn sie ist notwendig, damit Added to Cart richtig funktioniert. Dies sollte bei der Integration mit Klaviyo automatisch zu deiner Website hinzugefügt worden sein. Du kannst aber überprüfen, ob es funktioniert, indem du die Schritte im Abschnitt "Bestätigen der Onsite-Tracking-Installation" in unserem Artikel zur BigCommerce-Integration befolgst.
• Überprüfe, ob die Nachverfolgung der angesehenen Produkte funktioniert, was auch notwendig ist, damit "In den Warenkorb" richtig funktioniert. Dieses Snippet wird manuell hinzugefügt. Wie du es hinzufügst und testest, erfährst du im Abschnitt Gesehenes Produkt in unserem Integrationsartikel. 

Die "In den Warenkorb" Warenkorbabbruch Flow

Wenn du einen Warenkorbabbruch-Flow erstellst (entweder mit "In den Warenkorb gelegt" oder "Bezahlvorgang gestartet"), kannst du zusätzlich zur E-Mail auch Klaviyo SMS nutzen. Achte aus Gründen der Compliance darauf, dass du nur eine SMS in deinem Flow versendest, und wenn du mehrere Arten von Warenkorbabbruch-Flows verwendest, stelle sicher, dass du SMS nur in einer davon verwendest. 

Im Abschnitt Essentials der Bibliothek findest du den Standard Warenkorbabbruch reminder Flow. Dieser Flow wird durch das Ereignis "Gestarteter Bezahlvorgang" ausgelöst.

Um mit einem Warenkorbabbruch-Flow zu beginnen, der das Ereignis "In den Warenkorb gelegt" verwendet, empfehlen wir dir, den vorgefertigten Flow aus der Klaviyo's Flow Bibliothek zu verwenden, der bereits den richtigen Flow-Filter enthält. Dieser Flow zielt eher auf gelegentliche potenzielle Käufer ab, die den Bezahlvorgang noch nicht begonnen haben.

Der Warenkorbabbruch Flow, der durch das Ereignis "In den Warenkorb gelegt" ausgelöst wird, findet sich im "Zielbereich Verhindern von Umsatzverlusten". 

Wenn du das Snippet BigCommerce Added to Cart implementiert hast, ist dieser Flow mit allen empfohlenen Filtern und dynamischen E-Mail-Inhalten bereit, um personalisierte Warenkorb-Follow-up-E-Mails zu erstellen.

Nutzt du Amazon Buy mit Prime?

Wenn du "Kaufen mit Prime" für die Bezahlung und Abwicklung der Produkte in deinem Laden nutzt, solltest du das tun:

• Integriere Buy with Prime mit Klaviyo , um Buy with Prime-Daten in dein Klaviyo-Konto zu bringen.
• Füge für deinen abgebrochenen "In den Warenkorb" Flow den folgenden Flow-Filter hinzu, um Kunden, die einen Bezahlvorgang gestartet oder über Kaufen mit Prime eingekauft haben, davon auszuschließen, falsche Nachrichten zu erhalten:
  
  • Habe den Bezahlvorgang (Kaufen mit Prime) null Mal gestartet , seit ich diesen Flow gestartet habe UND
  • Bestellt (Kaufen mit Prime) null Mal seit Beginn dieses Flow.

Zusätzliche Ressourcen

• Warenkorbabbruch Flow erstellen
• BigCommerce Daten-Referenz