Zoho PageSenseとMixpanelの連携

Zoho PageSenseとMixpanelの連携

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Mixpanelを使用してWebサイトのトラフィックを監視し、顧客がサイトのページをどのように利用しているかを詳しく把握している場合、PageSenseと連携することで、A/BテストやSplit URLテストのデータから有用なインサイトを得られます。この連携により、A/BテストとSplit URLテストのすべてのデータをMixpanelのレポートに自動送信し、テストの各バリエーションにおける訪問者の行動に関する詳細なデータを収集できます。

Info
この連携は、次の2つの手順で有効にします。
  1. PageSenseでMixpanel連携を有効にします。連携は、プロジェクト全体または個別のテストに対して有効にできます。
  2. 追跡するページにMixpanelのコードスニペットがインストールされていることを確認します。
Notes
この連携の主なメリットは次のとおりです。

  • Mixpanelで追跡中の主要なビジネス指標とテスト結果を関連付ける

  • 使い慣れたMixpanelダッシュボードを使用してワークフローを効率化し、さまざまなビジネスプロセスについて的確に意思決定する

  • Mixpanelを使用して、テストページの主要な傾向やユーザー行動を特定する

  • Mixpanelの各種機能を使用して、テストに関する新たなインサイトを得る

MixpanelとZoho PageSenseを連携するには

Notesメモ：この連携を有効にするには、テスト対象のWebサイトにZoho PageSenseのトラッキングコードが追加されていることを確認してください。また、データを追跡するA/BテストとSplit URLテストをPageSenseで実行してください。 WebサイトにPageSenseのコードスニペットをインストールする方法はこちら。1. Zoho PageSenseで、Mixpanelと連携するプロジェクトを開きます。

2. 上部ペインの［連携］タブをクリックし、［Mixpanel］ボタンを有効にして、［続ける］をクリックします。



3. Mixpanelでレポートを表示するA/Bテスト（またはSplit URLテスト）を選択します。

4. ［設定］タブに移動し、［連携を追加］セクションをクリックして、［Mixpanel］の横にある切り替えボタンを有効にします。



5. Mixpanelアカウントにログインします。ホームページで、［設定］タブをクリックします。
6.設定ガイドページで、［JavaScript］に移動してクリックします。



7. ［SDKをインストール］スクリプトと［SDKを設定］スクリプトをコピーし、WebサイトのHTMLソースに追加します。

Notesメモ：
終了タグ</head>の直前にscriptタグを挿入します。PageSenseのコードスニペットより後に配置してください。
［SDKを設定］スクリプトを追加する際は、［トークン］をクリックしてトークンを生成し、スクリプト内のトークンを置き換えてください。

トークンを追加する前：
  1. <script>mixpanel.init('YOUR_TOKEN', {debug: true, track_pageview: true, persistence: 'localStorage'});</script>

トークンを追加した後：
  1. <script>mixpanel.init('56ce47122506b808fe277090e0b5fe8a', {debug: true, track_pageview: true, persistence: 'localStorage'});</script>

8. A/Bテスト（またはSplit URLテスト）を設定したWebサイトに戻り、前の手順でコピーしたMixpanelコードをZoho PageSenseのコードスニペットの下に貼り付けます。
9. 前の手順で貼り付けたコードの下に、次のコード行を貼り付けます。
  1. <script>
  2. if(window.ZAB && window.ZAB.experimentsLoaded) {
  3. window.ZAB.MXIntegFunc();
  4. }
  5. if(document.addEventListener) {
  6. document.addEventListener('zpsExperimentsLoaded', function() {
  7. window.ZAB.MXIntegFunc();
  8. }, false);
  9. }
  10. </script>


JavaScriptは次のようになります。

<<script src='https://cdn.pagesense.io/js/XXXXX/*********************.js'/><script>

<!-- 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 people.set people.set_once 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&&'//http://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js%22.match(/%5E/////)?%22https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js%22:%22//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js%22;c=e.getElementsByTagName(%22script%22)[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);

mixpanel.init('XX000');</script><!-- end Mixpanel -->

<script>window.ZAB.MXIntegFunc();</script>

10. 追加したら、WebサイトのHTMLソースに保存して公開します。

11. 公開後、Mixpanelアプリケーションがコードを検出し、コードスニペットの追加に成功すると「データを検出しました」と表示されます。




11.テスト名とバリエーション名がすぐにMixpanelへ送信され、データも即座にMixpanelへ反映されます。


Mixpanelでテストレポートを表示するには


1. 上部ペインの［分析］ボタンをクリックし、表示するレポートの種類（［インサイト］、［ファネル］、［フロー］など）を選択します。
たとえば、バリエーションごとの訪問者の行動や動向をリアルタイムで把握するには、［インサイト］をクリックして［内訳］に移動し、［プロパティを選択］し、 続いて［イベント］オプションを選択します。

2. PageSenseで作成済みのA/Bテストのうち、レポートを表示するテスト名を一覧から選択します。  
特定の日付の範囲に基づいてテストデータをカスタマイズしたり、Mixpanelのレポートでさまざまなグラフの種類を選択して表示したりすることもできます。 Mixpanelでレポートを解釈する方法の詳細はこちら。


このドキュメントが、手順を簡単に進めるうえでお役に立てば幸いです。詳しい説明が必要な場合や質問がある場合は、いつでもお気軽に次のメールアドレス（
support@zohopagesense.com）までお問い合わせください。