エンジニアリング


2016.8.4

スクロールするとURLが変わるページをGoogleタグマネージャでトラッキングする方法

blog_thumbnail


こんにちは、連(むらじ)です。

近頃、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タグの設定しなければならない場合がありますので、ご自身で設定することが不安に感じられる場合は弊社までお問い合わせください。


連久実子

連久実子

2005年東京学芸大学心理学専攻卒業。広告代理店を経て、メーカーEC運用部門にてサイト構築運用・カスタマーオペレーション・ロジスティクスと広く経験した後、ブランディング及び販促戦略企画に携わる。2015年よりプリンシプル社に参画し、解析コンサルタントの傍らGTM設定も担当。


> の記事一覧

高橋さん_アイキャッチ
2016.6.17

PaddleTDのサービスの裏側

著者:
160527
2016.5.27

TableauSDK入門:セルフサービス分析ツールをPythonでらくらく拡張

著者:
eyecatch-tab35
2016.3.18

Tableau Server構築~入門の入門~

著者:
20161124_n
2016.11.24

米国エキスパート執筆「Googleアナリティクス/タグマネージャ解体新書」かいつまみレビュー(前編)

著者:
20160920_i
2016.9.20

2016年の新定番!ユーザーエクスプローラーをもっと活用するための簡単な方法

著者: