Ü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.
Klaviyo bietet jetzt ein Ereignis Zum Warenkorb hinzugefügt, das bei Aktivierung automatisch über unsere Shopify-Integration synchronisiert wird und ein Shopify-Branding hat. Wir empfehlen, das Ereignis mit Branding zu nutzen, da es von Klaviyo aktiv gepflegt wird. Du möchtest unser automatisches Ereignis nicht nutzen? In diesem Artikel erfährst du, wie du das Ereignis manuell mit einem Code-Fragment erstellst, das über ein Zahnradsymbol mit Klaviyo synchronisiert wird.
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ängstBevor 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.
Je nach deinen Datenschutzeinstellungen für Kund*innen in Shopify verfolgt Klaviyo möglicherweise keine Onsite-Ereignisse für Besucher*innen deines Shopify-Shops aus der EU, dem EWR, Großbritannien und der Schweiz, es sei denn, sie haben ihre Einwilligung erteilt.
Ereignis „Zum Warenkorb hinzugefügt“ erstellen
Die Erstellung des Ereignisses Zum Warenkorb hinzugefügt erfolgt in drei Schritten:
- Auswählen, wo das Code-Fragment platziert werden soll
- Das Fragment zu deinem Online-Shop hinzufügen
- 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 verwendenWenn dein Shop über benutzerdefinierte Liquid-Blöcke verfügt, solltest du einen solchen Block für das Fragment verwenden
- Navigiere in Shopify zu Onlineshop > Themes.
- Suche dein Theme und klicke auf Anpassen.
- Klicke oben auf der Seite auf das Drop-down-Menü Homepage.
- Wähle Produkte > Standardprodukt aus, um zu deiner Standardproduktseite zu gelangen.
- Klicke in der linken Seitenleiste auf Abschnitt hinzufügen und wähle dann Benutzerdefiniertes Liquid aus.
- Füge das bereitgestellte Fragment in das Feld ein.
- Klicke oben rechts auf Speichern.
- 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 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
- Navigiere in Shopify zu Onlineshop > Themes.
- Suche dein Theme und klicke auf Anpassen.
- Klicke auf die drei Punkte am oberen Rand und wähle Code bearbeiten aus.
- Öffne die Datei theme.liquid.
- Füge das bereitgestellte Fragment nach dem anderen Code und vor dem schließenden Tag
</body>
ein. - Füge oberhalb des Fragments das folgende öffnende Tag ein:
{% if product %}
- Füge direkt nach dem Fragment das folgende schließende Tag ein:
{% endif %}
- Deine Datei sollte wie folgt aussehen:
- Klicke auf Speichern.
Fragment zu deiner Website hinzufügen
Das folgende Fragment Zum Warenkorb hinzugefügt sollte für die meisten Shopify-Shops funktionieren.
Jeder Shopify-Shop ist anders. Wenn du das folgende Fragment testest und es nicht funktioniert, kannst du jederzeit ein Backup-Fragment ausprobieren, das du unten im Dropdown-Menü „Fehlerbehebung“ findest.
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“ testenDas 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:
- Navigiere zu deiner Website.
- 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
- Lade die Seite neu.
- Navigiere zu einer Produktseite auf deiner Website und klicke auf deine Schaltfläche In den Warenkorb.
- 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 FragmentFehlerbehebung 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 ausWä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:
-
- Öffne eine der Produktseiten deiner Website.
- Klicke mit der rechten Maustaste auf die Schaltfläche „In den Warenkorb“ und wähle Untersuchen aus.
- Die Konsole wird geöffnet und zeigt den Quellcode der Schaltfläche „In den Warenkorb“ auf der Registerkarte Elemente an.
- Auf der Registerkarte Elemente könnte dein Code etwa so aussehen:
- 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:
- Öffne eine der Produktseiten deiner Website.
- Klicke mit der rechten Maustaste auf die Schaltfläche „In den Warenkorb“ und wähle Untersuchen aus.
- 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
). - 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.
- Öffne eine der Produktseiten deiner Website.
- Klicke mit der rechten Maustaste auf die Schaltfläche „In den Warenkorb“ und wähle Untersuchen aus.
- 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.
- 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 Beispielbtn product-form_cart-submit btn--secondary-accent
und die im Fragment aufgeführte Variable istadd-to-cart
. - 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“ aktivierenNä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:
- Navigiere zur Flow-Bibliothek von Klaviyo.
- Klicke in den Bereich „Umsatzeinbußen verhindern“.
- 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.
- 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