example for use about react-yandex-metrika HOT 10 OPEN

YMInitializer в какое место нужно помещать? Это место должно быть внутри render() (и тогда вопрос, нужно ли помещать это внутри return) или в componentDIdMount() или в componentWillRecieveProps() или вообще вне компонента?

Также неочевидно, следует ли вместе с этим вставлять в файл index.html обычный код яндекс метрики, или этого делать не следует.
И если вставить обычный код яндекс метрике в index.html и не вставлять YMInitializer, то будет ли работать ym('hit', localhost.pathname)

P.S.
Вообще все вопросы снимет любой совсем простой базовый пример использования (например в create-react-app).

from react-yandex-metrika.

Обертка для Route из react-router. С другими, думаю примерно так же можно. И используете этот компонент вместо обычного Route.

import React, { useEffect, useRef } from 'react';
import { Route } from 'react-router-dom';
import ym from 'react-yandex-metrika';

const RouteWrapper = ({ meta, ...props }) => {
  const url = (props.location || {}).pathname;
  const { isParent, path } = props;
  const metaRef = useRef();
  const pastPath = (props.lastLocation || {}).pathname;
  metaRef.current = { title: (meta || {}).title, referrer: pastPath };
  const canHit = (meta || {}).ready || (!meta && url !== pastPath);
  useEffect(() => {
    if (!config.isProduction || !path || !url || isParent) return;
    if (!canHit) return;
    const { title, referrer } = metaRef.current;
    const ymOptions = {};
    if (referrer) ymOptions.referer = referrer;
    if (title) ymOptions.title = title;
    ym('hit', url, ymOptions);
  }, [isParent, url, path, canHit]);
  return <Route {...props} />;
};
export default RouteWrapper;

Ну я тут еще и meta передаю. В целом все просто. Можете удалить все что связанно с meta и isParent если не надо =)

from react-yandex-metrika.

Ох. Вообще-то да, этот как бы компонент отвечает по сути только за подключение скрипта и хранение списка айдишников. Интеграцию с роутером нужно делать самостоятельно.
Что касается примера, ничего не могу обещать, но если руки дойдут, сделаю.

from react-yandex-metrika.

предлагаю в пример добавить что инициализацию делать как и у Вас написано
export default withRouter(props => { return ( <div> <YMInitializer accounts={[49433788]} /> <Switch> <Route exact path="/" component={Home} />
и использовать вызов ym(hit) надо в методе componentWillReceiveProps.
у меня получилось после обновления работает.

from react-yandex-metrika.

Хотелось бы какой-то способ не вставлять на каждую страницу ym('hit', 'path to page'), а где-то в одном месте добавить ym('hit', window.location.pathname + window.location.search)
Видел, советы использовать

history.listen((location) => {
  ym('hit', localhost.pathname);
})

Но не удалось добиться, чтобы данный способ работал (непонятно как и куда его вставлять + скорее всего код содержит ошибки.

P.S.
еще в readme надо бы добавить пункт установка:
yarn add react-yandex-metrika
npm install --save react-yandex-metrika

Понятно, что это элементарно, просто иногда бывает, что название репозитория отличается от названия пакета...

from react-yandex-metrika.

так в моих иссуях есть пример кода как я это делал.

from react-yandex-metrika.

Но не удалось добиться, чтобы данный способ работал (непонятно как и куда его вставлять + скорее всего код содержит ошибки.

К сожалению, куда и какой именно вставлять код, зависит от того, каким роутером вы пользуетесь.

from react-yandex-metrika.

@romanown имейте в виду, что componentWillReceiveProps уже помечен как устаревший, и в react 17 будет удален.

from react-yandex-metrika.

тогда вообще непонятно как использовать данный модуль. значит до выхода новой версии модуля не будем обновлять реакт. а там может и Вы успеете что-нибудь придумать. у меня веселее стало. на тестовом сайте работает, а на рабочий поставил, заменив номер счетчика на правильны - и перестало считать посещения и переходы.

from react-yandex-metrika.

@taime я лично просто поместил в компонент footer:
import { YMInitializer } from 'react-yandex-metrika'; export default class Footer extends Component { render() { return ( <footer className="row"> <YMInitializer accounts={[*****]} options={{ webvisor: true }} version="2" /> </footer> ); } }

from react-yandex-metrika.