GTM (Googleタグマネージャー)でページ滞在時間を計測する方法

free web hopeではGA4、GTMなどツール導入の支援業務を提供しております。

こちらの記事では実際にGA4への移行を支援した事例を紹介しております。：GA4（Google Analytics4）移行で見えるようになったCVに繋がる顧客の導線とは？

• これらのツールの導入を検討していらっしゃる方
• ツールの活用方法にお困りの方

これらのお悩みをお持ちの方は、ぜひfree web hope公式HPや左下のコンタクトフォームからお気軽にご相談ください。

GA4の「平均ページ滞在時間」で滞在時間が分かるのでは？

滞在時間を計測したいなら、「GA4の『平均ページ滞在時間』の指標でも分かるのでは？」と思われるかもしれません。
しかしGA4の「平均ページ滞在時間」は、ユーザーが訪問した最後のページの滞在時間が０秒と計測されます。

例えばユーザーが、
①Aページ　滞在時間10分　　
　　　　⇓
②Bページ　滞在時間10分
　　　　⇓
③Cぺージ　滞在時間10分
　　　　⇓
④Cページから遷移せず離脱

という場合、Cページの滞在時間は０秒と計測されてしまいます。
もし仮に、すべてのユーザーがCページで離脱していた場合、GA4の『平均ページ滞在時間』の指標は０秒となり、これでは正しく計測できていないと言えます。

そこで、GTMのカスタムイベントタグで設定することにより、GA4で精度の高い計測をすることができます。

GTMでGA4の滞在時間計測を設定するメリット

GTMのカスタムイベントタグを利用してGA4の滞在時間計測を設定するメリットを、その使用例をふまえて紹介していきます。

メリット

GA4では、すべてのユーザーの滞在時間が計測できるわけではありません。しかし、GTMのカスタムイベントタグを使用し滞在時間を計測することによって、すべてのユーザーの滞在時間を知ることができます。

また、〇秒まで滞在したユーザーが何名か？ということが計測できるので改善の指標に役立ちます。他にもサイト内のユーザーの行動を計測する方法として、「スクロール率」を計測する方法もあります。

使用例

たとえば、ランディングページ全体の訪問数から、1秒間滞在していたユーザー数を引くと、1秒以内で離脱したユーザー数がわかります。「ファーストビューに何か問題があるのでは？」という仮説が立てられます。

Googleタグマネージャーのタイマータグを使用して、滞在時間を計測することは、改善活動の「仮説立て」に役立てることができます。

GTMでスクロール率のタグ設定をする方法を解説

設定方法を紹介

それでは、Googleタグマネージャーでのタイマー設定の方法をご紹介します。

step1.Googleタグマネージャーのワークスペースから、変数を選択し、ユーザー定義変数の新規作成ボタンをクリックする

step2.変数の設定から、データレイヤーの変数を選択

step3.変数名とデータレイヤーの変数名を記入

～記入する変数名及びデータレイヤーの変数名～
変数名:gtmTimer
データレイヤーの変数名:gtm.timerElapsedTime

gtm.timerElapsedTimeの変数にて、Googleタグマネージャーがミリ秒でデータを取得しています。変数の設定が完了したら保存してください。

step4.もう1つユーザー定義変数を作成する

step5.変数の設定からカスタムjavaScriptを選択

step6.変数名とJavaScriptを記入する

・変数名：gtmTimerJS
・カスタムjavaScript　※推奨:下記をコピペ

function() {
return Math.floor({{gtmTimer}} / 1000);
}

こちらも変数の設定が完了したら保存してください。この変数で先ほど作成した、『gtmTimer』の”ミリ秒”のデータを”秒”に変換しています。

step7.『トリガー』を選択し、『新規』をクリック

step8.トリガーの設定から、トリガータイプ『タイマー』を選択する

step9.トリガーの条件等を設定する

～記入項目～
トリガー名：gtmTimerトリガー
イベント名：gtm.timer
間隔：1000　　　　
制限：20
トリガー有効化条件：①Page URL　②正規表現に一致　③.*

上記の設定で「1000ミリ秒(1秒)ごとに20回までタイマーが起動する」という設定です。
つまり、1秒ごとに20回まで計測が行われ、20秒までの滞在時間が計測できる設定になっています。

設定が完了したら保存してください。

step10.タグを選択し、新規をクリック

step11.トリガーをクリックし、先ほど作成したgtmTimerトリガーを選択

step12.タグの設定を選択し、タグタイプのGoogleアナリティクス：ユニバーサルアナリティクスを選択

step13.　タグの種類『GoogleアナリティクスGA4イベント』を選択し、タグの設定を行なっていく。

～タグの設定項目まとめ～

タグ名・・・タイマー（推奨：分かりやすいもの）

測定ID・・・計測したいGoogle アナリティクスのIDを記入する

イベント名・・・Timer　(推奨：半角文字で分かりやすいもの、デフォルト名のものと区別できるように）

イベントパラメータ・・・Timer_1seconds　(推奨：半角文字で先頭に数字がこないもので、分かりやすいもの)

値・・・gtmTimerJS

step14.　作成したタイマータグが、プレビューモードで正しく発火しているか、確認してから公開する

プレビューモードの詳しい使い方は、以下の記事をご覧ください。：【完全ガイド】Googleタグマネージャーの使い方や導入方法を紹介

測定されたタイマーを確認

測定したタイマーの結果をGoogleアナリティクスで確認していきます。
設定したタイマータグの結果は『レポート』の『エンゲージメント』の『イベント』で確認できます。

しかし、デフォルトで設定されているディメンションだけでは、自社サイトにおけるデータ分析やインサイト発見に限界がある場合があります。

そこで、先ほどタグマネージャーで設定した『イベントパラメータ』をGA4の『カスタムディメンション』に設定し、より詳細な情報を入手することができます。

※『カスタムディメンション』とは、

Googleアナリティクスで、ユーザーが独自に設定できるカスタムのディメンションのことです。

『カスタムディメンション』により、より詳細かつ実態に即したデータセグメンテーションが可能となり、サイトパフォーマンスの分析精度が向上します。

設定方法の紹介

step1.　『設定』の『データの表示』の『カスタム定義』を選択

step2.　『カスタムディメンションを作成』を選択

step3.　 先ほどタグマネージャーで設定したイベントパラメータを下記の箇所に反映していきます。

～カスタムディメンションの設定項目まとめ～

ディメンション名・・・例Timer（推奨：分かりやすいもの）　

範囲・・・イベント

イベントパラメータ・・・Timer_1seconds(タグマネージャーで設定した名前を使用）

step4.　設定したカスタムディメンションを『データ探索』で確認

『データ探索』の新しいデータ探索を選択し、変数の『ディメンション』を選択

step5　『ディメンションの選択』で『カスタム』を選択し、先ほど作成したディメンションを選択し、インポートする

step6.　先ほどインポートした変数のディメンションを下記の対象部分にドラッグする

すると何秒に何回イベントが発生しているかを確認でき、”真の滞在時間”を知ることができます。

※補足

タグマネージャーの設定の『step9』で設定した、間隔と制限を
・間隔：60000
・制限：1と設定すると、60秒のみのタイマー設定が可能です。

この時、合わせて
・トリガー名：「タイマー60秒」
・トリガー設定のイベント名：「gtm.timer60」
・タグ名：「60秒滞在」
・イベントトパラメータ：「60s」
と設定しておくと管理も見やすくなります。

まとめ

このようにGoogleタグマネージャーでは、タグを作成してタグの発火を計測することにより、Web解析に役立てられます。

この記事では、滞在時間の計測方法を紹介しましたが、他にも『スクロール率』や『ボタンのクリック数』なども、Googleタグマネージャーを使用して計測可能です。

ユーザーの行動を分析し、より改善活動を活発にするため、この真のページ滞在時間の計測以外にも、タグを作成することをオススメします。

この記事を読んで、日々の解析・改善業務に役立てていただけたら幸いです。