Integrating Mixpanel with a chrome extension (no browser action)

Question

I've built a chrome extension that injects content into certain pages. It has no browser action, and thus no stable place to hold content like mixpanel, though I'm unsure if that's part of the problem. I set the CSP based on this previous SO question,

Content Security Policy: cannot load Mixpanel in Chrome extension

(function(f,b){if(!b.__SV){var a,e,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" "); for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=f.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";e=f.getElementsByTagName("script")[0];e.parentNode.insertBefore(a,e)}})(document,window.mixpanel||[]); mixpanel.init("[mixpanel_id]");

But I still get this error: "Mixpanel error: 'mixpanel' object not initialized. Ensure you are using the latest version of the Mixpanel JS Library along with the snippet we provide."

I then found this blog that suggests using the HTTP API to get around this problem.

http://beletsky.net/2014/05/using-mixpanel-analytics-from-chrome-extensions.html

Ultimately, I'm looking for either A better workaround so I don't have to use the HTTP API. I'm working on getting that setup currently, but why doesn't mixpanel work for injecting-extensions out of the box and is it rectifiable?

Answer 1

For now, I'm sticking with the HTTP API, this was the code I used based on the above blog. I hope this is just a temporary solution until I can figure out a way around the error.

var api = 'https://api.mixpanel.com';
var analytics = window.app = window.app || {};
var mixpanel = {};
analytics.init = function init(token, user) {
  mixpanel.token = token;
  mixpanel.distinct_id = user.email;
}
analytics.track = function track(event) {
  console.log(event, mixpanel);
  var payload = {
    event: event,
    properties: {
      distinct_id: mixpanel.distinct_id,
      token: mixpanel.token
    }
  };
  var data = window.btoa(JSON.stringify(payload));
  var url = api + '/track?data=' + data;
  $.get(url);
}

And I initialize it once I get the user email from chrome.

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (typeof request.user != 'undefined'){
      analytics.init('[my_id]', user.email);
      sendResponse({farewell: "userId"});
    }
  }
});

Finally I call the events from within my app.

analytics.track("Checked" + panel);

----Edit---- I'm also tracking customers with similar code to that above. Called by using this: analytics.engage()

analytics.engage = function engage() {
  var timestamp = Date.now();
  var payload = [
    {
    $token: mixpanel.token,
    $distinct_id: user.email,
     $ip: user.location.ip,
    $set_once: {
      "First login date": timestamp
    }
  },
  {
    $token: mixpanel.token,
    $distinct_id: user.email,
    $ip: user.location.ip,
    $set: {
      "Last login date": timestamp,
      $email: user.email,
      gender: user.gender,
      given_name: user.given_name,
      family_name: user.family_name,
      ip: user.location.ip,
    }
  }
  ];

  var data = window.btoa(JSON.stringify(payload));
  var url = api + '/engage/?data=' + data;

  $.get(url);
}