Add-to-cart Dataylayer hinzufügen

[Den288]

Hallo zusammen, 

ich würde gerne meinen Add-to-Cart Datalayer hinzufügen, finde jedoch weder das Produkttemplate in den Abschnitten, noch finde ich den Add-to-Cart-Button in einem anderen Abschnitt wo ich das Snippet inkludieren kann. Das Snippet dazu habe ich bereits erstellt. Hoffe die Frage ist nicht komplett dumm, aber ich bin relativ neu in dem Gebiet und bisschen verloren.. 

Vielen Dank vorab für jegliche Hilfe! 

[Gabe]

Hey @Den288 

Keine Frage ist dumm, und ich helfe dir gerne weiter! 😉

Shopify verwendet eine eigene Template-Sprache namens "Liquid". Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Um den Add-to-Cart Datalayer hinzuzufügen, musst du den entsprechenden Liquid-Code finden und bearbeiten. Melde dich in deinem Shopify-Adminbereich an und gehe zu "Online-Shop" > "Themes". Klicke dort bei deinem aktuellen Theme auf "Aktionen" und dann auf "Code bearbeiten". Im Code-Editor solltest du auf der linken Seite eine Liste von Dateien und Ordnern sehen. Das "product.liquid" Template ist oft in einem Ordner namens "Templates" zu finden. Wenn du dieses Template nicht findest, kann es sein, dass dein Theme ein anderes benanntes Template für Produkte verwendet oder dass die Produktinformationen in einem Abschnitt (Section) gespeichert sind. Wenn du das "product.liquid" nicht findest, sieh in den "Sections" nach. Hier könnten Dateien wie "product-template.liquid" oder ähnliche sein.

In der Datei, in der du die Produktinformationen siehst, suche nach dem Add-to-Cart-Button. Dieser kann z.B. so aussehen: <input type="submit" name="add" value="In den Warenkorb" /> oder vielleicht als Button-Element mit einer entsprechenden Beschriftung. Direkt vor oder nach diesem Button kannst du nun deinen Datalayer-Snippet einfügen.

Ein Datalayer ist oft eine Struktur, die dazu dient, bestimmte Daten an eine Tag-Management-Lösung, wie z.B. Google Tag Manager (GTM), zu übergeben. Ein typisches Szenario wäre die Übertragung von E-Commerce-Daten an GTM, wenn ein Nutzer ein Produkt zum Warenkorb hinzufügt.

Ein einfacher Datalayer-Snippet für den Add-to-Cart-Vorgang in einem Online-Shop könnte so aussehen:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {
      'products': [{
        'id': '{{ product.id }}',
        'name': '{{ product.title }}',
        'price': '{{ product.price | divided_by: 100.0 }}',
        'brand': 'BeispielMarke',
        'category': 'BeispielKategorie',
        'quantity': 1
      }]
    }
  }
});

Die obenstehenden Liquid-Platzhalter ({{ product.id }}, {{ product.title }} usw.) ziehen spezifische Produktinformationen aus Shopify und setzen diese in den Datalayer-Snippet ein. Du müsstest die Platzhalter entsprechend deinen spezifischen Anforderungen und deinem Theme anpassen.

Hier sind einige Punkte zu beachten:

1. Event Name: Das 'event': 'addToCart' signalisiert dem Tag Manager, dass ein Produkt zum Warenkorb hinzugefügt wurde.

2. E-Commerce-Daten: Die Struktur innerhalb von 'ecommerce' folgt einem spezifischen Format, das oft von Analysetools wie Google Analytics verwendet wird.

3. Liquid-Platzhalter: Die Liquid-Platzhalter ({{ }}) sind spezifisch für Shopify und holen Daten direkt aus deinem Shop. Je nachdem wie dein Shopify-Theme aufgebaut ist, können diese Platzhalter variieren.

4. Währung und Preis: Im obigen Beispiel wird der Preis durch 100 geteilt, weil Shopify Preise oft in Cent und nicht in Euro speichert. Das kann je nach Einstellung variieren.

5. Brand und Kategorie: Diese Werte sind nur beispielhaft. Du solltest sie durch die tatsächlichen Werte aus deinem Shop ersetzen oder entsprechende Liquid-Codes verwenden, um die Daten dynamisch zu holen.

Stelle sicher, dass du bereits den Basis-Code für den Google Tag Manager (oder das entsprechende Tag-Management-Tool, das du verwendest) auf deiner Seite installiert hast, damit der Datalayer-Snippet korrekt funktioniert. Wenn du Fragen oder Bedenken hast, empfehle ich dir, die Hilfe eines Experten in Anspruch zu nehmen, um Fehler zu vermeiden.