Stattrack widget

Для установки Stattrack в приложение небходимо установить соответствуюший npm-пакет

npm install @stattrack/widget

Пример базового использования:

import { Stattrack } from "@stattrack/widget";

const stattrack = new Stattrack({
  application: {
    name: "Your app",
  },
  apiKey: "your_api_key",
});

Пример создаёт приложение в пространстве с базовой конфигурацией.

apiKey

apiKey - обязательный параметр, принимающий в себя апи-ключ для создания приложения в пространстве

application

application - обязательный параметр, используется для указания названия, описания и рабочего окружения приложения

application: {
  name: "Stattrack",
}

Создаст приложение 'Stattrack@dev', приложения с разными окружениями будут отображаться отдельно

IApplication

Name	Type	Default	Description
name	string	none	Имя приложения, уникально для аккаунта

template

template - позволяет выбрать пресет настроек рекордера. По умолчанию - 'default'. Настройки шаблона имеют меньший приоритет, чем настройки, напрямую передаваемые в конфигурацию

const stattrack = new Stattrack({
  ...
  template: 'default' // 'budget' | 'highPrecision' | 'development'
})

visitor

Указывает информации о посетителе приложения. Если не указан сессия будет присвоена анонимному посетителю

visitor: {
  uba_id: "user@example.com";
}

throttleTime

Время в миллисекндах, устанавливающее время между записываемыми событиями

thottleTime: 500,

autocapture

Настройка записи событий

const stattrack = new Stattrack({
  // ...
  autocapture: {
    replay: true,
    enablePageViews: true,
    enableSessionRecording: true,
    fileDownloads: false,
    eventsDisableList: [],
    urlsDisableList: [],
    tagsDisableList: [],
    enabledDangerousElements: [],
    allowConsole: true,
    allowNetwork: true,
    allowPerformance: true,
  },
});

IAutoCapture

Name	Type	Default	Description
replay	boolean	true	Разрешить записm повтора сессии
enablePageViews	boolean	true	Разрешить записывать смену страницы
enableSessionRecording	boolean	true	Разрешить запись сессии
fileDownloads	boolean	true	[Не используется] Разрешить отслеживать загрузки
eventsDisableList	"click" | "mousemove" | "scroll" | "sumbit" | "input"	["click", "mousemove", "submit", "scroll"]	Запрещенные для записи события
urlsDisableList	Array<string>	[]	Запрещенные пути для записи
tagsDisableList	"BUTTON" | "INPUT" | "FORM" | "TEXTAREA" | "A" | "SELECT" | "LABEL"	[]	Запрещенные для записи теги
enabledDangerousElements	"password" | "email"	[]	Разрешенные опасные элементы
allowConsole	boolean	true	Разрешить запись консоли
allowNetwork	boolean	true	Разрешить запись сети
allowPerformance	boolean	true	Разрешить запись производительности

mode

Режим работы приложения

mode: "debug";

По умолчанию - deploy. Включив debug вы будете получать дополнительное логирование

customEvents

Позволяет создвать пользовательские события, которые расширяют функционал событий Stattrack

customEvents: [
  {
    eventId: "login",
    htmlEvent: ["click", "sumbit"],
    pattern: "success",
  },
];

ICustomEvent

Name	Type	Default	Description
title	string	-	Значения дата атрибута data-uba-custom-event
htmlType	string	-	Тип html-ивента
pattern	"danger" | "warning" | "success" | "rage" | "buy" | "login" | "logout" | "none"	-	Тип события для сессии

<input data-uba-custom-event="Comment" />

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

Для записывания пользовательских событий нужно указать eventId в дата атрибутах для целевых элементов:

data-uba-custom-event="Custom Event" # eventId

<form data-uba-custom-event="Login">
  <input placeholder="Почта" />
  <input placeholder="Пароль" />
  ...
  <input data-uba-custom-event="Delete account" placeholder="Удалить аккаунт" />
</form>

В запись попадают только события, которые описаны в конфигурации рекордера. События, описаные в html, но отсутствующие в виджете будут проигнорированы.

environment

environment служит для определения версии приложения. По умолчанию - debug

environment: "main";

features

Позволяет указать признаки сессии. Могут быть использованы для фильтрации пользователей и сессий

features: ["sidebar", "new-ui"];

toolbar

Контролирует видимость виджета с картой кликов. По умолчанию false.

toolbar: true;

hiddenFields

Скрывает поля из повтора. По умолчанию все события включены в запись.

hiddenFields: ["click", "mousemove"];

debug

Включает дополнительное логирование в рекордере. По умолчанию - false.

debug: true

rageClickThreshold

Время до rage-клика. По умолчанию - 500мс.

rageClickThreshold: 500;

deadClickThreshold

Время до dead-клика. По умолчанию - 1500мс.

deadClickThreshold: 1500;

features

Feature-флаги позволяют отсортировать сессии по наличию признака и проводить более точные A/B тесты

features: ['feature1', 'feature2']

Когорты

Когорта - это группа пользователей, объеденённых общими параметрами, такими как: utm метки, фичи, по событиям. Когорты используются для быстрой настройки выборки в графиках и карте кликов

Создать когорту можно внутри виджета.