So erstellst du manuell ein „Added to Cart“-Ereignis für Shopify

Das wirst du lernen

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

Added to Cart ist nicht mit dem Klaviyo Ereignis Started Checkout identisch. Started Checkout wird ausgelöst, wenn Kund*innen Artikel in ihren Warenkorb legen, beim Bezahlvorgang ihre E-Mail-Adresse eingeben und dann den Bezahlvorgang fortsetzen. Dies erfolgt weiter unten im Funnel, während Added to Cart ausgelöst wird, sobald Kund*innen Artikel in ihren Warenkorb legen. 

Bevor du loslegst

• In unserem Artikel Erste Schritte mit Shopify findest du eine schrittweise Anleitung zur Integration. Lies diese, 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 „Viewed Product“), damit das „Added to Cart“-Ereignis richtig funktioniert.
• Beachte, dass mit dem „Added to Cart“-Ereignis nur Benutzer*innen verfolgt 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 für das Fragment verwenden. 

1. Navigiere in Shopify zu Online Store > Themes (Designs).
2. Suche dein Design und klicke auf Customize (Anpassen).
3. Klicke oben auf der Seite auf das Dropdown-Menü Home page (Startseite).
4. Wähle Products (Produkte) > Default product (Standardprodukt) aus, um zu deiner Standardproduktseite zu gelangen.
5. Klicke in der linken Seitenleiste auf Add section (Abschnitt hinzufügen) und wähle dann Custom Liquid (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 Online Store > Themes (Designs).
2. Suche dein Design und klicke auf Customize (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 allen anderen Codes 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 Anweisungen im nächsten Abschnitt.

Das Ereignis „Zum Warenkorb hinzugefügt“ testen

Es ist wichtig zu wissen, dass Klaviyo nur „bekannte Browser“ oder diejenigen, für die ein Cookie gesetzt wurde (durch Klicken auf eine E-Mail, Ausfüllen eines Formulars usw.), nachverfolgt. Aus diesem Grund kann es vorkommen, dass Ereignisse vom Typ Zum Warenkorb hinzugefügt nicht so schnell in deinem Konto angezeigt werden, wie du es erwartest. Um mehr darüber zu erfahren, für wen Klaviyo ein Tracking durchführt, lies unseren 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 Folgendes 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.

Hast du Probleme beim Tracking von „Zum Warenkorb hinzugefügt“ mit dem angegebenen Fragment?

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

Bestimmen, welches Backup-Fragment ausprobiert werden soll

Verwendet dein Shop eine Schaltflächen-ID, um die Schaltfläche In den Warenkorb zu definieren? Wenn die Antwort ja lautet, ‌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 der Konsole an.
   4. Auf der Registerkarte Elemente könnte dein Code in etwa so aussehen:
      
   5. Beachte, dass diese Schaltfläche „In den Warenkorb“ 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?“ festgelegt 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?“ festgelegt 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 verschiedenen Optionen 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: den abgebrochenen Flow „Zum Warenkorb hinzugefügt“ aktivieren

Der Standard-Flow für Warenkorbabbruch von Klaviyo wird durch das Ereignis Bezahlvorgang begonnen ausgelöst, während der Warenkorbabbruch-Flow Zum Warenkorb hinzugefügt eher für Gelegenheitskäufer gedacht ist, 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 vermeiden“.
3. Wähle einen Flow vom Typ Auslöser für „Zum Warenkorb hinzugefügt“, Erinnerung bei Warenkorbabbruch aus. Es gibt zwei Optionen: 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 bereit, um personalisierte Warenkorb-Follow-up-Nachrichten 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 bringen.
• Füge für den abgebrochenen Flow „Zum Warenkorb hinzugefügt“ die folgenden Flow-Filter hinzu, um zu verhindern, dass Kund*innen, die den Bezahlvorgang begonnen oder per „Kaufen mit Prime“ gekauft haben, falsche Nachrichten erhalten:
  
  • Bezahlvorgang begonnen (Kaufen mit Prime) 0 Mal seit Flow-Beginn UND
  • Placed Order (Kaufen mit Prime) 0 Mal seit Flow-Beginn.

Ergebnis 

Du hast nun ein Shopify-Ereignis Added to Cart erstellt und getestet und einen abgebrochenen Flow Added to Cart aktiviert. 

Zusätzliche Ressourcen

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