As promised I will be exploring more analytics software this year, my 2nd target is mixpanel. Like KISSmetrics, mixpanel is a paid analytics package in the market. In this post I will introduce basics of mixpanel and go through how to implement it with the help of Google Tag Manager.
Key Concept – Event + Properties
Similar to KISSmetrics and unlike Google Analytics, mixpanel by default wouldn’t send you any data or reports unless you define and track the metrics. That means if you’re running a web site, you won’t even see a single page view in mixpanel after you’ve installed the default JavaScript snippet.
In mixpanel, we track occurrence of ‘event‘, and we associate ‘properties‘ to each event.
Using my blog as an example, I want to know whether people follow me on various channels (e.g. facebook, LinkedIn), so I will track the ‘follow me’ event which happens whenever visitor clicks on the social icons on my site, and I will associate a property called ‘action’ to the follow me event that describes whether they are following me on Twitter or liking me on my facebook fanpage.
Pricing Scheme
The pricing page is here. At the moment of writing the pricing scheme is as follows:
So what is a data point? A data point is consumed every time you track an event. Imagine you just track page view of your site using mixpanel, that means if your web site is having < 25000 page views per month, you can use mixpanel for free! (shame to say my blog falls into this category). And you can even extend your data point to 200,000 if you put the mixpanel logo in your web site (like what I did in the footer).
Already LOVE it right? Let’s implement it and see what it can do for us!
Setting up mixpanel account
Go to mixpanel.com, start signup for an account:
By filling a few things it brings you to the quick install screen. Similar to Google Analytics or KISSmetrics, drop the JavaScript tracking code into all pages of your site:
Of course you can use tag manager to add your tag. For example, I am using Google Tag Manager to put in the tag:
Like what I said, even if you’ve put the above snippet to your site, you won’t see any data coming in. Let me take an example on how to really track event and put data to mixpanel.
Tracking mixpanel event and attach properties
We can use Google Tag Manager (GTM) to implement the tracking code for mixpanel too. All you have to do is the same for using GTM to implement Google Analytics: you need to define the tag, macro and rule. If you don’t know what I am talking about, please read my previous post on how to use GTM to implement event tracking. When you’re ready, check out the following examples:
Example 1: Track page view
Step 1: create tag
Taking the simplest example – say I want to track page view of my site. What should I do? This is when you need to use some JavaScript – don’t worry, really isn’t as hard as you think. The mixpanel API is quite simple. To track an event, called this:
<script> mixpanel.track(event, properties object); </script>
For example in my case, I want to track the ‘view page’ event, and associate the ‘url’ of the page that the user is viewing. To do this create a new custom HTML tag in Google Tag Manager and paste the following code into it:
<script>
mixpanel.track('view page', {
'url': location.pathname
});
</script>
And this is how it looks on when I create the tag in GTM:
Step 2: add rule
In this case since we want to track page view for all pages, we just have to add the All pages rule to fire the tag.
Example 2: Track follow me
The next example is to track # of clicks on the social icons on my blog pages. Before we dive into the GTM setup, please note for click events, you will need to identify the HTML element which will trigger the click event – in my case here, it’s the <img> (image) element which contains my social icon:
<img src="/images/facebook.jpg" class="nopin" alt="Friend me on Facebok"/>
Once you know which element will trigger the event, you can use either the id or the class to reference to the element when defining GTM rules. That actually means to use GTM, it’s better if you know some basic HTML. Here’s a very simple reference for you to start with.
Step 1: define macro
If you’ve read my previous post on GTM event tracking, you know the new GTM have auto event variable that we can reference to. So in this example, create the element macro so that we can reference it in our tag as follows:
Similarly, define another macro called element classes, set it to be auto event variable and reference it to Variable Type: Element Classes.
Step 2: create tag
The first step is to create the click event listener tag in GTM if it’s not there.
Then similar to the page view tag, we create another custom HTML tag for the follow me event:
<script>
mixpanel.track('follow me', {
'action': {{element}}.alt
});
</script>
Note that at the same time we are passing the property ‘action‘. Here we’re referencing the {{element}} we’ve just created in step 1. And the .alt basically means that I am getting the ‘alt’attribute of the element that triggers the event – which is the alternate text of the social media icon image that describe which social media icon is clicked. Using the my above example, the value will be “Friend me on Facebook”.
Step 3: create rule
We want to fire the follow me tag whenever someone clicks on the social media icon of my blog. Given we’ve installed the click event listener, we can now utilize the event raise by the listener and create a rule as follows:
Publish all the changes and we’re done!! And see there’s no need to touch the site source code using GTM!
Result
So you can now go the mixpanel and under activity > trends, you can find all the events you’ve defined being tracked! And you can drill down to a specific event, for example here I can see the follow me event that I’ve defined, together with the action property that I added to the event:
See mixpanel is so smart to automatically pick up the action property I defined! And of course it helps me to capture other default properties for the visit such as browser, region, and even the Google Analytics campaign parameters.
Summary
So this is how you get your mixpanel started! I really love it so far as it’s free (for a low traffic site like mine…), and quite easy to understand and implement. With the JavaScript API you can add any number of properties to a given event, which I think this is much stronger than Google Analytics as you will have to define custom dimensions in configuration in order for GA to recognize them.
In the next post I will start using the various tools in mixpanel to do some more fun stuff, stay with me!