0.3.2 • Published 7 months ago
react-metrika v0.3.2
react-metrika
Превосходный React/Preact-компонент для работы с Яндекс Метрикой и не только.
Преимущества
- скрипт Яндекс Метрики загружается один раз на странице для нескольких счётчиков, это позволяет избавится от лишних сетевых запросов, сэкономить трафик и избежать лишнего парсинга и выполнения JS-кода скрипта Метрики (73 КБ GZIP);
- компонент
<MetrikaCounter />можно размещать в любом месте на странице, гарантируется что счётчик не будет несколько раз инициализироваться; - если возникают ошибки загрузки скрипта Метрики, он пытается заново загрузиться;
- пока скрипт Метрики не загрузился, все вызванные методы счётчика Метрики с данными буферизируются и отправляются после успешной загрузки скрипта Метрики;
- TypeScript-тайпинги на счётчик Метрики;
- поддержка SSR;
- компактный код.
Установка
npm install --save-dev react-metrikaИспользование
Установка одного счётчика:
import { FC } from 'react';
import { MetrikaCounter } from 'react-metrika';
export const MyPage: FC = () => {
return (
<Header />
<Content>Some text...</Content>
<Footer />
<MetrikaCounter
id={1234567}
options={{
trackHash: true,
webvisor: true
}}
/>
);
}Установка нескольких счётчиков с одинаковыми настройками:
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 (
<Header />
<Content>
Some text...
<button onClick={handleClick}>Click me!</button>
</Content>
<Footer />
<MetrikaCounters
ids={[123, 234]}
options={{
trackHash: true,
webvisor: true
}}
/>
);
}Использование без React
import { ym } from 'react-metrika';
// counterId, method, value
ym(123, 'init', { webvisor: true });
// ...
ym(123, 'reachGoal', 'goalName', { params: { a: 1, b: 2, c: 3 }});Предварительная загрузка скрипта Метрики
В некоторых случаях необходимо максимально быстро загрузить скрипт Метрики, например, в начальной точке инициализации приложения или до отображения интерфейса.
import { loadMetrikaScript } from 'react-metrika';
loadMetrikaScript().then(() => {
console.log('Metrika script is loaded.');
});
// ...Также можно добавить в <head> страницы предзагрузку скрипта Метрики:
<link rel="preload" href="https://mc.yandex.ru/metrika/tag.js" as="script" />Загрузка скрипта Метрики с международного домена
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.
<MetrikaCounter
id={1234567}
options={{
trackHash: true, // !!!
webvisor: true
}}
/>Ссылки
- Справка Метрики: Инициализация счётчика
- Справка Метрики: Справочник методов
- Справка Метрики: Отладчик работы счётчика