PMF手前のプロダクトを作っているため、そろそろいくつかの指標の改善を注力して行っていきたいと考えており、まずはグロースハックの下準備のためにMixpanelを導入しました。 今回はMixpanelを活用しようと思った背景や初期の設定方法についてまとめます。
Mixpanelで出来ること
Google Analyticsを導入していれば十分なのでは？と思う方も多いですが、個人的にはスタートアップこそMixpanelを活用するべきだと思ってます。Google Analyticsではサービスの全体像しか見ることが出来ません。サイトのPVや集客チャネルなど大まかな全体像を見る際には使えますが、特定の指標を改善するのには優れていません。
一方で、Mixpanelは特定の指標を改善したいといった時に非常に便利なツールで、特定の一部分を細かく分析するのに優れています。例えば、僕らの場合はEdtech系のサービスを扱っているので、「講師に質問をすると学習者の2回目継続率は上がるのではないか」、や「学習スピードが早いと学習者の2回目継続率は上がるのではないか」といった仮説を立ててその仮説に関連するアクションをMixpanelでトラッキングして分析していきます。
他にもコホート分析がGAより細かく出来たり、特定のユーザーが行ったアクションを細かく出来たりと非常に便利です。
設定方法
フロント側でもサーバー側でも実装が出来るようですが、サクッとトライ出来そうなのでフロント側で実装しました。
Javascriptライブラリをインストールする
大体の解析ツールと同じようにJavascriptのトラッキングコードを<head>タグ内に追加します。タグマネ経由でも追加出来るようですが、読み込みタイミングがずれる可能性もあるのでタグマネは推奨していないとのことです。
<!-- start Mixpanel --><script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
mixpanel.init("YOUR TOKEN");</script><!-- end Mixpanel -->
トラッキングイベントの設定
上記のライブラリをインストールすると、以下のようなmixpanelのトラッキングイベントを設定出来るようになります。
mixpanel.track("Song Played", {
"Song Artist": "The Rolling Stones",
"Song Title": "Gimme Shelter"
});
mixpanel.track()でMixpanelにイベントを飛ばします。
上記例だと、「Song Played」というイベント名で「Song Artist」、「The Rolling Stones」というキーバリューを飛ばしています。
Live Viewでイベントが飛んでいるかチェック
イベントの設定をしたらMixpanelを開いてLive Viewで実際に動いているかをチェックできます。Google Analyticsでいうリアルタイムに近いです。リアルタイムでデータが飛んでくるので実際に動くかをテストできます。
ユーザープロフィールの設定
MixpanelはPEOPLEという機能がついていて、ユーザー情報を保存するとユーザーカテゴリーごとの行動の違いや、特定のユーザーの取った行動を詳細に分析することができます。
mixpanel.identify("13487");
mixpanel.people.set({
"$first_name": "Joe",
"$last_name": "Doe",
"$created": "2013-04-01T09:02:00",
"$email": "joe.doe@example.com",
"Favorite Music Genre": "Rock"
});
mixpanel.identify()はmixpanel.people.set()より前に呼び出す必要があります。
mixpanel.identify()でユーザーを識別します。mixpanel.people.set関数でプロフィールをMixpanelに保存します。
上記例だと、「first_name」、「Joe」というキーバリューで保存しています。ちなみに$があるものはMixpanel上ですでにデフォルトで設定されている予約語です。新規で追加したい場合は$なしでキーを指定します。
結局仮説が大事です
結局ツールはあくまで手段なのでどれだけツールが優れていても、仮説がないと無意味に終わってしまいます。KPIを分解してどの指標の改善がKPIの改善に繋がるかは常々意識しつつ、PDCAを回していきましょう。