OneSignal の ドキュメントを読んでいて、Mixpanel という 解析ツールに興味を持ちましたので、GTM を使って、Mixpanel のタグを設定してみました。
実施したことを記載します。

[TOC]

参考

Mixpanel の 日本語説明記事

Mixpanel を GTM 設定で参考にした記事

料金プランの情報、各プランできること

タグ設定のゴール

特にたくさんの PageView があるわけでもなく、Form があるわけでもないサイトなので、対してトラッキングする情報がありません。
参考記事を読んだ限り、PageView 等の<wbr>総合的な<wbr>指標の<wbr>取得は<wbr> Google Analytics に<wbr>任せて、<wbr>Event の<wbr>取得を<wbr> Mixpanel を<wbr>行う のが無料枠で収める一般的な使い方に思いましたので、サイト内の<wbr>ページ遷移 を対象に Event 取得を行おうと思います。

実施したこと

以下、実施しました、それぞれ記載していきます。

  • アカウント作成、初期設定
  • GTMのタグ設定

アカウント作成、初期設定

アクセス解析ツールのmixpanel導入してみた - Qiita が参考になりました。
補足で以下、記載します。

  • アカウント作成時に求められる情報
    Outh2 で他サービスのアカウントでサインアップを行うことはできません。
    以下の情報を求められます。
    電話番号、会社名は任意ですので、入力しなくても OK でした。

    • 氏名
    • メールアドレス
    • パスワード
    • 会社名
    • 電話番号
    • お知らせメールを受け取るか否か

  • 無料プランで利用できる内容
    料金プランには、Engagement plan と People plan があります。
    Engagement plan は Event 数課金で、People plan は ユーザープロファイル数で課金されます。

    • Engagement plan

      • 1月あたり、5000000 Event まで 1

      • 作成できるプロジェクト数が、5つまで

      • セグメント や、ファネル に適用できるフィルタ数が2つまでで、レポートの内容が制限される。

      • データ保持期間は、60日間

      • プロジェクトに参加できる人数は、3人

      • 二要素認証が設定できる。

    • People plan

      • 1000プロファイルまで

  • 初期プロジェクト名の変更
    初期プロジェクト名がデフォルトで設定されています。
    タグを設置するサイトの情報に変更します。

    • まず、画面右上の歯車マークをクリックします。
      "歯車"

    • 続いて、プルダウンが表示されます。Project settings をクリックします。"Project settings"

    • ポップアップウィンドウが表示されます。Managementタブの内容を編集します。
      "Project settings"
      編集対象の項目は以下の通りです。

      • Name
      • URL
      • Timezone

アカウント作成、初期設定の説明は以上です。

GTMのタグ設定

以下、GTM のタグ設定について記載します。

  • そもそもMixpanel は、直接タグ埋め込みを推奨している
    Implement Mixpanel with Google Tag Manager – Mixpanel Help Center には以下、可能であれば、タグをサイトに直接埋め込んで欲しい旨が記載されています。
    取りこぼしが発生するのかもしれませんが、GTM 配信のほうがメリットがあると考えますので、無視して作業を進めます。

    While you can try to use GTM to load the Mixpanel library, we recommend placing the Mixpanel snippet on the page directly if possible to ensure it loads properly (i.e., before any of your track calls). If you’re using Autotrack, you can stop here - this is where you will switch to the Mixpanel Point & Click Editor to complete your Event tracking.

  • Mixpanel の初期化タグの設定
    Head タグ内に、埋める JavaScript をカスタム HTMLで配信します。

    • タグタイプ
      カスタム HTML

    • HTML の内容 

      <!-- 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.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 -->

    • document.write をサポートする
      チェックなし

    • 詳細設定-タグ呼び出しオプション
      1ページにつき1度

    • トリガー
      トリガーのタイプは、ページビューで、フィルタはなし、全てのページを指定。

  • AutoTrack という機能があり、それで、LinkをTraking しようとしたが、使用できなかった
    AutoTrack で自動で記録してもらえるなら、そちらの方が良かったのですが、2018/04/17日時点では、プロジェクト作成後は、デフォルトで使用できなくなっているようです。
    使用できない経緯は以下に記載がありました。

  • Link トラッキングのためのHTMLタグを作成する
    Link トラッキングのためのカスタム HTMLを配信します。

    • タグタイプ
      カスタム HTML

    • HTML の内容
      Link の Text と、URL、Referrer を送信します。
      全て GTM の組み込み変数です。 

      <script>
mixpanel.track("LinkClick", {
    "Click Text":{{Click Text}},
    "Click URL":{{Click URL}},
    "Referrer":{{Referrer}}
});
</script>

    • document.write をサポートする
      チェックなし

    • 詳細設定-タグ呼び出しオプション
      1イベントにつき1度

    • タグの順序付け-タグの<wbr>名前 が発効する前にタグを配信
      チェックを入れる

    • タグの順序付け-設定タグ
      Mixpanel の<wbr>初期化タグ を選択する

    • タグの順序付け-タグの<wbr>名前 は、Mixpanel の<wbr>初期化タグ が配信できなかった場合や一時停止となっている場合には配信しないでください
      チェックを入れる

    • トリガー2
      トリガーの種類は、クリック-リンクのみ、すべてのリンククリックを選択。
      タグの配信を待たない。 妥当性はチェックしない。

上記設定で、Mixpanel に Link のクリックイベントを送付することができました。
以上です。

  1. STARTUP プランが、STARTING AT 10M DATA POINTS PER YR なので、年間での制限もあるのかもしれません。 ↩

  2. ここは、タグの配信は待った方がいいかもしれません。 ↩

コメント

カテゴリー

最近の投稿