本記事で触れているGoogleアナリティクスは、ユニバーサルアナリティクス(UA)を前提としています。
GA4を対象とした記事ではございませんので、ご注意ください。
近頃、WEBでの表現の多様性が増したことに伴って、Googleタグマネージャで基本的なページビュータグを設置しても、こちらの意図するとおりにトラッキングできないケースが増えました。
そのひとつが、スクロールして特定のコンテンツが表示されるとURLも変更されるページ。
HTML5の「History API」という機能を利用し、(その多くは非同期通信にて)ページ内部を更新した際に、履歴に新たなURLが追加される、という仕組みです。
例えば、下図のような構成のページ(test.html)があり、「History API」の機能を利用して、4つの各コンテンツが表示されるたびにURLが変更されるようになっているとします。また、URLが変わるルールは
————————————————————————————————
コンテンツ1が表示された場合はURLが「https://test.com/test.html#1」
コンテンツ4が表示された場合はURLが「https://test.com/test.html#4」
————————————————————————————————
というように、コンテンツNoとハッシュ以降のNoが対応しているとします。
上図のページで、通常のページと同じようにGoogleタグマネージャから基本的なページビュータグを配信すると、下記のようにレポートされます。
レポートでは、PVがトラッキングされるのはtest.htmlが表示されたタイミングのみとなってしまい、スクロールしてURLが変わったとしてもこれ以上PVが加算されることはありません。
このような場合、スクロールで変更するURLをトラッキングするためには次の設定が必要になります。
1.組み込み変数の設定
設定場所:Googleタグマネージャ管理画面 > 変数 > 組み込み変数
「Page URL」と「New History Fragment」にチェックを入れます。
チェックを入れた変数は有効になります。
2.ユーザー定義変数の作成
設定場所:Googleタグマネージャ管理画面 > 変数 > ユーザー定義変数
変数名 | 自分のわかりやすい名前を記載 |
種類 | 「ルックアップテーブル」を選択 |
変数を入力 | サジェストされるので{{New History Fragment}}を選択 |
ルックアップテーブル | 4行追加 |
ルックアップテーブルの入力 | 1〜4(URLのハッシュタグ以降の値)を記述 |
ルックアップテーブルの出力 | test.html#area1〜test.html#area4を記述 ※Googleアナリティクス上で表示させたいパスを記述 |
デフォルト値を設定 | 「真」を選択 |
デフォルト値 | 4空 |
と設定し、変数を保存します。
3.トリガーの作成
設定場所:Googleタグマネージャ管理画面 > トリガー
トリガー名 | 自分のわかりやすい名前を記載 |
イベント | 「履歴の変更」を選択 |
配信するタイミング1 | 「New History Fragment」を選択して、(2)の「ルックアップテーブルの入力」で記述した値がすべて含まれるよう設定 |
配信するタイミング2 | 「Page URL」を選択して、https://test.com/test.html(該当ページのURLの#タグ以前)を記述 |
と設定し、トリガーを保存します。
4.タグの作成
設定場所:Googleタグマネージャ管理画面 > タグ
タグ名 | 自分のわかりやすい名前を記載 |
タグの種類 | 「ユニバーサルアナリティクス」を選択 |
トラッキングID | GoogleアナリティクスのプロパティIDを記述 |
トラッキングタイプ | 「ページビュー」を選択 |
設定するフィールド | 「+フィールド」ボタンで入力エリアを追加し、 フィールド名に「page」 値に(2)で設定したユーザー定義変数を記述 |
配信するタイミング | 「All Pages」と(3)で設定したトリガー、2つを設定 |
と設定し、タグを保存します。
上記の通りGoogleタグマネージャ側で設定、公開し、コンテンツ2 → コンテンツ4 → コンテンツ1とスクロールすると、Googleアナリティクスのレポート上では次のように表示されます。
レポートでは、狙いどおり、URLが変更されるたびきちんとトラッキングできていることがわかります。
ただし、この設定は全てのサイトで有効なわけではありません。
例えばURLと一緒にページタイトルも変更される場合、スクロール途中でURLは変更したもののページタイトルが読み込まれず次のコンテンツに遷移すると、同じ「test.html#area2」というURLでも、異なるページタイトルでトラッキングされてしまいます。
また、既にサポート対象外となったものの依然ブラウザシェアの高いIE8では、このままではトラッキングできないため、サイト側にHistoryAPIのレガシー対応のプラグインを別途読み込ませる必要があります。
このように、サイトの仕様によって、追加でGTMタグの設定しなければならない場合がありますので、ご自身で設定することが不安に感じられる場合は弊社までお問い合わせください。