JavaScript API

Усі виклики йдуть через одну функцію — pandus(). Додайте цей рядок перед першим викликом, щоб виклики до завантаження скрипта чекали в черзі:

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

Крім consent, жоден виклик нічого не робить, доки відвідувач не погодився на аналітику.

Власні події

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

• Назва: snake_case, починається з літери, до 40 символів (a-z, 0-9, _).
• Параметри: до 25; назви до 40 символів; значення — числа, true/false або текст до 300 символів.
• Текст, схожий на e-mail, телефон чи номер картки, відкидається в браузері й ще раз на нашому сервері. Ніколи не кладіть персональні дані в події.
• Назви, які SDK надсилає сам, як-от page_view чи purchase, — у довіднику подій.

E-commerce

pandus('ecommerce', 'purchase', {
  transaction_id: 'A-1042',
  value: 1890,
  currency: 'UAH',
  items: [{ item_id: 'kettle-1', item_name: 'Чайник', price: 1890, quantity: 1 }],
});

ecommerce приймає рекомендовані події GA4; value і currency йдуть в окремі стовпці, щоб виручка сходилася. items містить до 50 товарів. Усі події й параметри — у розділі E-commerce.

ID користувача

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

ID поєднує візити одного залогіненого покупця на різних пристроях. SDK хешує його SHA-256 у браузері, перш ніж він залишить сторінку; якщо ви передаєте вже готовий хеш SHA-256, він використовується як є. E-mail і значення, схожі на персональні, відхиляються. Лише за згоди.

Властивості користувача

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

До 10 властивостей на відвідувача, назви до 24 символів, текстові значення до 36 символів. Вони описують групу, ніколи не людину: без імен, e-mail та ідентифікаторів.

Згода

pandus('consent', { analytics: true, recordings: false }); // вибір відвідувача
pandus('consent', 'open');                                 // відкрити банер Pandus

Коли це потрібно — у розділі Згода.

Події з вашого сервера

Замовлення й повернення з вашого бекенду йдуть через ендпоінт серверних подій, щоб блокувальник у браузері їх не загубив.

npm-пакет

@pandus/sdk обгортає ті самі команди у типізовані функції. Код відкритий (MIT) на GitHub; пакет — у npm.

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

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

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

З Content Security Policy на nonce передайте nonce через init({ site, nonce }); тоді завантажувач сам додає модулі, що дозволяє 'strict-dynamic'. Інакше дозвольте:

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