Невозможно отслеживать изменения маршрута в Angular 8 через Matomo / Piwik

Я следил за документами 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, которую я использую сам.


frontend angular analytics matomo piwiktracker
person h34th3r5    schedule 19.11.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Раньше я также пытался реализовать Matomo в Angular - и безуспешно. Вот мое решение без использования внешних пакетов npm:

Шаг 1. Создайте файл javascript и вставьте следующий код.

statistic.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 для angular

person xtrars    schedule 09.11.2020

arrow_upward
0
arrow_downward

Я не могу комментировать, поэтому спрошу здесь. Вы запускаете следующий код при изменении страницы? В документе говорится: «На данный момент отслеживание событий и действий осуществляется вручную и не вводится в HTML». Я предполагаю, что это означает, что если вы нажмете кнопку, чтобы сказать «Войти», вам нужно будет включить приведенный ниже код, когда он изменится.

this.matomoTracker.trackEvent('category', 'action', 'name', someVal);
person Chris Hayes    schedule 19.11.2019
comment
Мы не отслеживаем входы в систему или какие-либо действия пользователя с точки зрения форм и т.п. (на нашем сайте нет серверной части для подобных вещей). Я просто хочу отслеживать, когда кто-то перемещается из дома в другое по маршруту. Я не реализовал код события отслеживания, потому что у меня нет такой детализации. - person h34th3r5; 19.11.2019

arrow_upward
0
arrow_downward

Думаю, вы уже решили проблему, но, чтобы сэкономить время других людей, вот мое решение:

Проблема возникла из-за того, что в самом Matomo отслеживаются просмотры страниц. PageView подразумевается в приложении SinglePage, но только при начальной загрузке страницы. При изменении страниц в самом приложении angular загружает только новые элементы в DOM, и обычное изменение страницы не происходит. Как настроить подключение к Matomo - решать вам. Либо вы используете сценарий Matomo и копируете его в файл index.html в конец тега body. Или вы используете matomo-injector модуля angular.

Далее необходимо отслеживать изменение страницы Angular. Это делается через MatomoTracker. Здесь вы используете не метод setDocumentTitle, а метод trackPageView.

Чтобы первая загрузка страницы не появлялась дважды в matomo, мне помог запрос по элементу window["_paq"]. Если это определено, Matomo уже загружен на страницу, и это изменение страницы в приложении, если оно еще не установлено, сначала загружается Matomo и, таким образом, берет на себя отслеживание.

Итак, в коде я добавил следующий код в начало каждого onInit моих компонентов, который представляет новые страницы:

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

Удобно устанавливать заголовок страницы, потому что в Matomo трекер pageView сам может получить доступ к заголовку страницы. Чтобы это решение работало, в Matomo необходимо настроить отслеживание просмотров страниц. Из-за информации о том, что начальные просмотры страниц уже отслеживаются вами, я предполагаю, что это так.

person raphael_mav    schedule 21.01.2021