react-metrika
=============
[](https://www.npmjs.com/package/react-metrika)
[](https://www.npmjs.org/package/react-metrika)
[](https://packagephobia.com/result?p=react-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...
);
}
```
Установка нескольких счётчиков с одинаковыми настройками:
```jsx
import { FC } from 'react';
import { MetrikaCounters } from 'react-metrika';
export function MyPage() {
const handleClick = () => {
ym(123, 'params', { myParams: { a: 1, b: 2, c: 3 } });
};
return (
Some text...
);
}
```
## Использование без 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
```
# Ссылки
- [Справка Метрики: Инициализация счётчика](https://yandex.ru/support/metrica/code/counter-initialize.html)
- [Справка Метрики: Справочник методов](https://yandex.ru/support/metrica/objects/method-reference.html)
- [Справка Метрики: Отладчик работы счётчика](https://yandex.ru/support/metrica/general/debugger.html)
# [Лицензия](./LICENSE)