# 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](https://docs.shoplytics.de/books/installation/page/du-willst-deine-eigene-datalayer-im-shop-zur-verfugung-stellen-weil-dein-shop-kein-datalayer-plugin-hat-shop-ist-eigenprogrammierung-oder-headlessspa)