Eine Zeile Code – und alles Weitere nach Bedarf
Der Tracking-Code ist komprimiert rund 5 KB groß und läuft auf jeder Website. Für Events, Login, E-Commerce und serverseitige Daten gibt es eine schlanke JavaScript-API und eine Server-Schnittstelle.
<script defer src="https://visualclicks.de/t/fwa.js" data-site="vc_…"></script>Events, Properties und Login
Eigene Ereignisse wie Suchen, Downloads oder Klicks schickst du mit fwa.track(), Zusatzinformationen mit fwa.set() – für das Ereignis, die Seite, die Sitzung oder dauerhaft für den Nutzer. Nach dem Login verknüpft fwa.identify() die Sitzung mit deiner Kundennummer.
Jede neue Property erscheint automatisch in der Property-Registry und steht danach in Filtern, Cards und Segmenten bereit.
// Ereignis mit Eigenschaften
fwa.track('search', { query: 'zelt', results: 12 });
// Property für die ganze Sitzung
fwa.set('customer_type', 'vip', { scope: 'session' });
// Login verknüpfen, Logout
fwa.identify('cust_4711');
fwa.reset();
// Zustimmung aus dem Cookie-Banner
fwa.consent.grant(['analytics', 'recording']);Der Kaufprozess in Ereignissen
Die E-Commerce-API folgt dem Aufbau von Google Analytics 4: Produktansicht, Warenkorb, Kasse, Versand, Zahlung, Kauf und Rückerstattung, jeweils mit Artikeln, Marke, Kategorien, Preis und Menge.
Wer bereits ein GA4-Datenmodell im Shop hat, überträgt es mit wenig Aufwand.
fwa.ecommerce.viewItem({ item_id: 'ZT-100', item_name: 'Trekkingzelt',
item_brand: 'NordCamp', item_category: 'Zelte', price: 249 });
fwa.ecommerce.addToCart({ item_id: 'ZT-100', price: 249, quantity: 1 });
fwa.ecommerce.beginCheckout(items, { value: 249 });
fwa.ecommerce.purchase(items, { transaction_id: 'A-1001',
value: 249, tax: 39.76, shipping: 0, currency: 'EUR' });Bestellungen und KI-Crawler direkt vom Server
Mit einem Server-Key aus den Einstellungen sendet dein Backend Ereignisse direkt an VisualClicks – unabhängig von Browser, Werbeblocker und Einwilligung. Bestellungen werden über die Bestellnummer mit den Daten aus dem Browser zusammengeführt.
Zugriffe von KI-Crawlern meldest du auf demselben Weg, oder du lädst ein Access-Log im Format „combined“ hoch.
- Mehrere Keys je Website, einzeln widerrufbar
- Key wird nur einmal angezeigt und nur als Prüfwert gespeichert
- IP-Ausschlüsse für interne Zugriffe
curl -X POST https://visualclicks.de/api/s/v1/events \
-H "Authorization: Bearer vcsk_…" \
-H "Content-Type: application/json" \
-d '{"source":"server","e":[{"t":"ecommerce","n":"purchase",
"u":"https://shop.example/danke",
"x":{"transaction_id":"A-1001","value":249}}]}'Asynchron
Lädt mit defer, blockiert die Seite nicht
Single-Page-Apps
Seitenwechsel per History-API automatisch
Ohne Code
Klicks per data-fwa-event erfassen
Mehrere Websites
Je Website eigener Code und eigene Einstellungen
Häufige Fragen
Wo füge ich den Tracking-Code ein?
Im <head> jeder Seite – bei den meisten CMS und Shop-Systemen über das Theme oder ein Feld für eigene Skripte. Der Code wird asynchron geladen und blockiert die Seite nicht.
Funktioniert das mit Single-Page-Apps (React, Vue, Next.js)?
Ja. Seitenwechsel über die History-API werden automatisch als Seitenaufruf erfasst.
Wie messe ich Klicks auf Buttons ohne Programmierung?
Mit dem Attribut data-fwa-event am Element, etwa data-fwa-event="newsletter_click". Zusätzliche Eigenschaften setzt du mit data-fwa-prop-….
Wozu dient ein Server-Key?
Damit dein Server Ereignisse direkt senden kann: Bestellungen, Rückerstattungen oder Zugriffe von KI-Crawlern. Server-Keys gehören nie in den Quelltext der Website und lassen sich einzeln widerrufen.
Bereit für die erste Zeile Code?
Fordere deinen Zugang an. Danach genügt eine Zeile Tracking-Code – die ersten Besuche erscheinen in Echtzeit.