Angularytics: How to track page views & events on AngularJS's SPA

[Gonto]

Hey guys,

I've implemented a new service + filter to make it easy to track PageViews and Events with Analytics providers (For now only Google Analytics and Console logger).

I'd love it if you guys could check it out and give me some feedback on what you guys think that should be added/removed.

http://www.blogeek.com.ar/2013/06/03/angularytics-the-solution-to-tracking-page-views-and-events-in-a-spa-with-angularjs/

Thanks for all the help and bests!

Gonto

[Arturo Hernandez]

Gonto,

I think you did a great job. I think I am definetly going to be using it. I do have one comment.

<a href="file.pdf" analytics-event="Executable Download">Download</a>

instead of

<a href="file.pdf" analytics-event="Executable Download" analytics-on>Download</a>

Doing so would result in shorter HTML. If my application was simple, I would not worry about it. But, in angular, many applications need to use several tags and it can affect readability. I'm not sure if there is a canonical way of dealing with this sort of issue. I hope others here can weigh in on that.

[Martin Gontovnikas]

Hey,

That's not actually my library. I use filters for logging analytics event :P. https://github.com/mgonto/angularytics#using-the-filter

Bests,

---

Martin Gontovnikas

Software Engineer

Buenos Aires, Argentina

Twitter: @mgonto

Linkedin: http://www.linkedin.com/in/mgonto

Github: https://github.com/mgonto

[Arturo Hernandez]

That is hilarious!!

In angulartics

<a href="file.pdf" analytics-event="Executable" analytics-category="Downloads" analytics-on>Download</a>

In angularytics

<a href="file.pdf" ng-click="doSomething() | trackEvent:'Downloads':'Executable'">Download</a>

Did you have a particular reason on choosing to implement analytics in a filter instead of a directive? Or is it just open to us to pick on what style do we prefer?

[Martin Gontovnikas]

Because the directive assumes you will actually track events on click.

With filter, you can use any event, like ng-keydown or any custom event from you!

---

Martin Gontovnikas

Software Engineer

Buenos Aires, Argentina

Twitter: @mgonto

Linkedin: http://www.linkedin.com/in/mgonto

Github: https://github.com/mgonto

[Luis Farzati]

Hey, just to clarify: 

The directive assumes a click event if you don't specify any, e.g.:

<a href="file.pdf" analytics-event="Executable" analytics-category="Downloads" analytics-on>Download</a>

but you can always do

<a href="file.pdf" analytics-event="Executable" analytics-category="Downloads" analytics-on="mouseover">Download</a>

 

or whatever DOM events are allowed :)

It uses angular.bind() internally.