react-metrika
v1.0.0TypeScript
Excellent React/Preact component for Yandex Metrika
0/weekUpdated 2 months agoMITUnpacked: 28.8 KB
Published by Denis Seleznev
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...
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...
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
Для отслеживания изменения урла страницы не забудьте включить опцию счётчика .
`jsx
options={{
trackHash: true, // !!!
webvisor: true
}}
/>
``Ссылки
- Справка Метрики: Инициализация счётчика
- Справка Метрики: Справочник методов
- Справка Метрики: Отладчик работы счётчика