React библиотека для работы с AB экспериментами Метрики
npm install yandex-metrica-ab-reactReact библиотека для работы с AB экспериментами Метрики
enableAntiflicker - включает режим. По умолчанию = false
antiflickerTimeout - задает задержку. По умолчанию 4000 (подсмотрено в optimize). Обычно задержка на получения флагов 50-200мс, но при медленном интернете доходит до секунд.
В этом режиме дети MetricaExperimentsProvider не будут отрисованы до тех пор, пока приложение не поличит флаги экспериментов, поэтому в компонентах не нужно проверять ready === true.
app.tsx
export const App: React.FC = () => (
...
`$3
Словарь Key-Value с данными о посетителе.
Необходим для таргетирования экспериментов.Пример
$3
Для удобства использования флагов можно задать список доступных имён.
flags.ts
// Описание флага может быть произвольной строкой. Оно нужно только для вас.
export enum AvailableFlags {
Flag0 = 'My first flag',
HeaderRedButtons = 'Красные кнопки в хедере',
}
`
header.tsx
...
const { flags } = useExperiments({ clientId }); const headerRebButtons = flags.HeaderRedButtons?.[0];
...
`
или
header.tsx
...
const { flags } = useExperimentsContext(); const headerRebButtons = flags.HeaderRedButtons?.[0];
...
`$3
Функции useExperiments и useExperimentsContext возвращают объект
interface Answer {
// Набор флагов экспериментов, в которые попал пользователь
// Значение - массив, так как пользователь может попасть в несколько экспериментов с одним флагом
// Что делать в компоненте в таком случае - решать разработчику конечного сервиса
flags: Record; // Значение пользовательской куки, по которой система идентифицирует пользователя в varioqub (с ней ничего делать не нужно)
i?: string;
// Строка, идентифицирующая набор экспериментов, в которые попал пользователь (с ней ничего делать не нужно)
experiments?: string;
// Флаг готовности:
// false - ещё не известно в какие эксперименты попал пользователь
// true - набор экспериментов и его флаги получены
ready: boolean;
}