https://github.com/hcodes/react-metrika
Превосходный React/Preact-компонент для работы с Яндекс Метрикой
https://github.com/hcodes/react-metrika
Last synced: 6 months ago
JSON representation
Превосходный React/Preact-компонент для работы с Яндекс Метрикой
- Host: GitHub
- URL: https://github.com/hcodes/react-metrika
- Owner: hcodes
- License: mit
- Created: 2024-09-05T05:27:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-19T13:05:16.000Z (over 1 year ago)
- Last Synced: 2025-03-23T18:54:19.953Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 111 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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 const MyPage: FC = () => {
const handleClick = () => {
ym(123, 'params', { myParams: { a: 1, b: 2, c: 3 } });
};
return (
Some text...
Click me!
);
}
```
## Использование без 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)