Яндекс.Метрика и react-router. Как решить?

Question

[Артем Васильев]

Суть вопроса такова: есть SPA-приложение, к которому в статичный файл index.html подключен код той самой метрики с параметрами:

new Ya.Metrika({
            id:xxx, 
            clickmap:true,
            trackLinks:true,
            accurateTrackBounce:true,
            webvisor:true,
            trackHash:true 
        })

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

Нашел компоненты по типу "react-ym", но так и не понял, зачем они нужны. Или как раз они и решают эту проблему?

Answer 1

[Razzwan]

import { YMInitializer } from 'react-yandex-metrika';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        // SNIP
          <YMInitializer accounts={[987654321]} />
        // SNIP
      </div>
    );
  }
});

// Потом подписываемся на событие истории и делаем что-то вроде:
import ym from 'react-yandex-metrika';
history.listen((location) => {
  ym('hit', localhost.pathname);
})

Взято здесь: https://github.com/narkq/react-yandex-metrika

Comments

[yestema]

Куда необходимо добавлять этот код ?
(внутри Routes/снаружи? в render или в comonenDidMount) ?

import ym from 'react-yandex-metrika';
history.listen((location) => {
  ym('hit', localhost.pathname);
})

У меня данный код вызывает ошибки:

Line 13:  Unexpected use of 'history'  no-restricted-globals
  Line 14:  'localhost' is not defined   no-undef

Answer 2

[Евгений Им]

Есть следующий вариант реализации:

<Router
    ...
    onUpdate={logPageView}
/>

Где logPageView -- функция, в которой вы реализовываете логирование для Яндекс.Метрики/Гугл Аналитики и т.п.

Comments

[MuscleC]

Данный метод устарел с выходом react-router4