Быстрый старт

Подключите аналитику за 15 минут. Всё просто. Каждый шаг объясняется понятным языком.

Содержание

1Регистрация 2Установка SDK 3Отправка событий 4Идентификация 5Первый отчёт 6Первая воронка 7Session Replay 8Тепловые карты 9Детекция фрустрации 10Гайды и опросы 11Feature Flags

Регистрация

2 мин

Сначала нужно создать аккаунт. Это как завести учётную запись в любом сервисе.

Откройте app.trektik.ru/register и введите email, имя и пароль.

Подтвердите email. На почту придёт письмо со ссылкой.

Создайте проект. Напишите название, например «Мой сайт».

Перейдите в Settings → Project → API Keys и скопируйте ключ вида pk_abc123...

API ключ — это как пароль для вашего сайта. Он говорит Trektik: «Эти данные от моего проекта». Публичный ключ (pk_...) безопасно использовать в браузере — он умеет только отправлять события. Секретный ключ (sk_...) используется на сервере и никогда не должен попадать в браузер.

Установка SDK

3 мин

SDK — это маленькая библиотека, которая отправляет данные с вашего сайта в Trektik. Как почтальон: собирает письма и доставляет их.

Выберите способ, который подходит вашему проекту:

Установите пакет:

Терминал

npm install @trektik/browser

Создайте файл для аналитики и вызовите init() один раз при старте приложения:

lib/analytics.ts

import { init } from '@trektik/browser';

// Вызовите один раз при старте приложения.
// init() создаёт экземпляр SDK, включает автотрекинг
// кликов и форм, тепловые карты, детекцию фрустрации,
// гайды и опросы — всё сразу.
const trektik = init({
  apiKey: 'pk_YOUR_PROJECT_KEY',
  debug: true,  // включите в dev, выключите в prod
});

export default trektik;

Импортируйте в корневом компоненте, чтобы SDK запустился:

app/layout.tsx

// app/layout.tsx (Next.js) или App.tsx (React)
import '@/lib/analytics';

export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

init() автоматически включает автотрекинг кликов, скролла и форм. Также запускаются тепловые карты, детекция фрустрации, гайды и опросы. Чтобы что-то отключить, передайте autocapture: false, heatmap: false, frustration: false, guides: false или surveys: false.

Замените pk_YOUR_PROJECT_KEY на ваш настоящий ключ из шага 1.

Отправка событий

3 мин

Событие — это действие пользователя. Например: нажал кнопку, открыл страницу, оплатил подписку. Вы решаете, какие действия важны, и отправляете их в Trektik.

Метод track() принимает два аргумента:

Название события — строка, например button_click
Свойства — объект с дополнительными данными. Строки и числа.

// Сигнатура метода:
trektik.track(eventName: string, properties?: Record<string, string | number>)

Примеры вызова track()

import trektik from '@/lib/analytics';

// Клик по кнопке
trektik.track('button_click', {
  button_name: 'signup',
  page: '/pricing',
});

// Регистрация
trektik.track('signup', {
  method: 'email',
});

// Покупка (со свойствами-числами)
trektik.track('purchase', {
  amount: 4990,
  currency: 'RUB',
  product_id: 'pro_monthly',
});

Если при инициализации включен autocapture (по умолчанию включен в init()), SDK сам отслеживает клики по кнопкам, ссылкам, отправку форм и скролл. Вам не нужно вручную вызывать track() для этого.

Включите debug: true при инициализации. Откройте консоль браузера (F12) и нажмите кнопку. Вы увидите:

Консоль браузера

[Trektik] Track: button_click { button_name: 'signup', page: '/pricing' }

SDK собирает события в очередь и отправляет пачкой каждые 10 секунд (или когда накопится 30 штук). При закрытии вкладки остаток отправляется сразу. Если интернет пропал, события сохраняются в localStorage и отправятся, когда связь вернётся.

Идентификация

2 мин

До того, как пользователь вошёл в аккаунт, Trektik знает его только как анонимное устройство (device_id). Когда пользователь входит, вызовите identify() — и все его действия свяжутся с конкретным человеком.

Это как бейдж на конференции: сначала вы просто «человек в синей куртке», а потом приклеили бейдж — и все знают, кто вы.

// Сигнатура:
trektik.identify(userId: string, properties?: Record<string, string>)

После логина или регистрации

import trektik from '@/lib/analytics';

// Вызовите сразу после успешного логина
trektik.identify('user-123', {
  email: 'alex@example.com',
  name: 'Алексей',
  plan: 'pro',
});

SDK сохраняет user_id в localStorage. Если пользователь закроет и снова откроет вкладку, SDK вспомнит, кто он. Вызывать identify() повторно на каждой странице не нужно.

Первый отчёт

3 мин

Вы отправили события. Теперь посмотрим на них в дашборде. Отчёт — это график, который показывает, сколько раз произошло событие за определённый период.

Откройте app.trektik.ru и нажмите Events в боковом меню.

В поле Event выберите событие — например, button_click.

Выберите что считать: Total Events (все события), Unique Users (уникальные пользователи) или агрегацию по числовому свойству (Avg, Sum, P90).

Нажмите + Group By и выберите свойство (например, button_name). Вы увидите, какие кнопки нажимают чаще.

Настройте период (сегодня / неделя / месяц) и детализацию (час / день). График обновится сам.

Можно добавить фильтры. Например: показать только button_click с page = '/pricing'. Фильтры поддерживают equals, contains, >, < и другие операторы.

Первая воронка

2 мин

Воронка — это цепочка шагов. Она показывает, сколько пользователей дошли от первого шага до последнего. Например: открыли страницу → нажали кнопку → зарегистрировались → оплатили. На каждом шаге кто-то отваливается. Воронка показывает, где именно.

Перейдите в Funnels в боковом меню.

Добавьте шаги воронки. Например:

page_viewbutton_clicksignuppurchase

Выберите период и окно конверсии (например, 7 дней). Окно конверсии — это максимальное время, за которое пользователь должен пройти все шаги.

Нажмите Рассчитать. Вы увидите процент конверсии на каждом шаге.

Можно добавить фильтры к отдельным шагам. Например: button_click где button_name = 'signup'. Также можно сгруппировать по свойству пользователя (например, plan), чтобы сравнить конверсию разных сегментов.

Session Replay

3 мин

Session Replay — это видеозапись того, что делал пользователь на вашем сайте. Вы увидите каждый клик, скролл и переход. Как будто стоите за спиной у пользователя (но без нарушения приватности).

Replay встроен в @trektik/browser — ничего дополнительно устанавливать не нужно. Просто импортируйте TrektikReplay и запустите запись.

Подключение Session Replay

import { Trektik, TrektikReplay } from '@trektik/browser';

const trektik = new Trektik();
trektik.init({
  apiKey: 'pk_YOUR_PROJECT_KEY',
});

// Создайте Replay и передайте экземпляр SDK
const replay = new TrektikReplay(trektik, {
  samplingRate: 100,   // % сессий для записи (0-100)
  maskTextInput: true, // скрыть текст в полях ввода
  maskAllText: false,  // скрыть весь текст на странице
  maxDuration: 1800000, // макс. длительность записи: 30 мин
});

// Начать запись
replay.start();

// Остановить (опционально, при логауте например)
// replay.stop();

По умолчанию текст в полях ввода (пароли, email) маскируется. Replay отправляет данные на /v1/replay/chunks каждые 10 секунд. Записи появятся в разделе Replays дашборда.

Используйте samplingRate, чтобы записывать не все сессии. Например, samplingRate: 10 будет записывать только 10% сессий. Это полезно для экономии трафика на сайтах с большим числом посетителей.

Тепловые карты

1 мин

Тепловая карта показывает, куда пользователи кликают, как далеко скроллят и на какие части страницы смотрят дольше всего. Красные зоны — самые «горячие» (много кликов или внимания).

Если вы используете init(), тепловые карты уже работают. Ничего дополнительно делать не нужно. SDK автоматически собирает клики, скролл и время внимания.

Чтобы SDK точнее замерял «время внимания» (сколько секунд пользователь смотрит на определённую часть страницы), добавьте атрибут data-trektik-section к важным блокам:

HTML

<!-- SDK будет отслеживать, сколько времени
     пользователь смотрит на каждый блок -->
<section data-trektik-section="hero">
  <h1>Заголовок</h1>
</section>

<section data-trektik-section="pricing">
  <h2>Тарифы</h2>
</section>

<section data-trektik-section="faq">
  <h2>Вопросы и ответы</h2>
</section>

Если вы не добавите data-trektik-section, SDK будет отслеживать стандартные блоки: <section>, <article>, <main>, <header>, <footer>.

Чтобы исключить элемент из тепловой карты, добавьте атрибут data-trektik-no-capture или класс trektik-no-capture.

Детекция фрустрации

0 мин

Фрустрация — это когда пользователю что-то не нравится или не работает. SDK автоматически замечает 4 типа фрустрации:

Rage Click

Пользователь быстро кликнул 3+ раза на один элемент за 1 секунду. Обычно это значит: «Я нажимаю, а ничего не происходит!»

Dead Click

Клик по элементу, после которого ничего не изменилось на странице (нет DOM-мутаций за 500 мс).

Error Click

Клик, после которого произошла JS-ошибка в течение 2 секунд.

Thrashed Cursor

Пользователь хаотично водит курсором туда-сюда. 3+ смены направления за 500 мс.

Если вы используете init(), детекция фрустрации уже работает. SDK отправляет события $frustration с типом (rage_click, dead_click, error_click, thrashed_cursor) и CSS-селектором элемента. Вы найдёте их на дашборде в разделе Events.

Гайды и опросы

0 мин

Гайды — это подсказки, которые появляются внутри вашего приложения. Баннеры, тултипы, модальные окна, боковые панели. Опросы — это NPS, CSAT, текстовые вопросы и множественный выбор. Всё настраивается в дашборде, без кода.

Если вы используете init(), гайды и опросы уже работают. SDK каждые 60 секунд проверяет, нужно ли показать что-то пользователю. Вам нужно только создать гайд или опрос в дашборде (раздел Guides или Surveys).

Типы гайдов: tooltip, banner, modal, slideout. Типы опросов: nps (0-10), csat (1-5 звёзд), open_ended, multiple_choice.

Чтобы отключить гайды или опросы:

Отключение

const trektik = init({
  apiKey: 'pk_YOUR_PROJECT_KEY',
  guides: false,   // отключить гайды
  surveys: false,  // отключить опросы
});

Feature Flags

2 мин

Feature Flags (флаги функций) позволяют включать и выключать функции для определённых пользователей без деплоя. Например: показать новый дизайн только 10% пользователей.

Feature Flags работают на серверной стороне через Node.js или Java SDK. Используйте секретный ключ sk_...:

Терминал

npm install @trektik/node

Использование Feature Flags

import { Trektik } from '@trektik/node';

const trektik = new Trektik({
  apiKey: 'sk_YOUR_SECRET_KEY',
});

// Получить значение флага
const value = await trektik.getFlag('user-123', 'new-checkout');
// value: true, false, "variant-a", и т.д.

if (value === true) {
  // показать новый checkout
}

// Получить подробности: значение, вариант, причина
const detail = await trektik.getFlagDetail('user-123', 'new-checkout');
// detail: { flag_key: 'new-checkout', value: true, variant: 'control' }

Feature Flags используют секретный ключ (sk_...). Не используйте его в браузере. Вызывайте getFlag() только на сервере (в API route, middleware или бэкенде).

Что дальше?

Вы подключили SDK, отправили события, построили отчёт и воронку, настроили Replay, тепловые карты и Feature Flags. Вот что можно изучить дальше:

Быстрый старт

Регистрация

Установка SDK

Отправка событий

Идентификация

Первый отчёт

Первая воронка

Session Replay

Тепловые карты

Детекция фрустрации

Гайды и опросы

Feature Flags

Что дальше?

Руководство

SDK Reference

API Reference