react-metrika

v0.3.1

Published

2 months ago

Excellent React/Preact component for Yandex Metrika

Downloads

273

0High
0Medium
0Low

hcodes

react component preact component react preact yandex metrika metrics yandex-metrika yandex metrika component

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();

// ...

Также можно добавить в <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
    }}
/>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-metrika

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

Установка

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

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

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

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

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

Ссылки

Лицензия