Comments (10)
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.
from ngx-matomo.
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?
from ngx-matomo.
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).
from ngx-matomo.
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.
from ngx-matomo.
I'll answer in matomo's issue while we are investigating, I'm not sure your plugin is responsible
from ngx-matomo.
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();
}
from ngx-matomo.
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.
from ngx-matomo.
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.
from ngx-matomo.
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
from ngx-matomo.
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?
from ngx-matomo.
Related Issues (20)
- `addEcommerceItem()`: Value for item is not set when category is `undefined`
- Not compatible with Angular 16 HOT 9
- How to enable debug mode HOT 1
- How to disable matomo tracking after user declined cookies?
- Compatibility with angular 17 HOT 5
- Error after update of `@angular/core` version `17.0.8` HOT 3
- Enable routerTracking will throw error HOT 1
- Page views & events only visible in user profile, not registered as "Behaviour" HOT 1
- Support for Angular Universal HOT 1
- Angular 13 compatibility HOT 13
- Can't make it add the data-cookieconsent="statistics" attribute to the script tag
- Update project dependencies to angular 13, if this is not possible we will no longer use your package HOT 3
- How to disable link tracking?
- Initialize Matomo via Root Component HOT 2
- HttpRequest for trackerUrl and siteId HOT 7
- Error TS2694 when building app on Angular 9 HOT 4
- How to init matomo _after_ user has accepted terms? HOT 5
- Support Angular 15 HOT 2
- With routeTracking enabled, matomo's request says in pending sometimes.
- Dynamic configuration of scriptUrl, trackerUrl and siteId
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-matomo.