Excellent React/Preact component for Yandex Metrika
npm install react-metrikareact-metrika
=============



Превосходный React/Preact-компонент для работы с Яндекс Метрикой и не только.

- скрипт Яндекс Метрики загружается один раз на странице для нескольких счётчиков, это позволяет избавится от лишних сетевых запросов, сэкономить трафик и избежать лишнего парсинга и выполнения JS-кода скрипта Метрики (73 КБ GZIP);
- компонент можно размещать в любом месте на странице, гарантируется что счётчик не будет несколько раз инициализироваться;
- если возникают ошибки загрузки скрипта Метрики, он пытается заново загрузиться;
- пока скрипт Метрики не загрузился, все вызванные методы счётчика Метрики с данными буферизируются и отправляются после успешной загрузки скрипта Метрики;
- TypeScript-тайпинги на счётчик Метрики;
- поддержка SSR;
- компактный код.
npm install --save-dev react-metrika
`Использование
Установка одного счётчика:
`jsx
import { FC } from 'react';
import { MetrikaCounter } from 'react-metrika';export const MyPage: FC = () => {
return (
Some text...
id={1234567}
options={{
trackHash: true,
webvisor: true
}}
/>
);
}
`Установка нескольких счётчиков с одинаковыми настройками:
`jsx
import { FC } from 'react';
import { MetrikaCounters } from 'react-metrika';export const MyPage: FC = () => {
const handleClick = () => {
ym(123, 'params', { myParams: { a: 1, b: 2, c: 3 } });
};
return (
Some text...
ids={[123, 234]}
options={{
trackHash: true,
webvisor: true
}}
/>
);
}
`Использование без React
`js
import { ym } from 'react-metrika';// counterId, method, value
ym(123, 'init', { webvisor: true });
// ...
ym(123, 'reachGoal', 'goalName', { params: { a: 1, b: 2, c: 3 }});
`Предварительная загрузка скрипта Метрики
В некоторых случаях необходимо максимально быстро загрузить скрипт Метрики, например, в начальной точке инициализации приложения или до отображения интерфейса.`js
import { loadMetrikaScript } from 'react-metrika';loadMetrikaScript().then(() => {
console.log('Metrika script is loaded.');
});
// ...
`Также можно добавить в
страницы предзагрузку скрипта Метрики:
`html
`Загрузка скрипта Метрики с международного домена
`js
import { setMetrikaUrl, METRIKA_SCRIPT_URL_COM } from 'react-metrika';// https://mc.yandex.com/metrika/tag.js
setMetrikaScriptUrl(METRIKA_SCRIPT_URL_COM);
// ...
`SPA-приложения и Next.js
Для отслеживания изменения урла страницы не забудьте включить опцию счётчика trackHash: true.
`jsx
id={1234567}
options={{
trackHash: true, // !!!
webvisor: true
}}
/>
``