Shoplytics in Headless & SPA Shops

Diese Anleitung gilt für zwei Szenarien, die oft zusammen auftreten — aber unabhängig voneinander relevant sind:

Headless — Frontend und Backend sind getrennt. E-Commerce Daten aus dem Backend müssen aktiv in den Datalayer des Frontends übergeben werden.

SPA (Single-Page-Application) — Der Browser lädt die Seite nur einmal, Seiten wechseln ohne echten Reload. Pageviews müssen manuell getriggert werden.

Viele Shops kombinieren beides — manche nur eines von beiden. Prüfe welches Szenario auf dich zutrifft.

Was du brauchst

1. Shoplytics Script einbinden

Der Shoplytics Script muss einmalig im globalen App-Shell deines Frontends eingebunden werden — also dort, wo er auf jeder Seite geladen wird (z. B. _app.js, app.vue, layout/default.vue o. ä.).

Ohne diesen Schritt kann Shoplytics keine Daten erfassen.

2. Pageview bei jedem Routenwechsel (nur SPA)

Bei klassischen Shops löst jeder Seitenaufruf automatisch einen Pageview aus. Bei SPAs passiert das nicht — der Browser lädt die Seite nur einmal.

Deshalb muss bei jedem Routenwechsel manuell ein Pageview-Event in den Datalayer gepusht werden:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'page_view',
  page_location: window.location.href,
  page_path: window.location.pathname,
  page_title: document.title,
  page_referrer: document.referrer // bei SPA-interner Navigation: vorherige Route manuell übergeben
});

Wichtig: Den Datalayer-Push erst auslösen, nachdem der Router die neue Route vollständig gerendert hat — nicht beim Start der Navigation. Sonst wird die falsche URL gesendet.

3. E-Commerce Datalayer Events (Headless & SPA)

Shoplytics folgt dem Google Analytics Datalayer Standard. Alle relevanten Kaufereignisse müssen als Datalayer-Push im Frontend implementiert werden.

Mindestanforderung:

• view_item — Produktseite aufgerufen
• add_to_cart — Produkt in den Warenkorb gelegt
• purchase — Kauf abgeschlossen

Empfohlen zusätzlich: remove_from_cart, begin_checkout, add_shipping_info, add_payment_info, view_item_list

Die genauen Parameter und Pflichtfelder findest du in unserer Entwickler-Anleitung → https://docs.shoplytics.de/books/installation/page/eigenprogrammierung-nicht-unterstutzes-shopsystem