Mixpanel Tracking in AngularJS

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

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:

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

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

AngularJS + Underscore The ultimate web-development toolkit

Before starting my latest web-development project I was looking for some robust javascript frameworks that I could use. I was familiar with AngularJS and I loved it, but it doesn’t have a lot of utility methods and I was looking for some solution to solve that problem.

So, I thought about using underscoreJS, which is collection of utility methods with angularJS and I got myself a killer web development toolkit, in this blog post I have summed up underscoreJS methods which I find useful. visit underscorejs.org to view all the available methods.

Using Underscore with Angular:

Combining angular and underscore is pretty straightforward, want you can do it add import underscore in your index.html, then add it as a service.

And then we could inject it into our controllers:

Useful Underscore methods:

I have compiled a list of my favourite underscoreJS methods, you can always visit underscorejs.org to view all the methods that are available in underscore.

###_.isUndefined:
This method is used to determine weather the specified value is undefined or not, I know you could always do typeof value === “undefined” to check weather it is undefined or not, but I find this neater.

###_.defaults:
This is also a very useful method, it allows you define a default values for something if they are not present.

_.where:

This method comes handy when you want to search something in the array of objects using some attributes present in the object.
consider the example below.

_.uniq:

This method operates on arrays, and it removes duplicates in the array.
Consider the following example:

###_.pluck:
if you ever wanted to extract some values from an array of objects, well the pluck method let’s to do that.
Here is the example:

By merging these two awesome web development frameworks together we can get a pretty nice web development experience, as angular serves as an awesome MVC, and underscore provides a very useful collection of utility methods.