wave-replay-sdk (1.0.0)
Installation
registry=npm install wave-replay-sdk@1.0.0"wave-replay-sdk": "1.0.0"About this package
wave-replay-sdk
Записи сессий и UX-аналитика (iwatch.site) для проектов со сборщиком: React, Vue, Svelte, Next, Nuxt, обычный Vite. Если сборщика нет — проще поставить тег одной строкой:
<script defer src="https://iwatch.site/t/wr_ВАШ_КЛЮЧ.js"></script>
Установка
npm i wave-replay-sdk
Пакет лежит в двух местах. Из реестра ARIS (Gitea) он ставится так — чтение открытое, токен не нужен:
npm i wave-replay-sdk --registry https://git.arisweb.ru/api/packages/arisadmin/npm/
Постоянно указывать реестр незачем: строку registry=… можно положить в .npmrc
рядом с package.json. Если реестр недоступен из вашей сети, есть тарбол:
npm i https://iwatch.site/downloads/wave-replay-sdk-1.0.0.tgz
import WaveReplay from 'wave-replay-sdk';
WaveReplay.init({ projectKey: 'wr_ВАШ_КЛЮЧ' });
Больше ничего указывать не нужно: адрес приёма — iwatch.site, имя сайта берётся из
адреса страницы, настройки записи (видео-реплей, маскировка) приезжают из кабинета.
Ключ берётся там же: Сайты и приложения → Код.
Ключ публичен по природе — он лежит в коде вашего сайта. Доступа к кабинету он не даёт, только право присылать события.
React / Next.js
import { useEffect } from 'react';
import WaveReplay from 'wave-replay-sdk';
export default function App({ children }) {
useEffect(() => { WaveReplay.init({ projectKey: 'wr_ВАШ_КЛЮЧ' }); }, []);
return children;
}
В Next.js вызывайте из клиентского компонента ('use client') или из useEffect:
при серверном рендере пакет ничего не делает и не падает — окна там нет.
Vue / Nuxt
// plugins/wave-replay.client.js
import WaveReplay from 'wave-replay-sdk';
export default defineNuxtPlugin(() => {
WaveReplay.init({ projectKey: 'wr_ВАШ_КЛЮЧ' });
});
Что писать вручную
Автоматически собираются переходы, нажатия, прокрутка, ошибки, сетевые запросы и разметка экрана. Руками отмечают только то, что знает лишь ваше приложение:
WaveReplay.event('checkout', { sum: 1290 }); // цель: заявка, покупка, регистрация
WaveReplay.screen('Каталог'); // если роутер не меняет адрес
WaveReplay.mask(elementWithPersonalData); // это в запись не попадёт
const v = WaveReplay.variant('checkout_v2'); // вариант A/B-эксперимента
Приватность
Значения полей ввода не покидают страницу никогда. По умолчанию весь текст в
записях маскируется (maskAllText: true) — снять это можно в кабинете или явно
в коде. Поддерево с атрибутом data-wave-mask не сериализуется вовсе.
Настройки
Всё необязательно, кроме projectKey:
| Поле | По умолчанию | Что делает |
|---|---|---|
projectKey |
— | ключ проекта из кабинета |
appId |
адрес страницы без www |
имя сайта в отчётах |
ingestUrl |
https://iwatch.site/ingest |
свой приёмник (self-hosted) |
sampleRate |
1 |
доля записываемых сессий |
maskAllText |
true |
прятать текст в записях |
recordDom |
решает кабинет | видео-реплей (запись DOM-мутаций) |
snapshotEvery |
2500 |
снимок разметки не чаще, чем раз в N мс |
visitorId |
— | идентификатор посетителя из вашей системы |
remoteSettings |
true |
брать настройки из кабинета |
Заданное в коде сильнее настроек кабинета: если вы выключили запись у себя, кабинет её не включит.
Dependencies
Development Dependencies
| ID | Version |
|---|---|
| esbuild | ^0.24.0 |