Adding analytics to your Nuxt site

Given the requirement for monitoring site traffic, I started with a simple google search. According to the first page of the Google search result, Google Analytics should be the best choice. And it's free too. The researcher in me wanted to dig deeper - so I made a list of similar services. One of them was - mix panel - their free plan has 100K monthly tracked users. I don't expect my site to have that kind of traffic. Ever.

Here is what I did, which could serve as a 'getting started guide for the mix-panel'. Their documentation for Javascript is pretty neat and straightforward.

First, install the npm package via npm install --save mixpanel-browser. Once that's done, all we need is to add the following to the pages that we would like to track.

import mixpanel from 'mixpanel-browser';
// or with require() syntax:
// const mixpanel = require('mixpanel-browser');

// Enabling the debug mode flag is useful during implementation,
// but it's recommended you remove it for production
mixpanel.init('YOUR_TOKEN', {debug: true}); 
mixpanel.track('Sign up');

I called them under the "mounted" function so that it is called once the page is loaded.

  mounted: function(){
    mixpanel.init('xxxxxxxxxxxxxxxxxxxxxxx', {api_host: "https://xxxxxxxxxxxxxxxxxxxxxxx", debug: true}); 
    mixpanel.track('pageName')//Give the name of the page - prasanthsasikumar for root directory etc.
  }

That's all there is to it. During testing, I found that my adblocker plugin was blocking the request send by mix-panel. As a work around, I used a proxy server - effectively bypassing mix panel server calls. You can read more about it here.

The proxy server was deployed in the google cloud using this. This enabled me to track users and their behavior (anonymously, of course) even when they are using adblockers. Mission accomplished