angular - 无法通过 Matomo/Piwik 跟踪 Angular 8 中的路线变化

Question

我遵循了 Matomo 文档(在放置东西以及如何实现它们方面不是特别有用)并且我也尝试了使用 ngx-Matomo 的方法。出于某种原因，这也不起作用。

我遇到的问题是我的初次访问被记录了，但是当我点击新的“页面”(路线)时，没有其他任何东西。我获得触发器的唯一时间是刷新页面或重新加载本地主机或测试站点但未跟踪正常导航。

由于个人资料限制，我目前无法访问 Matomo 本身内部的任何选项，但我想知道这是否是问题所在。

这是我的 ngx-matomo 代码和样板 Matomo 脚本(URL 和一些名称已更改以保护项目):

var _paq = window._paq || [];
_paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function () {
    var u = "//MY_URL/";
    _paq.push(['setTrackerUrl', u + 'piwik.php']);
    _paq.push(['setSiteId', '000']);
    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);
  })();

应用程序根:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { MatomoInjector } from 'ngx-matomo';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
constructor(router: Router, private matomoInjector: MatomoInjector) {
this.matomoInjector.init('//MY_URL/', 000);
}

组件设置:

import { Component, OnInit } from '@angular/core';
import { ResourceLinksService } from './resource-links.service';
import { MatomoTracker } from 'ngx-matomo';

@Component({
  selector: 'app-component',
  templateUrl: './component.html',
  styleUrls: ['.component.css']
})
export class Component implements OnInit{

 constructor(private matomoTracker: MatomoTracker) {
  }

ngOnInit() {
  this.matomoTracker.setDocumentTitle('Title Test');
  }
}

这个 NPM 也在我的 app.module.ts 中导入

任何帮助都会很棒。我完全不知道为什么 ngx-matomo 不起作用。这可能表明我正在使用的 Matomo 服务本身存在问题。

Answer 1

过去，我也尝试在 Angular 中实现 Matomo - 并取得了成功。这是我不使用外部 npm 包的解决方案:
第一步:创建一个javascript文件并输入以下代码
统计.js:

     function statistic(path) {
  (function () {
    const u = "//MY_URL/";

    // Remove the script added before
    const d = document, g = d.createElement("script"), s = d.getElementsByTagName("script")[0];
    const sSrc = s.getAttribute('src');
    if (sSrc === u + "matomo.js") {
      s.remove();
    }

    // Set variables
    const _paq = window._paq = window._paq || [];
    _paq.push(["disableCookies"]);
    _paq.push(["setCustomUrl", path]);
    _paq.push(["trackPageView"]);

    (function () {
      _paq.push(["setTrackerUrl", u + "matomo.php"]);
      _paq.push(["setSiteId", "1"]);
      const d = document, g = d.createElement("script"), s = d.getElementsByTagName("script")[0];
      g.type = "text/javascript";
      g.async = true;
      g.src = u + "matomo.js";
      s.parentNode.insertBefore(g, s);
    })();
  })();
}

将 MY_URL 替换为您的 url 或 matomo.js 的路径
第 2 步:编辑您的 angular.json(项目 > 您的项目名称 > 架构师 > 构建 > 选项)

"scripts": [
          "path to/statistic.js"
        ]

第 3 步:编辑您的 app.component.ts 放入包含的位置(在文件顶部)

import {NavigationEnd, Router} from '@angular/router';
declare const statistic: any;

statistic 是 statistic.js 中函数的名称
第 4 步:在 app.component.ts 中编辑您的构造函数

constructor(private router: Router) {
router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    statistic(window.location.pathname);
  }
});
  }

我希望这会有所帮助，因为 matomo for angular 没有有用的教程