【GTM】ユーザーのとある行動にかかった時間を計測してみた【JavaScript】

ウェブサイトやアプリにおいて、ユーザーの行動を深く理解することは、顧客体験（CX）を向上させる上で欠かせません。
しかし、一般的なアクセス解析ツールだけでは、「ユーザーが特定の行動にどれくらいの時間を費やしたか」といった、CX改善に直結する詳細なデータまでは見えにくいのが現状です。

今回は、そんなユーザーの行動時間の計測に使えるGTM設定について、沖縄オフィスの友利がご紹介します。

----------------------------------------------------------------------------

こんにちは。D2C ID沖縄オフィス　アナリストの友利です。

普段の業務ではGA4でデータを取得できるようにするためのGTM設定や、LookerStudioを使ったデータの可視化を担当しています。

今回は、前者であるGTMの設定について『ユーザーのとある行動にかかった時間を取得する方法』についてご紹介させていただきます。

プロデューサーからの相談

とある案件において「ユーザーのとある行動開始〜終了までにかかった時間を計測できたら嬉しいなあ」という要望がありました。 まず、GAで基本的に計測できる指標、かつ時間に関連するものには以下の内容があります。

・平均セッション継続時間
ユーザー セッションの平均継続時間（秒）。

・平均エンゲージメント時間
ウェブサイトがユーザーのブラウザで目的のコンテンツとして表示されていた平均時間、またはアプリがユーザーのデバイスでフォアグラウンド表示されていた平均時間。平均エンゲージメント時間 = ユーザー エンゲージメントの合計時間 ÷ アクティブ ユーザー数

・セッションあたりの平均エンゲージメント時間
セッションあたりの平均エンゲージメント時間。

残念ながら、この中では要望にそった計測はできそうにありません。

開発担当さん、実装可能でしょうか

さて、こうなってくるとGTMだけでの完結は難しいです。

こういった場合、開発担当の方へ計測のためにイベントを実装してもらえないか？と相談することがあります。 開発側からデータレイヤーで情報を送ってもらうことで、GTMだけでは計測が難しい内容についても計測を実施できるようになることがあるためです。

この案件は開発担当が社内だったこともあり、開発部のエンジニアさんと要件やその詳細を含めた実装可否を相談させていただきました。

▲実際にエンジニアさんへ相談した際の資料（一部情報隠しています）

相談の結果、今回は以下の内容についてデータレイヤーで情報を送ってもらうことになりました。

イベント名：user_acttime
（パラメータ①として）data_startTime：（行動開始時の時刻）
（パラメータ②として）data_endTime：（行動開終了時の時刻）

（名称などは仮です）

GTM側でデータの受信→GAへ送信する準備

もちろん開発側からデータを送ってもらうだけでは計測を実施できません。

この後アナリストで行う作業としては大きく分けて3つあります。
　①GTM側でデータを受け取れるように設定
　②受け取ったデータを加工
　③加工したデータをGAへ送信
それぞれ以下にて解説します。

①GTM側でデータを受け取れるように設定

▼トリガーの設定内容

トリガー名：任意の名称
イベント名：（任意の名前でも問題ないですが、データレイヤーで送信されるイベント名と同一名称が管理がしやすいです）
条件：{{Event}}＿等しい＿（データレイヤーで送信されるイベント名と同一）

②受け取ったデータを加工

さて、ここで開発から送ってもらうデータを今一度確認しましょう。

イベント名：user_acttime
（パラメータ①として）data_startTime：（行動開始時の時刻）
（パラメータ②として）data_endTime：（行動開終了時の時刻）

こちらについて、具体的な内容に置き換えると以下になります。

イベント名：user_acttime
（パラメータ①として）data_startTime：2025/6/1 00:00:00
（パラメータ②として）data_endTime：2025/6/1 00:01:23

この情報をこのままGAへ送るとどうなるでしょうか？

このままでは開始と終了それぞれの時刻が分かるようになっただけです。 今回計測したい「ユーザーの行動にかかった時間」を知るためには、終了時間から開始時間を引いて差分を計算するという手間がかかります。
GAだけではこの計算はできないため、一旦Excelなどに出力してそのうえで計算を行う必要があります。スマートではないですね。

ということで、ここでひと手間加えてGTM側で差分を計算して、その結果をGA4へ送るようにしたいと思います。

変数＞ユーザー定義変数　からパラメータの数だけ変数を設定します。（今回は2つ）

▼変数の設定内容

変数名：任意の名称
変数のタイプ：データレイヤーの変数
データレイヤーの変数名：（データレイヤーで送ってもらうパラメータ名と一致する内容を記載）

さらに、同様に　変数＞ユーザー定義変数　から変数を追加します。

▼変数の設定内容

変数名：任意の名称
変数のタイプ：カスタムJavaScript
カスタムJavaScript：（以下の内容）

function(){
var start = new Date({{data_startTime}});
var end = new Date({{data_endTime}});
var diff = end.getTime() - start.getTime();
var hour = Math.floor(diff / 1000 / 60 / 60);
var min = Math.floor(diff / 1000 / 60) - (hour 60);
var sec = Math.floor(diff / 1000) - (hour 60 60) - (min 60);

var result = hour + ':' + min + ':' + sec;

return result; }

こちらで、終了時間から開始時間を引いた実際の「行動にかかった時間」を計算することができました。

③加工したデータをGAへ送信

GAへ送信する情報を決定するタグはこのように設定します。

▼タグの設定内容

タグ名：任意の名称
測定ID：計測するGA4の測定ID
イベント名：{{Event}}
イベントパラメータ：任意の名称
イベントパラメータ値：②で計算した結果が格納される変数「時間差分」を選択

以上の設定を行うことで、GA4にて計測を実施することができるようになります。

この計測を行うことで得られる成果とは？

今まで大まかに「ユーザーのとある行動にかかった時間」としてきましたが、実際には「試し読み完了までにかかった時間」の計測でした。

こちらの計測を行うことで得られるメリットとしては以下のものがあります。

（１）「試し読み完了までにかかった時間」から得られる推測 他作品と比較して読了までに長時間を要している場合、ユーザーにとって何かしらの理由で作品が読みづらかった可能性が考えられます。
例えば「Androidからのアクセスのみ極端に時間を要している」ことが判明した場合、このOSからの閲覧に何かしらの問題があったのではないかと推測を立てることも可能となります。

（２）「試し読み完了までにかかった時間」と購入率の関連性 試し読みにある程度長い時間を要した作品は、実際に書籍購入へ繋がっているのか？
逆に時間が短い、またはそもそも読了されない作品は購入へ繋がらないのか？
それとも最後まで読み終わるまでもなく「面白い」と判断され購入意思の決定が行われることもあるのか？
この関連性を見つけることができれば、作品ごとに売り出し方や見せ方を工夫し提案に繋ぐことができる可能性があります。


----------------------------------------------------------------------------

というわけで、『ユーザーのとある行動にかかった時間を取得する方法』についてご紹介させていただきました。

D2C IDでは、顧客体験（CX）における課題解決のお手伝いをさせていただいております。
WEBでの体験設計や運用改善について、お気軽にご相談ください。