Recently we’ve released Google Chrome extension for Likeastore that allows to extend your Google search results with relevant information from your likes. Development of Chrome extensions appeared to be interesting process, but essentially it’s nothing more as web development, since primary technologies are still HTML/CSS/JS.
The most important thing for every startup are metrics. In web application we use Mixpanel together with Google Analytics and Seismo. For browser extension I also needed some simple metrics, like “usage”, “clicks”, “shares” etc. Unfortunately, if you just try to reference
mixpanel-2.2.min.js it won’t work.
Instead, you will see error message in console,
There are few reasons for that. One is described in SO question. But after I did same manipulations as answer mentioned it still didn’t work. For extension I only have content script, there is no place there I can put
<script></script> tag with markup. It seems like
mixpanel-2.2.min.js have some dependencies that just prevents it to start normally inside extension, not usual web application.
I had no time to investigate the problem deeply, but instead found workaround that works.
Besides platform-dependent libraries, Mixpanel provides access to HTTP API. This is the most “pure” way of communication between services, so I decided to try it.
Since, I already used
jQuery in my application, I ended-up with such module,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
Here, I’m using this implementation of
base64 (copied from
mixpanel-2.2.js). So, to track the
event you just HTTP GET to Mixpanel API, with a payload of base64’ed JSON string of
mixpanel you need both
distinct_id is unique value, that Mixpanel generates itself and stores the value to cookie, to identify the user. If you send events from different applications, say web app, mobile web extension etc. – I would recommend to user
mixpanel.alias() call, so you “link” unknown
distinct_id with some user’s attribute (
id from database or
On our web application, once user logged on we call
mixpanel.alias() with email of user, so all other applications could use that as
distinct_id of user.
The entry point of content script is
run() method, where user is fetched from server and initialize
1 2 3 4 5 6 7 8 9 10 11 12
Once content script injects it’s HTML into target page DOM, it’s possible to listen to DOM events and call
1 2 3 4 5 6 7 8 9 10 11
I consider Mixpanel HTTP API as very nice substitution of library, in those rare cases when library is not applicable. This would work perfectly if you need simple events tracking. If you interested, feel free to check sources.