JavaScript-API

Alle Aufrufe laufen über eine Funktion, pandus(). Fügen Sie diese Zeile vor Ihrem ersten Aufruf ein, damit Aufrufe vor dem Laden des Skripts in einer Warteschlange warten:

window.pandus = window.pandus || function () { (pandus.q = pandus.q || []).push(arguments); };

Außer consent bewirkt kein Aufruf etwas, bevor der Besucher der Analyse zugestimmt hat.

Eigene Ereignisse

pandus('event', 'signup', { plan: 'pro' });
pandus('event', 'newsletter_subscribe', { place: 'footer' });

• Name: snake_case, beginnt mit einem Buchstaben, bis 40 Zeichen (a-z, 0-9, _).
• Parameter: bis 25; Namen bis 40 Zeichen; Werte sind Zahlen, true/false oder Text bis 300 Zeichen.
• Text, der wie E-Mail, Telefon- oder Kartennummer aussieht, wird im Browser und erneut auf unserem Server verworfen. Senden Sie nie personenbezogene Daten in Ereignissen.
• Namen, die das SDK selbst sendet, wie page_view oder purchase, stehen in der Ereignisreferenz.

E-Commerce

pandus('ecommerce', 'purchase', {
  transaction_id: 'A-1042',
  value: 89.9,
  currency: 'EUR',
  items: [{ item_id: 'kettle-1', item_name: 'Kettle', price: 89.9, quantity: 1 }],
});

ecommerce nimmt die von GA4 empfohlenen Ereignisse; value und currency landen in eigenen Spalten, damit der Umsatz aufgeht. items enthält bis zu 50 Produkte. Alle Ereignisse und Parameter stehen unter E-Commerce.

Eine Nutzer-ID

pandus('identify', 'customer-48151');

Die ID verbindet Besuche eines angemeldeten Kunden über Geräte hinweg. Das SDK hasht sie mit SHA-256 im Browser, bevor sie die Seite verlässt; einen bereits übergebenen SHA-256-Hash nutzt es unverändert. E-Mail-Adressen und persönlich wirkende Werte werden abgelehnt. Nur mit Einwilligung.

Nutzereigenschaften

pandus('set', 'user_properties', { tier: 'gold', plan: 'b2b' });

Bis zu 10 Eigenschaften je Besucher, Namen bis 24 Zeichen, Textwerte bis 36 Zeichen. Sie beschreiben eine Gruppe, nie eine Person: keine Namen, E-Mails oder IDs.

Einwilligung

pandus('consent', { analytics: true, recordings: false }); // die Wahl des Besuchers
pandus('consent', 'open');                                 // das Pandus-Banner öffnen

Wann Sie das brauchen, steht unter Einwilligung.

Ereignisse von Ihrem Server

Bestellungen und Erstattungen aus Ihrem Backend gehen über den Endpunkt für Server-Ereignisse, damit ein Blocker im Browser sie nicht verschluckt.

Das npm-Paket

@pandus/sdk bietet dieselben Befehle als typisierte Funktionen. Der Quellcode ist MIT-lizenziert auf GitHub; das Paket liegt auf npm.

import { init, track, ecommerce } from '@pandus/sdk';

init({ site: 'YOUR_SITE_TOKEN' });
track('signup', { plan: 'pro' });

React und Next.js

// app/providers.tsx
'use client';
import { PandusProvider } from '@pandus/sdk/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <PandusProvider site="YOUR_SITE_TOKEN">{children}</PandusProvider>;
}

import { usePandus } from '@pandus/sdk/react';

export function SignupButton() {
  const { track } = usePandus();
  return <button onClick={() => track('signup', { plan: 'pro' })}>Sign up</button>;
}

Vue und Nuxt

// main.ts (Vue) or plugins/pandus.client.ts (Nuxt)
import { PandusPlugin } from '@pandus/sdk/vue';

app.use(PandusPlugin, { site: 'YOUR_SITE_TOKEN' });

import { usePandus } from '@pandus/sdk/vue';

const { track } = usePandus();
track('signup', { plan: 'pro' });

Content Security Policy

Mit einer nonce-basierten Content Security Policy übergeben Sie die Nonce mit init({ site, nonce }); der Loader fügt seine Module dann selbst hinzu, was 'strict-dynamic' erlaubt. Sonst erlauben Sie:

script-src  https://pandus.online
connect-src https://pandus.online https://e.pandus.online