Unable to track route changes in Angular 8 via Matomo/Piwik

Question

I've followed the Matomo docs (not especially helpful in terms of where to put things and how to implement them) and I've also tried the method of using ngx-Matomo and for some reason that isn't working either.

The issue I'm having is that my initial visit gets logged, but nothing beyond that when I click on new "pages" (routes). The only time I get a trigger is if I refresh the page or reload my localhost or test site but normal navigation is not being tracked.

I currently do not have access to any options inside of Matomo itself due to profile restrictions but I'm wondering if that's where the problem lies.

Here is my ngx-matomo code and boiler plate Matomo script (URLs and some names changed to protect the project):

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);
  })();

App root:

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);
}

component setup:

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');
  }
}

This NPM is also imported in my app.module.ts

Any help would be great. I'm at a total loss as to why the ngx-matomo isn't working. This could point to an issue with the Matomo service I'm using itself.

Answer 1

I guess you have already solved the problem but to save other people time here is my solution:

The problem came from the fact that in Matomo itself PageViews are tracked. A pageView is meant in a SinglePage application but only the initial loading of the page. When changing pages in the application itself, angular only loads new elements into the DOM and there is no usual page change. How you configure the connection to Matomo is up to you. Either you use the Matomo script and copy it in the index.html file in the end of the body tag. Or you use the matomo-injector of the angular module.

Next, the Angular page change must also be tracked. This is done via the MatomoTracker. Here you don't use the setDocumentTitle method but the trackPageView method.

To prevent the initial page load from appearing twice in matomo, a query on the window["_paq"] element helped me. If this is defined Matomo is already loaded in the page and it is a page change within the application, if it is not yet present Matomo is loaded first and thus takes over the tracking itself.

So in code I added the following code to the start of each onInit of my components which represents new pages:

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

It is advantageous to set the title of the page because in Matomo the pageView tracker itself can access the title of the page. To make this solution work, a tracking of PageViews must be configured in Matomo. Because of the information that initial page views are already tracked by you, I assume that this is the case.

Answer 2

In the past I tried also to implement Matomo in Angular - with success. Here is my solution without using external npm packages:

Step 1: Create an javascript file and put in the following code

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);
    })();
  })();
}

replace MY_URL with your url or path to matomo.js

Step 2: Edit your angular.json (projects > your projectname > architect > build > options)

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

Step 3: Edit your app.component.ts where you put in your includes (in the top of the file)

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

statistic is the name of the function in statistic.js

Step 4: Edit your constructor in app.component.ts

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

I hope this helps, because there is no useful tutorial for matomo for angular

Answer 3

I can't comment so I'll ask here. Are you running the following code when the page is changed? The doc says "For now tracking events and actions is manual and is not injected into the html". I assume this means if you click a button to say, login, you need to include the code below when it changes.

this.matomoTracker.trackEvent('category', 'action', 'name', someVal);