Hi guys, sorry about reviving this old thread, but it’s the closest I could find to my problem/question. It is true as has been suggested that manually peppering _pag.push trackPageView directives throughout angular/angular2 static content html pages will allow piwik to track events. When I proposed this to my dev team it was summarily shot down as being too brittle and hard to maintain the tracking code in HTML tags. I agree, but I lost my most obvious way of using piwik with my angular2 app. After a bit of begging it turns out that my dev team uses a custom class to validate/verify authentication/authorization of angular routes. This typescript file provides direct access to every routed URL an end user navigates to. with this I was able to embed event tracking and page view directives in the .ts file. with this I was able to track any and all navigation in the angular2 SPA without having to touch any HTML tags and no ugly :javascript[(_paq.push…)]; sprinkled all over the place. One location 3 piwik api calls and voila. this was done by exporting the class in auth.ts then importing the class throughout the app routes for other SPA page sections.
index.html → contains the main javascript tracking code generated by the piwik controller.
auth.ts → contains customURL, eventTracking, trackPageView, setUserId directives. where I could not get access to service side objects in index.html. by using the ts file I can access url, user object values.
Here is the sticking point. I can only use _paq in my local environment. When I try to build (npm run build:dev) the buld fails because the ts file “can’t find name _paq”. Ok great now i’ll simply create a global variable somewhere in my main.ts, export that variable (export var _paq=_paq || ; ), then import _paq where I need it. No worky. When I declare _paq so the .ts see’s it as declared which allows the build, no no piwik tracking occurs at all.
so I have a solution but it is apparently an unworkable hack. I can track angular2 routes through our auth checker but only in my local environment. this is because when I place these lines in my code a declaration error is thrown, but tracking occurs in piwik from my locally run instance (we’re using web pack).
console.log(state.url);
_paq.push(['trackEvent', window.location.pathname.split('/')[1],window.location.pathname.split('/').pop()]);
_paq.push(['setCustomUrl', state.url]);
_paq.push(['trackPageView', state.url.split('/').pop()]);
in my intellij console
Cannot find name ‘_paq’.
this is a lot to read, i’m sorry if it seems like gibberish. I don’t know the etiquette of how much to write vs how much code to provide etc.
I do have this question as well. With just the tracking code in index.html tracking occurs only upon page reload. I get this because the server is invoked on browser refresh. when I add _paq.push commands to my auth.ts script with the state.url defined I can then track all routed URLs, but I get a undeclared variable error. When I declare _paq globally then piwik tracking stops everywhere, even on page refresh.
is there a suggestion you guys have to debug or instrument the tracking process so I can troubleshoot why this occurs?
