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

Geschätzt 6 Lesedauer in Minuten
|
Aktualisiert 29. Aug. 2024, 19:13 EST
Du wirst lernen

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

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

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".
    BigCommerce Laden mit Demo-Artikel Smith Journal, Rechtsklick-Menü öffnen auf Schaltfläche In den Warenkorb mit blau markierter Inspektion
  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.
    BigCommerce Geladener Demoartikel mit geöffneter Chrome-Konsole und hervorgehobener Schaltfläche "In den Warenkorb", form-action-addToCart.
  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

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.
    Code der Schaltfläche "In den Warenkorb" in der Chrome-Konsole mit der Schaltflächenklasse "btn product-form_cart-submit btn--secondary-accent", gelb hervorgehoben
    • 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

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
    Zum Warenkorb hinzugefügt Metrik Aktivitäts-Feed in Klaviyo, Liste zeigt Profilnamen, die kürzlich zum Warenkorb hinzugefügt wurden

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

Wenn du immer noch Probleme mit deinem "In den Warenkorb" -Snippet hast, könnte es daran liegen, dass der "In den Warenkorb"-Button nicht erkannt wird. In diesem Fall wende dich bitte an den Kontakt Klaviyo Support

Die "In den Warenkorb" Warenkorbabbruch Flow

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.

Karte für Standard Warenkorbabbruch Erinnerung Flow für BigCommerce in der Klaviyo Flow Bibliothek

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

Karte zum Hinzufügen Warenkorbabbruch Erinnerung Flow für BigCommerce in der Klaviyo Flow Bibliothek

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?

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

Zusätzliche Ressourcen

War dieser Artikel hilfreich?
Nutze dieses Formular nur für Feedback zu Artikeln. So kontaktierst du den Support.

Mehr von Klaviyo entdecken

Community
Vernetze dich mit Kolleg*innen, Partner*innen und Klaviyo-Expert*innen, um dich inspirieren zu lassen, Erkenntnisse auszutauschen und Antworten auf deine Fragen zu erhalten.
Live-Schulung (EN) ↗
Nimm an einer Live-Sitzung mit Klaviyo-Expert*innen teil, um mehr über Best Practices, die Einrichtung wichtiger Funktionen und mehr zu erfahren.
Support

Kontaktiere den Support über dein Konto.

Support per E-Mail (kostenlose Testversion und kostenpflichtige Konten) Verfügbar 24/7

Chat- / virtuelle Unterstützung
Verfügbarkeit abhängig von Standort und Abonnementtyp