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

	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:

var app = angular.module(“yourApp”, [“mixular-directive”]);

Once you have added the dependency, you can start tracking events in your application, e.g:

Feedback	

Add the property mixular and specify the events on which you want to trigger the tracking, supported event types are:

• click
• focus
  1. hover
  2. keydown
  3. keypress
  4. keyup
  5. mousedown
  6. mouseenter
  7. mouseleave
  8. mouseout
  9. mouseover
  10. mouseup
  11. scroll
  12. 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