Yandex.Metrika and react-router. How to decide?

Question

JavaScript

The essence of the question is this: there is a SPA application, to which the code of the same metric with parameters is connected to the static index.html file:

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

The webvisor counts clicks and other actions, but only the URL changes, nothing changes in the webvisor itself, the same first page remains.
I found components of the "react-ym" type, but did not understand why they are needed. Or just they solve this problem?

Answer 1

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

Taken from here: https://github.com/narkq/react-yandex-metrika

Answer 2

There is the following implementation:

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

Where logPageView is a function in which you implement logging for Yandex.Metrica/Google Analytics, etc.