For my recent angularJS application, I needed to integrate Mixpanel.
I didn’t found any light-weight directives which I could include in the application that would allow me to easily track events using Mixpanel in the application, so I built Mixular.
Mixualr is a lightweight angularJS directive which you can use to track events in your application.
Installation
You can install mixular via bower
|
1 2 |
bower install mixular |
Or you can clone the repo from Github
How to use it
To use mixular in your application include the Mixpanel javascript tracking library, and the angular-mixular-directive.js in your index.html
Then add mixular dependency in your AngularJS application:
|
1 2 |
var app = angular.module(“yourApp”, [“mixular-directive”]); |
Once you have added the dependency, you can start tracking events in your application, e.g:
|
1 2 |
<a href=“#/feedback” mixular=“click” eventLabel=“Feedback Clicked” prop-user=“James”>Feedback</a> |
Add the property mixular and specify the events on which you want to trigger the tracking, supported event types are:
- click
- focus
- hover
- keydown
- keypress
- keyup
- mousedown
- mouseenter
- mouseleave
- mouseout
- mouseover
- mouseup
- scroll
- select
The eventLabel can be used to specify a label for the event e.g “Banner Ad clicked”.
Passing properties
To pass multiple properties for a event you can type the keyword prop followed by the property name e.g prop-product=“Laptop” prop-price=“500”
That’s all
If you have any questions or suggestions regarding the directive, leave them in the comment section below.
Thanks