4

我遵循了 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 服务本身存在问题。

4

3 回答 3

1

在过去，我也尝试在 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 没有有用的教程

于 2020-11-09T15:46:10.590 回答
0

我想你已经解决了这个问题，但为了节省其他人的时间，这是我的解决方案：

问题来自于 Matomo 本身的 PageViews 被跟踪的事实。pageView 是指 SinglePage 应用程序，但只是页面的初始加载。在应用程序本身更改页面时，Angular 仅将新元素加载到 DOM 中，并且没有通常的页面更改。如何配置与 Matomo 的连接取决于您。您可以使用 Matomo 脚本并将其复制到标签index.html末尾的文件中。body或者你使用matomo-injectorangular 模块。

接下来，还必须跟踪 Angular 页面更改。这是通过 MatomoTracker 完成的。在这里，您不使用setDocumentTitle方法，而是使用trackPageView方法。

为了防止初始页面加载在 matomo 中出现两次，对window["_paq"]元素的查询帮助了我。如果已定义，Matomo 已经加载到页面中，并且是应用程序中的页面更改，如果还没有出现，则首先加载 Matomo，从而接管跟踪本身。

因此，在代码中，我将以下代码添加到onInit代表新页面的每个组件的开头：

if (window["_paq"]) {
      this.matomoTracker.trackPageView(this.titleService.getTitle());
}

设置页面的标题是有利的，因为在 Matomo 中 pageView 跟踪器本身可以访问页面的标题。为了使这个解决方案有效，必须在 Matomo 中配置 PageViews 的跟踪。由于您已经跟踪了初始页面浏览量的信息，我认为是这种情况。

于 2021-01-21T11:13:52.507 回答
0

我无法发表评论，所以我会在这里问。当页面更改时，您是否正在运行以下代码？文档说“现在跟踪事件和动作是手动的，没有注入到 html 中”。我假设这意味着如果你点击一个按钮说，登录，你需要在它改变时包含下面的代码。

this.matomoTracker.trackEvent('category', 'action', 'name', someVal);
于 2019-11-19T17:46:20.607 回答