babel+es6 でmixpanelのtrackが動かなくなった話

babel+es6の環境で開発していて、最後にイベントにmixpanelのトラッカーを設置して終わりだなε-(´∀｀*)ﾎｯ
となったときに、コンパイルしてテストするとトラッカーが動かず、ドキュメントをあさってもなかったのでその対処方法。

問題が起こった場面

mixpanel.com
ここのコードを</head>直前に貼り付け

html

<button id="testBtn">test!!</button>

js

class Tester {
  test(){
    mixpanel.track('test1', {type: 'test1'});//送れる！！
    document.getElementById('testBtn').addEventListener('click', (e) => {
      mixpanel.track('test2', {type: 'test2'});//送れない！！
      console.log('foo');
    });
  }
}

const tester = new Tester();
tester.test();

このときtest1は無事送信されますが、イベントリスナーに登録したtest2が送信されませんでした。
状況を整理すると

1. mixpanelは読み込まれてる
2. EventListenerの中だけtrackできない
3. クリックイベントはきちんと発火する(コンソールにfooが表示)

おそらくthis系でエラーが起こってる感じかな？？
ちなみにwebpack、browserifyで同様のエラーがおこるみたい。

es6でmixpanelを動かしたい！！

誰かライブラリ作ってくれていないかな？と思ったらやっぱりありました！
GitHub - mixpanel/mixpanel-js: Official Mixpanel JavaScript Client Library
使い方はインストールして、普通のmixpanelと同じように使うだけでOK！webpack、browserifyどちらでも大丈夫です！

1 npmからインストール

npm install --save-dev mixpanel-browser

ライブラリの名前はmixpanel-jsなんだけど、nodeのと区別するためにbrowserにしてるみたいです。

2 mixpanelをimportまたはrequire

import mixpanel from 'mixpanel-browser';
//var mixpanel = require('mixpanel-browser');

3 初期設定

mixpanel.init('プロジェクトのTOKEN');

これで上の動かなかったコードでもきちんとイベントが発火されたら、送信されました！
ちなみに、他のモジュールでも使うならこんな感じかな？

import mixpanel from 'mixpanel-browser';

class Tester {
  constructor(){
    mixpanel.init('mixpanel token');
  }

  test(){
    mixpanel.track('test1', {type: 'test1'});
    document.getElementById('testBtn').addEventListener('click', (e) => {
      mixpanel.track('test2', {type: 'test2'});
      console.log('foo');
    });
  }
}
const tester = new Tester();
export default tester;
tester.test();

mixpanelのデバッグモード

この問題でいろいろドキュメントをあさってると、デバッグモードなるものを発見！
mixpanel.commixpanel.init()の第2引数に{debug: true}を入れます。
すると、コンソールにmixpanelの情報、trackが送った内容を確認することができます！これで、mixpanelの管理画面から逐一送信された値を確認せずに、コンソールから確認できますね！