はじめに
Google Analytics のコンバージョン設定をしている方はいると思います。 コンバージョンに至るまでのファネル内でどの程度時間がかかったか という指標もコンバージョン率やユーザー体験に影響があるため、経過時間を知りたいというニーズはあると思います。
Google Tag Manager (GTM) を使うと、ソースコードを逐一いじらずに色んな解析ができます。今回 Google Tag Manager を使って Google Analytics に経過時間をイベント送信してみたので、備忘録としてまとめておきます。
集計イメージ
以下のように Google Analytics 上でコンバージョンに至るまでの秒数が記録されます。期間指定で施策前後の平均値を比べたり、セカンダリディメンジョンで詳細な分析をしたりできます。
方針
今回、ソースコードは変更せず、全て Google Tag Manager で完結させたかったので、ユーザー行動に沿って以下のように設定しました。
- 時間計測を開始したいタイミングで GTM のカスタム変数に現在時刻を記録
- コンバージョン時にカスタム JavaScript を使って、現在時刻と 1 で設定した時刻との差分をイベント送信
設定方法
タグとトリガーと変数をそれぞれ 2 個ずつ作成します。まず変数から説明します。
変数の設定
Order Start Timestamp と Order Duration という変数を設定しています（今回申込画面にかかる時間を測定したので Order 系の文字列があるのは気にしないでください）。
Order Start Timestamp は データレイヤー変数 にしてデフォルト値を 0 としておきます。この値に時間を代入するのはトリガーで行います（後述します）。
Order Duration は カスタム JavaScript にして Order Start Timestamp との差分を計算して返します。秒変換するために 1000 で割りました。
function () {
var now = new Date().getTime();
var diff = parseInt((now - {{Order Start Timestamp}}) / 1000);
return diff;
}
Order Duration をイベント送信時にセットします。
トリガーの設定
次にトリガーの設定について説明します。
トリガーには時間計測開始のタイミングと、コンバージョンのタイミングの 2 つを設定します。これはサービスによって異なる設定になるはずなので詳細は説明しません。
ちなみに SPA で特定のページアクセスをトリガーとしたい場合には、トリガータイプにページビュー系のものを選ばずに 履歴の変更 を選ぶ必要があるようです。
タグの設定
最後にタグの設定について説明します。
時間の計測を開始するタイミングとコンバージョンのタイミングの 2 つにタグを設定します。
時間の計測を開始するタイミングのタグ設定を設定します。 タグの種類を カスタム HTML にして script タグ内で dataLayer 変数に値を設定しています。変数は上の手順で作った Order Start Timestamp を使います。トリガーは上の手順で作った時間計測開始のトリガーを選択します。
<script>
/**
* New Order Timestamp 変数に新規申し込みページにアクセスしたタイムスタンプを記録
* 申込み完了時にこのタイムスタンプとの差分を送信するために利用
**/
dataLayer.push({'Order Start Timestamp': new Date().getTime() });
</script>
コンバージョンのタイミングのタグを設定します。 Google アナリティクスのイベントを選択し、値に上の手順で作った Order Duration を選択します。
以上で設定完了です。プレビューで状態確認して問題なければ公開しましょう。
まとめ
カスタム HTML やカスタム変数、カスタム JavaScript などをうまく使うことで、GTM だけで管理できる変数を定義して、特定のタイミングで作成・更新・取得などができることが分かりました。一見コードで書かないと難しそうな処理も、一度 GTM でできるか検討してみると良さそうです。