Установка Stattrack

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

npm install @stattrack/widget

yarn add @stattrack/widget

Далее перейдите в приложение и получите апи-ключ пространства, зарегистрировав аккаунт.

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

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

const RecorderConfig: IRecorderConfig = {
  application: {
    name: "Stattrack",
  },
  apiKey: "10qjm289y4i5ub1u9io285", // Можно взять в нашем приложении
};

const stattrack = new Stattrack(SessionRecorderConfig);

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

Адаптер React:

npm install @stattrack/widget-react

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

<Stattrack config={...}>
  {/*  Your routing */}
</Stattrack>

Параметры настроек рекордера

1. Настройки рекордера
2. Кастомные события
3. Когорты
4. Фича-флаги

apiKey

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

application

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

application: {
  name: "Stattrack",
  description: "Stattrack",
  environment: "dev"
}

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

template

template - позволяет выбрать пресет приложения. По умолчанию - 'default'.

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

Подробнее в шаблонах

visitor

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

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

autocapture

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

autocapture: {
  replay: true,
  enablePageViews: true,
  enableSessionRecording: true,
  fileDownloads: false,
  eventsDisableList: [],
  urlsDisableList: [],
  tagsDisableList: [],
  enabledDangerousElements: [],
}

replay - разешает запись соьытий для реплея сессии

enablePageViews - разрешает запись смены страниц

enableSessionRecording - разрешает запись событий

fileDowloads - разрешает отслеживать загрузку файлов

eventsDisableList - запрещает записывать определённые события

urlsDisableList - запрещает записывать события по url

tagsDisableList - запрещает записывать теги из списка

enableDangerouesElement - разрешает запись для "опасных" элементов, таких как "email", "password"

mode

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

mode: "debug";

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

customEvents

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

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

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

data-stattrack-event="Custom Event" # Название события

features

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

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

toolbar

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

toolbar: true;

hiddenFields

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

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

rageClickThreshold

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

rageClickThreshold: 500;

deadClickThreshold

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

deadClickThreshold: 1500;

Используемы типы

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

Name	Type	Default	Description
apiKey	string	none	Ключ для доступа к приложению
application	IApplication	none	Информация о приложении
autocapture?	IAutoCapture	ниже	Базовые настройки рекордера?
mode?	"dev" | "debug" | "prod"	"dev"	WIP: Режим работы рекордера. Нужно для логирования
customEvents?	ICustomEvent[]	[]	Записывать ли ивенты для реплея?
environment?	string	none	Среда работы рекордера?
features?	Array<string>	[]	Список фича-флагов для добавления в приложение

IApplication

Name	Type	Default	Description
name	string	none	Имя приложения, уникально для аккаунта
cohorts	ICohort	none	Когорта - группа пользователей по фильтрам в сессии

ICohort

Name	Type	Default	Description
title	string	none	Название когорты
color?	string	#ffffff	Акцентный цвет текста когорты (Hex)
background?	string	#ffffff	Задний фон когорты (Hex)
filters	{search: string}	none	Фильтры для сортировки пользоватлей по когортам. location.search, но без "?" в начале
features?	Array<string>	[]	Пресет фич для когорты

ICustomEvent

Name	Type	Default	Description
title	string	none	Значения дата атрибута data-stattrack-event
hmltType	string	none	Тип html-ивента

Для работы пользовательских событий необходимом прописать дата атрибут data-stattrack-custom-event целевому элементу и прописать такой же в настройках

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

IAutoCapture

Name	Type	Default	Description
replay	boolean	true	Разрешить запись реплея
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"	[]	Разрешенные опасные элементы

Кастомные события

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

data-stattrack-event="Custom Event" # Название ивента

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

Когорты

Когорты - это пресет фильтров(search string, фичи, страна и т.д.), по которым можно идентифицировать группу пользователей

Feature-flags

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