trackPageView

[fredericg78]

Hi,
something is not clear for me. Is it necessary to call matomoTracker.trackPageView() to track a page view ? It seems it is to see it in the matomo dashboard.
Example of code (Angular 8), with a singleton service injected in components, and a call of trackPageViewToMatomo from the ngOnInit() of these components:

`
constructor(private matomoTracker: MatomoTracker, private userService: UserService) { }

trackPageViewToMatomo(router: Router, route: ActivatedRoute) {

const pageUrl = router.url;
const pageComponent = route.component['name'];
// this.matomoTracker.enableHeartBeatTimer(10);
// this.matomoTracker.enableLinkTracking(true);
this.matomoTracker.setUserId(this.userService.getUserLogin());
this.matomoTracker.setCustomUrl(pageUrl);
this.matomoTracker.setDocumentTitle(pageComponent);
// this.matomoTracker.setGenerationTimeMs(0); // if compute of page generation time
this.matomoTracker.trackPageView();
}
`

The issue i have is the call of trackPageView leads to browser freezes (chrome and firefox), even if i do this call in a delayed observable.

[Arnaud73]

That is curious, your code seems to be OK. You could maybe call setUserId only when a new user logs in, but that is not going to change the behavior you observe.
If it freezes during the call to trackPageView, and if the tracker is already fully loaded and operational (it's asynchronous), then, it means that it freezes in Matomo's code, else, it's freezing on a push in an array which is quite unlikely. Or maybe, you have several of calls for Matomo waiting for the Matomo tracker to be loaded and then it has to proceed with everything that is in queue, but still quite unlikely since it loads quite fast.

Do you have a stack trace showing where's it's blocked? Is your Matomo version quite up to date?

[mgohin]

We just had a similar issue with browser freeze, caused by a matomo call never ending.
I described the issue in matomo repo : matomo-org/matomo#15229

You should check your html structure to check if there is something like us.

I don't know if the issue is matomo or ngx-matomo (my bet on matomo).

[Arnaud73]

Thanks @mgohin for this related issue. I'm curious to know if your problem is being solved by switching the renderer to Ivy. It would not be an ideal solution, but would rather indicate that the problem is partially linked to the code generated by the renderer. Also, keep in mind that Ivy shall be the new default renderer in Angular 9.

[mgohin]

I'll answer in matomo's issue while we are investigating, I'm not sure your plugin is responsible

[Arnaud73]

I agree this is very unlikely related to my plugin, since it does not interfere in this example: the Matomo tracker works on its own in this scenario, so it's a problem between the Matomo tracker and the compiled Angular template.

However, since two of you experienced the same problem, I'm have a look at it, at least to be able to give hints or solutions to future similar problems.

[ghost]

I face similar issues with looping matomo requests.

And for me the same question: I setup matomo in my app.component.ts

constructor(private authService: AuthService,
    private cartService: CartService,
    private alertify: AlertifyService,
    public seoService: SEOService,
    private matomoInjector: MatomoInjector) {
      this.matomoInjector.init('https://mywebsite.de/piwik/', 1);
    }

Do I need to call this in every component I have? I work with child components and in my onInit I have always:

constructor(private blogService: BlogService,    
    private route: ActivatedRoute,
    private router: Router,
    private seoService: SEOService,  
    private sanitizer: DomSanitizer,
    private matomoTracker: MatomoTracker) { }

ngOnInit() {
this.matomoTracker.setDocumentTitle(this.postItem.title);
this.matomoTracker.setCustomUrl(this.router.url);
this.matomoTracker.trackPageView();
}

[Arnaud73]

Hi @kombasltd,

First, you must only use the injector once : it adds the Matomo tracker directly into the DOM. I have tested multiple injections, but it may have side-effects.

Then, you only call trackPageView (and other related calls) when you want to have a page view tracked. As a result, it shall only occur when the user changes the route. Next release of ngx-Matomo will provide a way to automate this process.

If you want to have all components of a page be tracked, you can use trackPageView for each one of them, but I have not tested this use case.

So, if you call this.matomoTracker.trackPageView() in the ngOnInit of every components, you shall endup with as many page views as there are components. However, it shall not loop. If so, please create a minimalist app reproducing this problem and I will have a look.

[ghost]

The problem seems to occur if you NOT change the route but the content via a route parameter. Let's say there is a component to show pages within my website.

https://mywebsite/home/page1
https://mywebsite/home/page2

And the route is

{ path: 'home/:slug', component: ShowPageComponent, resolve: {pageitem: PageShowResolver}},

Edit: This is my onInit:

ngOnInit() {
    this.subscription = this.route.data.subscribe(data => {
      this.pageItem = data['pageitem'];
      if (data['header_start']) {
        this.headerStart = data['header_start'];
      }
      if (data['page_style']) {
        this.pageStyle = data['page_style'];
      }
      this.safeContent = this.sanitizer.bypassSecurityTrustHtml(this.pageItem.content);
    });

    this.seoService.setPageTitle(this.pageItem.title); 
    this.seoService.createLinkForCanonicalURL(this.router.url);    
    this.seoService.setMetaTag('description', this.pageItem.metaDescription);
    this.seoService.setMetaTag('keywords', this.pageItem.metaKeywords);

    this.matomoTracker.setDocumentTitle(this.pageItem.title);
    this.matomoTracker.setCustomUrl(this.router.url);
    this.matomoTracker.trackPageView();

    if (this.pageItem.noIndex) {
      this.seoService.setMetaTag('robots', 'noindex');
    } else {
      this.seoService.removeMetaTag('robots');
    }
  }

So the onInit tracking in the "ShowPageComponent" is only working for "page1", because onInit is only called once as long as the component is not destroyed.

If I change the parameter to "page2" with angular routerlink, onInit is not called anymore - the new content is fetched via the resolver and the subscription. So I need to put the trackPageView somewhere else. And for now I put it in ngDoCheck. Maybe that's causing the issue.

Ah damn: I stumbled about my own explaination here to find the solution ;-)

ngOnInit() {
    this.subscription = this.route.data.subscribe(data => {
      this.pageItem = data['pageitem'];
      if (data['header_start']) {
        this.headerStart = data['header_start'];
      }
      if (data['page_style']) {
        this.pageStyle = data['page_style'];
      }
      this.safeContent = this.sanitizer.bypassSecurityTrustHtml(this.pageItem.content);

      this.seoService.setPageTitle(this.pageItem.title);
      this.seoService.createLinkForCanonicalURL(this.router.url);    
      this.seoService.setMetaTag('description', this.pageItem.metaDescription);
      this.seoService.setMetaTag('keywords', this.pageItem.metaKeywords);

      if (this.pageItem.noIndex) {
        this.seoService.setMetaTag('robots', 'noindex');
      } else {
        this.seoService.removeMetaTag('robots');
      }

      this.matomoTracker.setDocumentTitle(this.pageItem.title);
      this.matomoTracker.setCustomUrl(this.router.url);
      this.matomoTracker.trackPageView();
    });

I need to put everything into the subscription function. So it's called everytime if something changes and it's called only once for each change.

[fredericg78]

Hi,
something is not clear for me. Is it necessary to call matomoTracker.trackPageView() to track a page view ? It seems it is to see it in the matomo dashboard.
Example of code (Angular 8), with a singleton service injected in components, and a call of trackPageViewToMatomo from the ngOnInit() of these components:

`
constructor(private matomoTracker: MatomoTracker, private userService: UserService) { }

trackPageViewToMatomo(router: Router, route: ActivatedRoute) {

const pageUrl = router.url;
const pageComponent = route.component['name'];
// this.matomoTracker.enableHeartBeatTimer(10);
// this.matomoTracker.enableLinkTracking(true);
this.matomoTracker.setUserId(this.userService.getUserLogin());
this.matomoTracker.setCustomUrl(pageUrl);
this.matomoTracker.setDocumentTitle(pageComponent);
// this.matomoTracker.setGenerationTimeMs(0); // if compute of page generation time
this.matomoTracker.trackPageView();
}
`

The issue i have is the call of trackPageView leads to browser freezes (chrome and firefox), even if i do this call in a delayed observable.

Hi, i tried different things but the same issue occurs again, only on firefox. On chrome version 80.0.3987.149, it works. On firefox, after a manual stop of the javascript process which hangs the browser (does not occur if i remove the trackPageView call), here is the stacktrace:
Error: Script terminated by timeout at:
__read@http://localhost:4200/polyfills.js:6155:17
_spread@http://localhost:4200/polyfills.js:6169:24
debugCheckAndUpdateNode@http://localhost:4200/vendor.js:95065:106
debugCheckRenderNodeFn@http://localhost:4200/vendor.js:95051:36
View_TenantDetailsComponent_13/<@ng:///AppModule/TenantDetailsComponent.ngfactory.js:275:8
debugUpdateRenderer@http://localhost:4200/vendor.js:95043:21
checkAndUpdateView@http://localhost:4200/vendor.js:94418:14
callViewAction@http://localhost:4200/vendor.js:94654:39
execEmbeddedViewsAction@http://localhost:4200/vendor.js:94617:31
checkAndUpdateView@http://localhost:4200/vendor.js:94414:28
callViewAction@http://localhost:4200/vendor.js:94654:39
execEmbeddedViewsAction@http://localhost:4200/vendor.js:94617:31
checkAndUpdateView@http://localhost:4200/vendor.js:94414:28
callViewAction@http://localhost:4200/vendor.js:94654:39
execEmbeddedViewsAction@http://localhost:4200/vendor.js:94617:31
checkAndUpdateView@http://localhost:4200/vendor.js:94414:28
callViewAction@http://localhost:4200/vendor.js:94654:39
execComponentViewsAction@http://localhost:4200/vendor.js:94596:27
checkAndUpdateView@http://localhost:4200/vendor.js:94419:29
callViewAction@http://localhost:4200/vendor.js:94654:39
execEmbeddedViewsAction@http://localhost:4200/vendor.js:94617:31
checkAndUpdateView@http://localhost:4200/vendor.js:94414:28
callViewAction@http://localhost:4200/vendor.js:94654:39
execComponentViewsAction@http://localhost:4200/vendor.js:94596:27
checkAndUpdateView@http://localhost:4200/vendor.js:94419:29
callWithDebugContext@http://localhost:4200/vendor.js:95283:25
debugCheckAndUpdateView@http://localhost:4200/vendor.js:94985:12
./node_modules/@angular/core/fesm5/core.js/ViewRef.prototype.detectChanges@http://localhost:4200/vendor.js:85660:22
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick@http://localhost:4200/vendor.js:92083:26
next/<@http://localhost:4200/vendor.js:91972:105
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:6668:26
onInvoke@http://localhost:4200/vendor.js:91230:33
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:6667:52
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:4200/polyfills.js:6427:43
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.run@http://localhost:4200/vendor.js:91144:28
next@http://localhost:4200/vendor.js:91972:81
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.subscribe/schedulerFn<@http://localhost:4200/vendor.js:88709:52
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub@http://localhost:4200/vendor.js:267450:16
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.next@http://localhost:4200/vendor.js:267388:22
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next@http://localhost:4200/vendor.js:267334:26
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:267311:18
./node_modules/rxjs/_esm5/internal/Subject.js/Subject.prototype.next@http://localhost:4200/vendor.js:267077:25
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.emit@http://localhost:4200/vendor.js:88693:76
checkStable@http://localhost:4200/vendor.js:91199:35
onLeave@http://localhost:4200/vendor.js:91266:16
onInvoke@http://localhost:4200/vendor.js:91233:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:6667:52
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runGuarded@http://localhost:4200/polyfills.js:6438:47
./node_modules/zone.js/dist/zone.js/</Zone.prototype.wrap/<@http://localhost:4200/polyfills.js:6421:29

[yoannpicquenot]

I found myself into the same issue here, 100% cpu load and browser freeze.

The moment I comment that trackPageView() line, problem's gone.

Is there any update about this case?
I saw that issue has been closed, but is it solve somehow?