So erstellst du ein Ereignis „Zum Warenkorb hinzugefügt“ für Shopify manuell

Übersicht

Hier erfährst du, wie du manuell ein Ereignis Zum Warenkorb hinzugefügt für Shopify erstellst, um zu verfolgen, wann Kund*innen einen Artikel in den Warenkorb legen. Dieses Ereignis kannst du zum Auslösen eines Warenkorbabbruch-Flows nutzen. 

Zum Warenkorb hinzugefügt ist nicht identisch mit dem Klaviyo-Ereignis Bezahlvorgang gestartet. Bezahlvorgang gestartet wird ausgelöst, wenn Kund*innen Artikel in ihren Warenkorb legen, beim Bezahlvorgang ihre E-Mail-Adresse eingeben und den Bezahlvorgang fortsetzen. Dies erfolgt später im Funnel. Zum Warenkorb hinzugefügt wird dagegen ausgelöst, sobald Kund*innen Artikel in ihren Warenkorb legen. 

Bevor du anfängst

• In unserem Artikel Erste Schritte mit Shopify findest du eine schrittweise Anleitung zur Integration. Diese Anleitung solltest du lesen, bevor du mit diesem Artikel fortfährst.
• Vergewissere dich, dass du das Onsite-Tracking von Klaviyo bereits aktiviert hast (einschließlich des Trackings für „Produkt aufgerufen“), damit das Ereignis „Zum Warenkorb hinzugefügt“ richtig funktioniert.
• Beachte, dass mit dem Ereignis „Zum Warenkorb hinzugefügt“ nur Benutzer*innen getrackt werden, für die zuvor von Klaviyo ein Cookie gesetzt wurde.

Ereignis „Zum Warenkorb hinzugefügt“ erstellen

Die Erstellung des Ereignisses Zum Warenkorb hinzugefügt erfolgt in drei Schritten: 

1. Auswählen, wo das Code-Fragment platziert werden soll
2. Das Fragment zu deinem Online-Shop hinzufügen
3. Das Code-Fragment testen

Wo füge ich das Fragment ein?

Füge das Fragment sowohl auf deiner Standardproduktseite als auch auf all deinen anderen Produktseiten ein.

Wenn dein Shop über benutzerdefinierte Liquid-Blöcke verfügt, solltest du einen solchen Block für das Fragment verwenden 

1. Navigiere in Shopify zu Onlineshop > Themes.
2. Suche dein Theme und klicke auf Anpassen.
3. Klicke oben auf der Seite auf das Drop-down-Menü Homepage.
4. Wähle Produkte > Standardprodukt aus, um zu deiner Standardproduktseite zu gelangen.
5. Klicke in der linken Seitenleiste auf Abschnitt hinzufügen und wähle dann Benutzerdefiniertes Liquid aus.
6. Füge das bereitgestellte Fragment in das Feld ein.
7. Klicke oben rechts auf Speichern.
8. In der linken Seitenleiste sollte dein neuer benutzerdefinierter Liquid-Block für Zum Warenkorb hinzugefügt automatisch unter den anderen Abschnitten auf der Seite angezeigt werden.
   • Wenn der Block Zum Warenkorb hinzugefügt verschoben werden muss, bewege den Mauszeiger über den Block und klicke auf die sechs Punkte, um ihn unter die anderen Abschnitte zu ziehen.
     
     

Wenn dein Shop keine benutzerdefinierten Liquid-Blöcke enthält, solltest du das Fragment in deiner theme.liquid-Datei platzieren

1. Navigiere in Shopify zu Onlineshop > Themes.
2. Suche dein Theme und klicke auf Anpassen.
3. Klicke auf die drei Punkte am oberen Rand und wähle Code bearbeiten aus.
4. Öffne die Datei theme.liquid.
5. Füge das bereitgestellte Fragment nach dem anderen Code und vor dem schließenden Tag </body> ein.
   
6. Füge oberhalb des Fragments das folgende öffnende Tag ein: {% if product %}
   
7. Füge direkt nach dem Fragment das folgende schließende Tag ein: {% endif %}
8. Deine Datei sollte wie folgt aussehen:
   
9. Klicke auf Speichern.

Fragment zu deiner Website hinzufügen

Das folgende Fragment Zum Warenkorb hinzugefügt sollte für die meisten Shopify-Shops funktionieren.

Füge das unten stehende Fragment in deinem Shopify-Shop an der oben angegebenen Stelle ein.

<script>
  window.addEventListener('load', function() {
  var _learnq = window._learnq || [];
  function addedToCart() {
   fetch(`${window.location.origin}/cart.js`)
   .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    if (klAjax) {
       _learnq.push(['track', 'Added to Cart', cart]);
       klAjax = false;
      }
   }))
  };
  (function (ns, fetch) {
    ns.fetch = function() {
      const response = fetch.apply(this, arguments);
      response.then(res => {
        if (`${window.location.origin}/cart/add.js`
          .includes(res.url) && res.url !== '') {
              addedToCart()
        }
      });
      return response
     }
  }(window, window.fetch));
  var klAjax = true;
  var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
  for (var i = 0; i < atcButtons.length; i++) { 
    atcButtons[i].addEventListener("click", function() {
      if (klAjax) {
        _learnq.push(['track', 'Added to Cart', item]);
        klAjax = false;
      }
    })
  }
  });
</script>

Wenn du fertig bist, teste das Ereignis anhand der Anleitung im nächsten Abschnitt.

Das Ereignis „Zum Warenkorb hinzugefügt“ testen

Wichtig zu wissen: Klaviyo verfolgt nur „bekannte Browser“ oder diejenigen, für die ein Cookie gesetzt wurde (durch Klicken auf eine E-Mail, Ausfüllen eines Formulars usw.). Aus diesem Grund kann es vorkommen, dass Ereignisse für Zum Warenkorb hinzugefügt nicht so schnell in deinem Konto angezeigt werden, wie du es erwartest. Mehr über das Tracking durch Klaviyo erfährst du in unserem Artikel über Onsite-Tracking. 

Um dein Ereignis Zum Warenkorb hinzugefügt zu testen, musst du manuell ein Cookie für deine E-Mail-Adresse setzen. Befolge dazu die folgenden Schritte:

1. Navigiere zu deiner Website.
2. Füge auf deiner Startseite den folgenden Text an das Ende der URL an und ersetze  testing.email@gmail.com durch deine E-Mail Adresse:
   ?utm_email=testing.email@gmail.com
   
   
3. Lade die Seite neu.
4. Navigiere zu einer Produktseite auf deiner Website und klicke auf deine Schaltfläche In den Warenkorb.
5. Suche in Klaviyo nach deiner E-Mail Adresse.
   

Du solltest sehen, dass ein Klaviyo-Profil für dich erstellt wurde (falls noch nicht vorhanden) und dass das Ereignis Zum Warenkorb hinzugefügt in deinem Aktivitäts-Feed nachverfolgt wurde.

Fehlerbehebung beim Tracking von „Zum Warenkorb hinzugefügt“ mit dem angegebenen Fragment

Wenn du beim Tracking von Zum Warenkorb hinzugefügt mit dem angegebenen Fragment auf Probleme stößt, kannst du die zwei zusätzlichen Fragmente unten ausprobieren, die wir als Fragment 2 und Fragment 3 bezeichnen. Bevor du ein neues Fragment testest, musst du zuerst das Fragment entfernen, das nicht funktioniert hat.

Wähle ein Backup-Fragment zum Testen aus

Verwendet dein Shop eine Schaltflächen-ID, um die Schaltfläche In den Warenkorb zu definieren? Wenn dies der Fall ist, ‌versuche es mit Fragment 2. Wenn die Schaltfläche In den Warenkorb stattdessen durch eine Klassennotation definiert ist, solltest du Fragment 3 verwenden. So findest du heraus, ob dein Shop eine Schaltflächen-ID oder eine Klassennotation verwendet:

1. 1. Öffne eine der Produktseiten deiner Website. 
   2. Klicke mit der rechten Maustaste auf die Schaltfläche „In den Warenkorb“ und wähle Untersuchen aus.
   3. Die Konsole wird geöffnet und zeigt den Quellcode der Schaltfläche „In den Warenkorb“ auf der Registerkarte Elemente an.
   4. Auf der Registerkarte Elemente könnte dein Code etwa so aussehen:
      
   5. Beachte, dass die Schaltfläche „Zum Warenkorb hinzufügen“ keine Schaltflächen-ID hat (die etwas wie id = "button_ID_name" enthalten würde). Stattdessen wird sie durch eine Klassennotation referenziert (class= "btn product-form_cart-submit btn–secondary-accent").

Fragment 2

Wenn die Schaltfläche In den Warenkorb durch eine Schaltflächen-ID definiert ist, füge das unten stehende Fragment zusammen mit allen erforderlichen Tags in deinem Shopify-Shop an der Stelle ein, die du im Abschnitt „Wo füge ich das Fragment ein?“ ermittelt hast.

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

Dieses Fragment muss wahrscheinlich geändert werden, da die Variable Add to Cart im Fragment mit der auf deiner Website verwendeten Schaltflächen-ID übereinstimmen muss.

Die Variable Add to Cart , deren Standardname AddToCart lautet, ist im folgenden Fragment hervorgehoben:

Die Überprüfung der ID der Schaltfläche erfordert die gleichen Schritte wie die Überprüfung auf das Vorhandensein einer Schaltflächen-ID auf deiner Website: 

1. Öffne eine der Produktseiten deiner Website.
2. Klicke mit der rechten Maustaste auf die Schaltfläche „In den Warenkorb“ und wähle Untersuchen aus.
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.
   
   Die ID der Schaltfläche auf der hier gezeigten Seite (addToCart-product-template) unterscheidet sich von der Variablen im Standard-Fragment (AddToCart). 
4. Wenn sie nicht übereinstimmen, ändere das Fragment so, dass es der ID der Schaltfläche entspricht. Das geänderte Fragment unseres Beispiels sieht wie folgt aus:
   

Fragment 3

Wenn die Schaltfläche In den Warenkorb durch eine Klassennotation definiert ist, füge das unten stehende Fragment zusammen mit allen erforderlichen Tags in deinem Shopify-Shop an der Stelle ein, die du im Abschnitt „Wo füge ich das Fragment ein?“ ermittelt hast.

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

Dieses Fragment muss wahrscheinlich geändert werden, da die Variable Add to Cart im Fragment mit der auf deiner Website verwendeten Klasse übereinstimmen muss.

1. Öffne eine der Produktseiten deiner Website.
2. Klicke mit der rechten Maustaste auf die Schaltfläche „In den Warenkorb“ und wähle Untersuchen aus.
3. Die Konsole wird geöffnet und zeigt den Quellcode der Schaltfläche „In den Warenkorb“ an. Das folgende Bild zeigt die Klasse der Schaltfläche „In den Warenkorb“ in der Konsole hervorgehoben.
   
4. Vergleiche den Code der Schaltfläche zwischen den Anführungszeichen, der im obigen Beispiel hervorgehoben ist, mit dem Inhalt zwischen den Klammern nach getElementsByClassName im obigen Code-Fragment. Die im Screenshot aufgeführte Klasse ist zum Beispiel btn product-form_cart-submit btn--secondary-accent und die im Fragment aufgeführte Variable ist add-to-cart.
5. Wenn sie nicht übereinstimmen, ändere das Fragment so, dass es der Klasse der Schaltfläche entspricht. Das geänderte Fragment unseres Beispiels sieht wie folgt aus:
   

Wenn du nach dem Ausprobieren dieser Optionen weiterhin Probleme beim Tracking von Zum Warenkorb hinzugefügt hast, könnte dies an einem Problem bei der Identifizierung der Schaltfläche Zum Warenkorb hinzugefügt liegen. Wende dich in diesem Fall bitte an den Klaviyo Support.

Nächster Schritt: Flow beim Abbruch nach „Zum Warenkorb hinzugefügt“ aktivieren

Der standardmäßige Warenkorbabbruch-Flow von Klaviyo wird durch das Ereignis Bezahlvorgang gestartet ausgelöst, während der Warenkorbabbruch-Flow nach Zum Warenkorb hinzugefügt sich an Gelegenheitskäufer richtet, die noch nicht mit dem Bezahlvorgang begonnen haben.

Um diesen Flow zu aktivieren, empfehlen wir die Verwendung des vorkonfigurierten Flows, der in der Flow-Bibliothek von Klaviyo verfügbar ist:

1. Navigiere zur Flow-Bibliothek von Klaviyo.
2. Klicke in den Bereich „Umsatzeinbußen verhindern“.
3. Wähle einen Flow vom Typ Auslöser: Zum Warenkorb hinzugefügt, Warenkorbabbruch-Erinnerung aus. Es gibt zwei Optionen: entweder nur E-Mail oder E-Mail und SMS.
   
4. Wenn du das Ereignis Zum Warenkorb hinzugefügt erstellt hast, ist dieser Flow mit allen empfohlenen Filtern und dynamischen E-Mail-Inhalten ausgestattet, um personalisierte Follow-up-Nachrichten nach einem Warenkorbabbruch zu versenden.

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 entsprechende Daten in dein Klaviyo-Konto zu leiten.
• 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

Ergebnis 

Du hast nun ein Shopify-Ereignis Zum Warenkorb hinzugefügt erstellt und getestet und einen Flow beim Abbruch nach Zum Warenkorb hinzugefügt aktiviert. 

Weitere Ressourcen

• Erste Schritte mit dem Warenkorbabbruch-Flow
• Shopify: Datenübersicht
• Fehlerbehebung bei deiner Shopify-Integration