时间戳

首页 > 解决方案 > 无法通过 Matomo/Piwik 跟踪 Angular 8 中的路线变化

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

问题描述

我遵循了 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');
  }
}

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

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

标签： angularfrontendanalyticsmatomopiwiktracker

解决方案

在过去，我也尝试在 Angular 中实现 Matomo - 成功。这是我不使用外部 npm 包的解决方案：

第 1 步：创建一个 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);
  }
});
  }

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

推荐阅读