MixpanelをGoogle Tag Managerでインストールする方法

いちばんやさしいグロースハックの教本人気講師が教える急成長マーケティング戦略「いちばんやさしい教本」シリーズを読了した。個人開発中のリゾートバイト求人検索サイト「RESORN（リゾーン）」のボトルネックを分析し、打ち手を整理したいと思ったからだ。

グロースハックを分解すると、ユーザーのマイルストーンごとにARRRAでKGIを立て、KGIに紐づくKPIを設定、施策を打ち、数値をチェックするという段階があるそうだ。これらの数値を追うには、Google Analyticsだけでは足りず、他の分析ツールも合わせて導入する必要がある。

今回はその一環として、Mixpanelを導入した方法を残しておく。

Mixpanelの利点とは何だろう？

そもそもMixpanelを導入する利点を理解する必要がある。Google Analyticsを引き合いに出して比較してみると以下の違いがある。

Google Analyticsは、各チャネルのCV率の高さ、関心の高いコンテンツの把握が可能
Mixpanelは、WEBサイト・アプリ内のユーザーの細かい分析が可能

現状、Mixpanelを導入したばかりで利点は手探りな状態だ。しかし、「ファネル分析」「コホート分析」などユーザーの離脱・定着を深掘りする部分に強みがある。

MixpanelをGoogle Tag Managerでインストール

早速、MixpanelをGoogle Tag Manegerでインストールしてみた。インストール方法は、以下の動画がとてもわかりやすい。

動画の大まかな流れ

Google Tag ManagerでMixpanelをインストールする際の流れは以下の4つが紹介される。①②は必須として、③④はWEBサービス・アプリケーションの内容によって導入の可否を決めると良いだろう。

①Mixpanelの初期化タグの設定
②Mixpanelのページビュータグの設定
③問い合わせたユーザーを識別するタグの設定
④クリックイベントのタグの設定

※Implementing Mixpanel with Google Tag Manager – Mixpanel Help Centerには、「head内に直接初期化タグを埋め込め」という記載があるが、これは無視して構わない。

動画で上手くいかなかった2つの点への対応方法

A：クリックイベントが上手く計測できない

④で「発効する前にタグを配信」にチェックを入れているが不要。こちらの環境では、Mixpanel側にイベントクリックが伝わらないという現象が起きたためだ。

B：開発環境の数値が計測されてしまう

個人開発中のRESORN（リゾーン）にMixpanelを導入したが、開発環境の数値も計測されてしまうという問題が生じた。開発環境側に本番環境と同様のGoogle Tag Managerのコードがコーディングされているためだ。開発環境側からコードを削除する方法も考えられるが、以下の方法で対処した。

a：Mixpanelで開発環境用のプロジェクトを作成する
b：動画内の「Mixpanel – General Library – All pages」のカスタムHTMLを変更する

bに関して、以下のコードで本番環境と開発環境の計測を分けることができる。

<script>
var gtm = google_tag_manager[{{Container ID}}];
try{
<Mixpanelの初期化コード>
var productionHost = '<ドメイン名（例：resorn.net）>';
var devToken = '<開発環境側のプロジェクトのトークン>'; 
var prodToken = '<本番環境側のプロジェクトのトークン>';
if (window.location.hostname.toLowerCase().search(productionHost) < 0) { 
mixpanel.init(devToken); 
} else { 
mixpanel.init(prodToken);  
}
gtm.onHtmlSuccess({{HTML ID}});	
} catch(e) {
gtm.onHtmlFailure({{HTML ID}});
}
</script>