Angular.js

Hi,

I’ve started to build a little Angular.js app - and need to track how many times a route is visited. I’m sure as time goes by, more things will need to be tracked - so rather than re-invent the wheel, I thought Piwik! :slight_smile:

However, I’m very new to Angular - so just wanted to check that Piwik would work with it before proceeding. For example: all my url’s start with #/ - does Piwik recognise the hash as a different page?

I’ve googled… checked out stack overflow etc, but can’t find any examples of people using Piwik with Angular.

Thanks,
Rob

So what people usually do with interactive apps like Angular.js is that every time you open up a new view you use setCustomUrl + trackPageView to track a new view.

In short: Yes Piwik works with Angular.js, but you’ll have to trigger page views manually.

Thanks. The app has an express backend… serving up content via routes… triggered by routes on the Angular side. So I guess another way would be to run the piwik code on the server, within the express route?

I’m going to have a play around and see! :slight_smile:

Maybe this helps: GitHub - mike-spainhower/angular-piwik: Angular service for piwik tracking

Hi guys, I’ve listed a couple AngularJS projects on Integrations - Analytics Platform - Matomo

If you’re looking to track AngularJS Apps with Piwik give them a try!

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?

Hey guys one of my teammates came across this plugin at npmjs.org. Life Saver! angular2piwik. It eliminated the undefined _paq issue and by using our auth component which tracks every URL through the router to authorize usage. We are able to track every URL w/o having to manually inject ngclick or onclick in html.

Thanks awronka !!