JavaScript API

Wszystkie wywołania przechodzą przez jedną funkcję, pandus(). Dodaj tę linię przed pierwszym wywołaniem, aby wywołania sprzed załadowania skryptu czekały w kolejce:

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

Poza consent żadne wywołanie nic nie robi, dopóki odwiedzający nie zgodzi się na analitykę.

Własne zdarzenia

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

• Nazwa: snake_case, zaczyna się od litery, do 40 znaków (a-z, 0-9, _).
• Parametry: do 25; nazwy do 40 znaków; wartości to liczby, true/false lub tekst do 300 znaków.
• Tekst przypominający e-mail, telefon lub numer karty jest odrzucany w przeglądarce i ponownie na naszym serwerze. Nigdy nie umieszczaj danych osobowych w zdarzeniach.
• Nazwy, które SDK wysyła samo, np. page_view czy purchase, są w katalogu zdarzeń.

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 przyjmuje zdarzenia zalecane przez GA4; value i currency trafiają do własnych kolumn, żeby przychód się sumował. items zawiera do 50 produktów. Wszystkie zdarzenia i parametry są w sekcji E-commerce.

Identyfikator użytkownika

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

Identyfikator łączy wizyty jednego zalogowanego klienta na różnych urządzeniach. SDK haszuje go SHA-256 w przeglądarce, zanim opuści stronę; jeśli przekażesz już hasz SHA-256, zostanie użyty bez zmian. Adresy e-mail i wartości wyglądające na osobowe są odrzucane. Tylko za zgodą.

Właściwości użytkownika

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

Do 10 właściwości na odwiedzającego, nazwy do 24 znaków, wartości tekstowe do 36 znaków. Opisują grupę, nigdy osobę: bez imion, e-maili i identyfikatorów.

Zgoda

pandus('consent', { analytics: true, recordings: false }); // wybór odwiedzającego
pandus('consent', 'open');                                 // otwórz baner Pandus

Kiedy tego używać, opisuje sekcja Zgoda.

Zdarzenia z Twojego serwera

Zamówienia i zwroty z backendu idą przez endpoint zdarzeń serwerowych, aby bloker w przeglądarce ich nie zgubił.

Pakiet npm

@pandus/sdk udostępnia te same polecenia jako typowane funkcje. Kod jest na licencji MIT na GitHubie; pakiet jest w npm.

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

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

React i 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 i 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

Przy Content Security Policy z nonce przekaż go przez init({ site, nonce }); loader sam dodaje wtedy moduły, na co pozwala 'strict-dynamic'. W przeciwnym razie zezwól na:

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