Прослушайте изменение маршрута с помощью next.js для использования с matomo / piwik - PullRequest
Новая
       41

Прослушайте изменение маршрута с помощью next.js для использования с matomo / piwik

0 голосов
/ 30 января 2019

Я пытаюсь прослушать изменения маршрута в приложении next.js, чтобы войти в систему навигации в matomo (он же piwik).В соответствии с документацией next.js, я должен сделать что-то вроде этого: 

Router.events.on('routeChangeStart', url => {
  // Do something
});

Где я должен использовать этот код в своем приложении, чтобы регистрировать все изменения маршрутасобытия?

( "где" означает, в каком файле / классе / методе)

1 Ответ

0 голосов
/ 31 января 2019

Вы должны добавить его в pages/_app.js, в методе componentDidMount: 

componentDidMount() {
  Router.events.on("routeChangeStart", url => {
    if (window && window._paq) {
      window._paq.push(["setCustomUrl", url]);
      window._paq.push(["setDocumentTitle", document.title]);
      window._paq.push(["trackPageView"]);
    }
  });
}

Не забудьте инициализировать его на вашей базовой странице (т.е. в вашем макете)или что-то в этом роде): 

<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//{$PIWIK_URL}/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', {$IDSITE}]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->
...