Googleタグ マネージャーを使ってMixpanelを初期導入してみる
Mixpanelはプロダクト分析のツールで、ユーザーの行動を深く分析することに向いています。 ユーザー行動をトラッキングして、Mixpanel側に送信するのですが、これを行うためにはMixpanelのSDKをプロダクトに統合する必要があります。 クライアント側、サーバー側の両方からトラッキングでき、 Javascript、IOS,Android,Pythonなど、いろいろな言語、デバイスに組み込むことが可能となっています。
Mixpanelをプロダクトに導入してデータを送信するにはプログラミングの知識が必要で、コードを弄っていかなければいけないのですが、 今回はGoogleタグマネージャーを使ってMixpanelを導入する方法を試してみようと思います。 Googleタグマネージャーを使って導入してしまえば、プログラミングのコードを変更せずに設定していくことが可能となります。
Mixpanel Googleタグマネージャー カスタムタグテンプレート
このテンプレートを使うことによって、MixpanelのJavascript SDKのインストールと実装が可能になります。
インストール方法
※ Googleタグマネージャーの導入はすでに行っているとします
Googleタグマネージャーの管理画面からインストールする方法で試してみます。
テンプレートのページで、タグ テンプレートの検索ギャラリーをクリックします。
検索ボックスでmixpanelと入力すると、テンプレートが見つかるのでクリックします。
ワークスペースに追加 をクリックしてテンプレートを使用可能にします。
初期化
Mixpanel GTM タグが起動すると、タグで設定された 初期化オプションを使用して新しいインスタンスを自動的に初期化しようとします。
初期化が行われていると初期化のプロセス自体がスキップされるので初期化オプションがタグ全体で一貫して構成されていることだけを確認すれば良いとのことです。
Use default valuesを選択した場合、初期化はデフォルト値で行われます
Set options manuallyを選択すると、デフォルトオプションを上書きすることも可能です。
タグの設定
タグページに移動し、新規をクリックして新しいタグを作成します。
タグの設定パネルをクリックすると、タグタイプセレクターが開くので、カスタムタグであるMixpanelを選択します。
設定画面が立ち上がるので、この画面で送信したい情報を設定していきます。
Project TokenはMixpanelのProject Settingに表示されているものを入力してください。
Tag Typeは、使用するタグタイプを選択しますが、これはMixpanel JS SDKに従って使用できるいくつかのコマンドに対応しているとのことです。
JavaScript Full API Referenceに詳しい説明が書かれているので、設定するときはこのリファレンスを参照しながらやるのが良さそうです。
Tag Typeごとに追加のオプション設定ができますので、オプションを構成する方法もリファレンスを参照しましょう。
今回はMixpanelの機能の中で最も重要かつ頻繁に使用されるtrackイベントを送信する例を設定してみます。
Event Nameは、「サインアップ」、「アイテム購入」など、ユーザが行うあらゆることを指定するとわかりやすいですね。
Parametersは送信するイベントに含めるプロパティのセットで、イベントを行ったユーザーやイベント自体の詳細について記述します。
パラメータ値は、直接入力したり、上記のように変数を利用することも可能です。
上記の画像の例では、
ユーザーがページを開いたときに送信するプロパティとして、pageのURLとリファラー(リンク元のページ)を設定してみました。
Javascriptのコードだと以下のような感じでしょうか。
mixpanel.track('page_open',
{
'page_url': location.href ,
'referrer': document.referrer
});
トリガーの設定
Mixpanelに送信するタグ情報を設定したら、送信するためのトリガーを追加する必要があります。
トリガーのパネルをクリックすると
選択できるトリガーが表示されるので、イベントに応じて設定していきます。
今回はユーザーがページを開いたときに送信するイベントを作っているので、All Pagesを選んでみます。
トリガーの設定も終わったら、保存ボタンを押してタグの新規追加は完了となります。
タグの動作確認
タグマネージャーの管理画面で、プレビューをクリックすると実際にタグが機能するかどうかの確認ができます
タグマネージャーを埋め込んだサイトのURLを入力するとプレビューが開始されます
上記のようにTag Assistant Connectedと表示されればOKです。
広告ブロッカーなどを導入していると正しく機能しないので、一旦オフにすることをお勧めします。
Mixpanelの管理画面から、送信されたデータの確認も行ってみます。
Eventsページに遷移して、タグマネージャーの画面で設定したEvent Nameのデータが表示されている確認しましょう
Your Propertiesのタブをクリックすると、先ほど設定したプロパティのキーと値が表示されていればOKです。
