Package Exports

react-metrika
react-metrika/dist/index.common.js
react-metrika/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-metrika) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
    }}
/>

JSPM

react-metrika

Package Exports

Readme

react-metrika

Преимущества

Установка

Использование

Использование без React

Предварительная загрузка скрипта Метрики

Загрузка скрипта Метрики с международного домена

SPA-приложения и Next.js

Ссылки

Лицензия