tag-manager
tag-manager copied to clipboard
_mtm.push can cause browser to freeze in some cases when used with Angular JS
Reported by a customer:
Matomo caused a complete freeze of our application's GUI in such a bad way, that we could see the CPU usage had been running higher and higher and every browser got absolutely unresponsiv and had to be shut down via task-manager. This was a big surprise, since there was nothing about any kind of changes to Matomo's JavaScript in the changelogs and we didn't had any changes in our application.
We updated then to Matomo Version 3.13.0 which helped a bit but not fully, so we did further researches and find the following solution - which is working in our environment:
We use: · Angular 8.2 · Angular JS 1.5
The freeze occured on pure Angular 8.2 as well as on mixed sites (Angular 8.2 & Angular JS 1.5)
The solution we found is by adding matomo inclusion code the following way:
====
(private zone: NgZone)
instead only using:
_mtm.push(data)
We used then:
this.zone.runOutsideAngular(_ => _mtm.push(data));
like here in this code snippets:
push(e, n = null) {
const t = {};
t[e] = n, this.log(`_mtm.push({'${e}': "${n}"}`);
try {
this.zone.runOutsideAngular(e => _mtm.push(t))
} catch (e) {
console.warn("matomoError", e)
}
}
====
As far as we could see the problem was caused between Angular and Matomo where Angular made some updates in a page, matomo then had reacted whereas angular had reacted: and we have had an infinite loop.
Next steps
Do we need first a code to reproduce before proceeding?
is there maybe any change we could make to prevent this issue? Is this maybe only documentation related?
@mattab sounds like you want to document this for angular. AFAIK there isn't anything we would do and would just close this issue. adding the website label in case you want to document something.
FYI: someone else confirmed they experienced a browser lockup issue, and that applying these changes have fixed the issue. This might be an issue experienced by a lot of people.
There is nothing we can do @mattab
This may be a pure angular thing. I suppose they already use window._mtm if not maybe that makes a difference instead of _mtm
FYI I encountered also this issue. Doing this.zone.runOutsideAngular(e => _mtm.push(t)) fixed the freeze.
Thanks @mattab ! :-)
To be documented somewhere in the doc...? Either at https://developer.matomo.org/guides/tagmanager/embedding and/or https://developer.matomo.org/api-reference/tagmanager/javascript-api-reference?