Building a user dashboard (part 1)

Building web services can be a tricky business, providing users with the tools they need to monitor content performance is one of the most important things we can do. There are many ways to provide those tools but one of the best ways is to give them feedback on how their content is performing.
There are plenty of services they can use to monitor this, but there’s nothing quite like showing it to them right there on the page. Creating a user dashboard can inform they how to improve what they are doing and also help improve your platform overall.

Capturing the data

Now we can gather user views simply using Google analytics. But displaying these back to users is notoriously difficult and would require each user to have access to our google analytics. So we have to us another tool to so this information to our users. Mixpanel is a great service that is easy to integrate into any website. All that’s needed is to include jQuery and their custom library. You can then create custom snippets into each of the pages you want to monitor. The power of Mixpanel soon becomes apparent you can set it to listen for any major event on your page. Ranging from simple page views to button clicks. This is what we will use to gather information to supply to our users. Setting up the listeners can be a little fiddly when dealing with multiple users. The we way I tend to do it for page views it to include the user id into the listener so when you request the data back you only get the views related to that page or user. I’ve included some simple examples below.

 
// page track you could change include a users id using php here
mixpanel.track("pageview <?php echo $user_id ?>"); 

// you can also capture button clicks

mixpanel.track(
    "Clicked Ad",
    { "Banner Color": "Blue" }
);

Retrieving the data

Mixpanel had a pretty simple plugin and play way of fetching the data from their service. The data comes back performatted as JSon. This makes the data extremely easy to handle and can be converted quickly into an array for use within you graphs. When you request the data you must request it with the name of the links that you created in the previous steps. Its a pretty simple to access the data using curl and then format it however you need to theres much more information on this here.

Wrapping up

For this part of the tutorial I’ve shown you how to include Mixpanel, collect user data and the retrieve that data ready for use. In the next part we’ll look at how we can use this data to create complex animated charts using D3.js