So erstellst du ein „Zum Warenkorb hinzugefügt“-Event für BigCommerce

Übersicht

Erfahre, wie du ein Ereignis Zum Warenkorb hinzugefügt für BigCommerce erstellst, das erfasst, wenn Kund*innen einen Artikel in den Warenkorb legen, und einen Warenkorbabbruch-Flow auslösen kann. Ereignisse Zum Warenkorb hinzugefügt werden nicht automatisch erfasst, wenn du BigCommerce integrierst. Du musst zuerst ein JavaScript-Snippet (in diesem Leitfaden enthalten) zu deinen BigCommerce-Theme-Dateien hinzufügen (und ggf. anpassen).

• Du musst das Event Added to Cart nicht erstellen, um einen Flow für Warenkorbabbruch zu senden; der Flow für Warenkorbabbruch mit Added to Cart ist getrennt vom Standard-Flow für Warenkorbabbruch, der durch Started Checkout ausgelöst wird.
• Die integrierte BigCommerce-Integration von Klaviyo erfasst bereits ein Started Checkout -Ereignis, wenn Kund*innen während des Checkout-Prozesses nach dem Hinzufügen von Artikel(n) in den Warenkorb ihre E-Mail-Adresse eingeben.

Bevor du anfängst

Das Ereignis Zum Warenkorb hinzugefügt wird nur für Benutzer*innen getrackt, für die zuvor von Klaviyo ein Cookie gesetzt wurde.

Damit das Zum Warenkorb hinzugefügt -Ereignis richtig funktioniert, muss das Tracking für Viewed Product bereits installiert sein. In der Regel installieren Klaviyo-Kund*innen dies während des BigCommerce-Integrationen-Prozesses. Die Anleitung findest du in unserem Integrationen-Artikel.

Code-Fragment hinzufügen

1. Öffne deine BigCommerce-Admin-Oberfläche und navigiere zu Storefront > My Themes.
2. Suche dein aktuelles Theme und klicke auf das Dropdown-Menü Advanced Settings.
3. Suche nach der Datei product.html und klicke darauf, um sie zu öffnen.
4. Füge das Snippet unten direkt unter dem Klaviyo-Snippet Angesehenes Produkt ein.

<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. Als Nächstes prüfst du, ob du dein Snippet ändern musst. Dafür musst du die ID des „In den Warenkorb“‑Buttons auf deiner Website prüfen und schauen, ob sie mit der unten im Snippet hervorgehobenen „In den Warenkorb“‑Variable übereinstimmt, deren Standardwert form-action-addToCart ist.
   

2. Um die ID des Buttons zu prüfen, eine der Produktseiten der Website öffnen, mit der rechten Maustaste auf den Button „In den Warenkorb“ klicken und Untersuchen auswählen.
   

3. 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“ in der Konsole hervorgehoben.
   

4. Die ID der Schaltfläche auf der hier gezeigten Seite entspricht form-action-addToCart, sodass keine Änderungen vorgenommen werden müssen.
   • Wenn die ID der Schaltfläche „Zum Warenkorb hinzufügen“ auf deiner Website nicht form-action-addToCart ist, musst du den Variablentext in den Anführungszeichen ändern, damit er der ID der Schaltfläche entspricht.
5. Wenn dein Sourcecode keine Button-ID anzeigt, springe zum nächsten Abschnitt und erfahre, wie du stattdessen ein alternatives Snippet mit Klassennotation anstelle von Button-Notation verwendest.
6. Wenn du fertig bist, speichere deine Datei product.html.

Du hast das Snippet hinzugefügt und wirst jetzt das Ereignis Added to Cart tracken.

Alternatives Snippet für die Schaltfläche „In den Warenkorb“ ohne eine Schaltflächen-ID

Aus Stilgründen verwenden einige Websites für Schaltflächen „Zum Warenkorb hinzufügen“ eine Klassen-Notation anstelle einer Schaltflächen-ID.

Wenn der Button „Add to Cart“ keine Button-ID hat (die sich anhand der Schritte im vorherigen Abschnitt ermitteln lässt) und stattdessen eine Klassen-Notation verwendet, sollte das alternative Code-Fragment unten verwendet werden, um das Ereignis Added to Cart zu aktivieren.

1. Wenn dein Button per Klassennotation definiert ist, füge das folgende alternative Snippet unten in deiner product.html -Datei ein:

<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. 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 dem Klassennamen für deine Schaltfläche entspricht.

2. Zum Beispiel wurde das Code-Fragment unten mit dem Classname-Wert btn product-form_cart-submit btn--secondary-accent geändert, der von doppelten Anführungszeichen umgeben ist.
   

3. Speichere deine Datei product.html

Sobald du speicherst, hast du das Snippet hinzugefügt und kannst jetzt das Event Added to Cart tracken.

Fehlerbehebung bei deinem Snippet „Zum Warenkorb hinzugefügt“

Nachdem du das Snippet hinzugefügt hast, sollte es die Schaltfläche „In den Warenkorb“ beobachten und immer dann ein Ereignis Added to Cart tracken, wenn eine Person mit Cookie auf diese Schaltfläche klickt.

Dieses Ereignis funktioniert ähnlich wie das Viewed Product -Ereignis. Jeder Artikel, den jemand dem Warenkorb hinzufügt, löst ein neues Ereignis aus. Diese Ereignisse kannst du wie folgt anzeigen:

1. Navigieren zu Analytics > Metriken in Klaviyo
2. Nach dem Ereignis suchen
3. Klicken auf Aktivitäts-Feed
   
   

Wenn du in deinem Konto keine Ereignisse vom Typ Added to Cart siehst, versuche Folgendes:

• Stell sicher, dass dein Klaviyo.js (auch als das aktiv auf der Website-Snippet bekannt) funktioniert, was erforderlich ist, damit Added to Cart korrekt funktioniert. Das hätte automatisch zu deiner Website hinzugefügt werden sollen, als du Klaviyo integriert hast. Du kannst aber überprüfen, ob es funktioniert, indem du die Schritte im Abschnitt Bestätigen der Installation des Onsite-Trackings unseres Artikels zur BigCommerce-Integrationen befolgst.
• Prüfe, ob dein Produkt angesehen -Tracking funktioniert, was auch erforderlich ist, damit Zum Warenkorb hinzugefügt ordnungsgemäß funktioniert. Dieses Snippet wird manuell hinzugefügt. Wie du es hinzufügst und testest, erfährst du im Abschnitt „Angesehenes Produkt“ unseres Artikels zu Integrationen.

Wenn weiterhin Probleme mit deinem Zum Warenkorb hinzugefügt -Snippet auftreten, könnte dies an einem Problem bei der Identifizierung der Schaltfläche „Zum Warenkorb hinzufügen“ liegen. Wende dich in diesem Fall bitte an den Klaviyo Support.

Der „Added to Cart“-Warenkorbabbruch-Flow

Beim Erstellen eines Flows zum Warenkorbabbruch (entweder mit Added to Cart oder Started Checkout) kannst du zusätzlich zur E-Mail auch Klaviyo SMS nutzen. Stelle aus Compliance-Gründen sicher, dass du in deinem Flow nur eine SMS sendest. Wenn du mehrere Arten von Flows zum Warenkorbabbruch verwendest, stelle außerdem sicher, dass du SMS nur in einem davon verwendest.

Im Abschnitt Essentials der Bibliothek findest du den Standard-Flow zur Erinnerung an Warenkorbabbrüche. Dieser Flow wird durch das Ereignis Started Checkout ausgelöst.

Um mit einem Warenkorbabbruch-Flow mit dem Added to Cart -Event zu starten, empfehlen wir, den vorgefertigten Flow aus Klaviyo’s Flow Library zu verwenden, in dem die passenden Flow-Filter bereits eingerichtet sind. Dieser Flow richtet sich in der Regel eher an Gelegenheits-Shopper*innen, die noch nicht mit dem Checkout begonnen haben.

Den Flow zum Warenkorbabbruch, der durch das Event Added to Cart ausgelöst wird, findest du im Zielbereich „Prevent lost sales“.

Wenn du das BigCommerce-Snippet Zum Warenkorb hinzugefügt implementiert hast, ist dieser Flow sofort einsatzbereit – mit allen empfohlenen Filtern und dynamischen E-Mail-Inhalten, die personalisierte Follow-up-E-Mails nach dem Hinzufügen zum Warenkorb ermöglichen.

Nutzt du „Kaufen mit Prime“ von Amazon?

Wenn du „Kaufen mit Prime“ zur Zahlung und Auftragsabwicklung für Produkte in deinem Shop verwendest, solltest du Folgendes tun:

• Integriere „Kaufen mit Prime“ mit Klaviyo, um die entsprechende Daten in deinem Klaviyo-Konto zu haben.
• Füge in deinem Flow für Abbrüche nach „Zum Warenkorb hinzugefügt“ die folgenden Flow-Filter hinzu, um zu verhindern, dass Kund*innen, die den Bezahlvorgang mit „Kaufen mit Prime“ gestartet oder abgeschlossen haben, falsche Nachrichten erhalten:
  
  • Bezahlvorgang gestartet (Kaufen mit Prime) keinmal seit Beginn dieses Flows UND
  • Bestellung aufgegeben (Kaufen mit Prime) keinmal seit Beginn dieses Flows.

Weitere Ressourcen