javascript - 使用 next.js 监听路由更改以与 matomo/piwik 一起使用

Question

我正在尝试在 next.js 应用程序上收听路由更改，以便将导航记录到 matomo(又名 piwik)。根据 next.js 的文档，我必须这样做:

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

在哪里 我是否必须在我的应用程序中使用此代码才能记录所有路线更改事件？

(“where”表示在哪个文件/类/方法中)

Answer 1

您必须将其添加到 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"]);
    }
  });
}

不要忘记 initialize it在您的基本页面中(即您的布局或类似的东西):

<!-- 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 -->