https://github.com/hcodes/react-metrika

Превосходный React/Preact-компонент для работы с Яндекс Метрикой
https://github.com/hcodes/react-metrika

Last synced: about 1 month 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 (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-09T09:12:07.000Z (2 months ago)
• Last Synced: 2024-09-09T11:03:42.616Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 84 KB
• Stars: 1
• 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

=============

[![NPM version](https://img.shields.io/npm/v/react-metrika.svg)](https://www.npmjs.com/package/react-metrika)

[![NPM Downloads](https://img.shields.io/npm/dm/react-metrika.svg?style=flat)](https://www.npmjs.org/package/react-metrika)

[![install size](https://packagephobia.com/badge?p=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 function MyPage() {

    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)