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が送信されませんでした。
状況を整理すると
- mixpanelは読み込まれてる
- EventListenerの中だけtrackできない
- クリックイベントはきちんと発火する(コンソールに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の管理画面から逐一送信された値を確認せずに、コンソールから確認できますね!