Mixpanel's Basic Tutorial to Start Custom Event Tracking on your Website

When you ask yourself, how many visitors does your website have? From which countries are they coming? What is the most visited page? Do I have more visits from social networks or from search engines? Why am I losing traffic in my website? You can use Google Analytics to get an answer.

But how do you answer? How many users clicked your calls to action (CTA)? How many users who entered your landing went to your registration or purchase page? How many users are engaged to your website? This is where you can use Mixpanel.

Mixpanel allows you to do this by capturing 2 basic elements:

  • Events They are specific actions on the site like page visits, clicks on buttons or links, upload files etc.
  • Profiles You can register the users of your website and the platform will track the events associated with each one of them.

For each event or profile, you can register custom properties in addition to the ones that are automatically associated with them like date and time, among other things.

In this guide we will cover only the event log which is a basic use. Later we will see the registration of profiles in other posts.

How to install Mixpanel on your website

First, you must create an account at www.mixpanel.com in order to obtain the necessary codes to start using the platform.

Mixpanel has a free plan that allows you to register a maximum of 20 million events or 1,000 users; this plan is good for you to learn how to use the tool.

After creating your Mixpanel account you must edit the HTML of the main template of your website and inside the tag <HEAD> you must include this code

<!-- start Mixpanel --><script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,  
0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");  
for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);  
mixpanel.init("YOUR TOKEN");</script><!-- end Mixpanel -->  

Replace YOUR TOKEN with the account token you that you will find when you click on Account in your Mixpanel dashboard and goes Projects tab.

Mixpanel Token

How to track events with Mixpanel

With Mixpanel you can customize the event tracking, it's not like Google Analytics that has web traffic as a basic element.

Pageview tracking

Let's say you want to register when a visitor enters to the different pages of your website and then analyze this data. To do this you can put this code in the <HEAD> HTML tag. Although it can be inside <BODY> too.

<script type="text/javascript">  
    mixpanel.track("Page Name");

You should do this on every page that you wish to track visits.

If everything was fine you can enter the website and then you can see the events recorded in Mixpanel reports like Segmentation. You can check the Mixpanel help if you have problems.

To register the click on a button you can add the basic event in the javascript executed on the click event.

mixpanel.track("Event name");  

Another option is to use the following code that tracks the click on HTML elements using the CSS selector and records the Event name.

<script type="text/javascript">  
    mixpanel.track_links('CSS-Selector', 'Event name');

For example if the ID of the purchase button of your site is btnPurchase you could register the event in the following way:

<script type="text/javascript">  
    mixpanel.track_links('#btnPurchase', 'Purchase Click');

We recommend using click tracking to measure the efficiency of your calls to action (CTA)

Basic analysis

Now that you are recording page events and clicks on your Calls to Action you can do some interesting analysis. Take as an example a basic service site where the following page events are logged:
* Home page: Home or landing page. * Pricing page: Entry to the page where the plans and prices of the products or services are explained. * Purchase page: Entry to the page that appears when you click on any of the CTAs on the page. * Thank you page: The final page that appears when the purchase of the product or service is executed.

On each page, there are call-to-action buttons that will generate the event Purchase click when clicked.

The Segmentation report will show you when every event is recorded.
Mixpanel segmentation report

But it is using Funnels how you will find quite interesting things. First, we will show you how the funnels are created.

Since you are interested in knowing more about your users, learn more about Toky and help your customers to communicate better with your business. Try Toky Business Free for 14 days

Creating a funnel

A funnel or conversion funnel is a graph that shows you several steps and tells you how many visitors of one step, reached the next.

In terms of events in Mixpanel, we need to know how many visitors who had an Event A subsequently recorded an Event B. To create the funnel you do the following:

  • You enter the Mixpanel account and clicking on the option Funnels you will see on the right side a dropdown and some buttons next to it. Mixpanel funnel
  • Click on the plus sign + next to the dropdown and the page Create a new funnel will appear. There you enter the name of the funnel and in Step 1 you select the first event and in Step 2 the second and so on. When you're done, click Save. Mixpanel creating conversion funnel

For example, if you want to see how effective your landing page is, in this example we marked Home page we must know how many effective purchases were made from there. To do this you create a Funnel with the following events in this order:

  1. Home page
  2. Purchase page
  3. Thank you page

Mixpanel Funnel sample

From this example, you can conclude that from the visits to the Home page 14.54% goes to the Purchase page by clicking a CTA button and of that, only 33.83% finish the purchase and arrive at Thank you page. From all the visits that enter de Home page only 4.92% become effective purchases.

With these results, you should analyze the two steps to see what makes so few people click on the Purchase button in the home page and also what makes people regret to end the purchase.

Another interesting test is to see which page on your site sells best between Home page and Pricing page. For this you can create two funnels:

  1. Home page / Thank you page
  2. Pricing page / Thank you page

Compare the results of these two funnels and you can make some decisions.

As you can see with Mixpanel you can have detailed information that could add value to your analysis with Google Analytics. At Toky, in addition to analyzing the site www.toky.co we like to see the traffic that our blog sends to our site as you can see in this article. You may also need to know that Mixpanel has a mobile app that will allow you to track your websites from anywhere.

Many visitors will find useful talking with your agents in the purchase process, let them call you with a click. Try Toky Business free for 14 days

comments powered by Disqus