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: 89.9,
  currency: 'EUR',
  items: [{ item_id: 'kettle-1', item_name: 'Чайник', price: 89.9, 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