Форк библиотеки yandex-metrica-ab-react для работы с ISR NextJS
React библиотека для работы с AB экспериментами Метрики
import { useExperiments } from 'yandex-metrica-ab-next';
const ButtonRenderAfterFlags: React.FC = (props) => {
const { flags, ready } = useExperiments({
clientId,
});
const flagVal = useMemo(() => flags.flag_exp?.[0], [flags]);
if (!ready) {
return null;
}
return <button style={{ backgroundColor: flagVal || '#ccc' }} { ...props }>{ String(flagVal || 'default').toUpperCase() }</button>;
};
export const App: React.FC = () => (
<ButtonRenderAfterFlags />
)
import { MetricaExperimentsProvider, MetricaExperimentsContext } from 'yandex-metrica-ab-next';
interface ConsumerButtonProps {
color?: string;
}
const ConsumerButton: React.FC<ConsumerButtonProps> = props => {
return <button style={{ backgroundColor: props.color }}>ConsumerButton</button>;
}
export const App: React.FC = () => (
<MetricaExperimentsProvider clientId={clientId}>
<MetricaExperimentsContext.Consumer>
{answer => <ConsumerButton color={answer.flags?.MY_BUTTON_COLOR?.[0]} />}
</MetricaExperimentsContext.Consumer>
</MetricaExperimentsProvider>
);
import { MetricaExperimentsProvider, MetricaExperimentsContext } from 'yandex-metrica-ab-next';
const OtherButton: React.FC = props => {
const { flags, ready } = useExperimentsContext();
const flagVal = useMemo(() => flags.flag_exp?.[0], [flags]);
if (!ready) return null;
return <button style={{ backgroundColor: flagVal || '#ccc' }} { ...props }>{ String(flagVal || 'default').toUpperCase() }</button>;
}
export const App: React.FC = () => (
<MetricaExperimentsProvider clientId={clientId}>
<OtherButton />
</MetricaExperimentsProvider>
);
import { MetricaExperimentsProvider, MetricaExperimentsContext } from 'yandex-metrica-ab-next';
class ClassButton extends React.Component {
static contextType = MetricaExperimentsContext;
declare context: React.ContextType<typeof MetricaExperimentsContext>
render() {
const { flags, ready } = this.context;
if (!ready) return null;
const flagVal = flags.flag_exp?.[0];
return <button style={{ backgroundColor: flagVal || '#ccc' }} { ...this.props }>{ String(flagVal || 'default').toUpperCase() }</button>;
}
}
export const App: React.FC = () => (
<MetricaExperimentsProvider clientId={clientId}>
<ClassButton />
</MetricaExperimentsProvider>
);
С помощью yandex-metrica-ab-node получаем флаги и передаём их в MetricaExperimentsContext приложения.
// app.tsx
export const App: React.FC = () => (
<MetricaExperimentsContext value={abMetricaAnswer.flags}>
...
</MetricaExperimentsContext>
Словарь Key-Value с данными о посетителе. Необходим для таргетирования экспериментов.
Пример
<MetricaExperimentsProvider clientId={clientId} clientFeatures={{ lang: 'ru', sex: 'male' }}>