@aris/wave-replay (1.0.0)
Installation
@aris:registry=npm install @aris/wave-replay@1.0.0"@aris/wave-replay": "1.0.0"About this package
@aris/wave-replay
Записи сессий и UX-аналитика (iwatch.site) для проектов со сборщиком: React, Vue, Svelte, Next, Nuxt, обычный Vite. Если сборщика нет — проще поставить тег одной строкой:
<script defer src="https://iwatch.site/t/wr_ВАШ_КЛЮЧ.js"></script>
Установка
npm i @aris/wave-replay
Пока пакет не опубликован в реестре, он ставится тарболом — работает сегодня:
npm i https://iwatch.site/downloads/aris-wave-replay-1.0.0.tgz
import WaveReplay from '@aris/wave-replay';
WaveReplay.init({ projectKey: 'wr_ВАШ_КЛЮЧ' });
Больше ничего указывать не нужно: адрес приёма — iwatch.site, имя сайта берётся из
адреса страницы, настройки записи (видео-реплей, маскировка) приезжают из кабинета.
Ключ берётся там же: Сайты и приложения → Код.
Ключ публичен по природе — он лежит в коде вашего сайта. Доступа к кабинету он не даёт, только право присылать события.
React / Next.js
import { useEffect } from 'react';
import WaveReplay from '@aris/wave-replay';
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 '@aris/wave-replay';
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 |