JavaScript
GoogleAnalytics
GoogleTagManager

シャープ記号(#)付きのURLをGoogleアナリティクスで測定する

URL内のシャープ記号以降の部分の情報をGoogleアナリティクスで計測する方法

URLのハッシュ部分のデータ(#以降の部分、フラグメントとも呼ぶ)はGoogleアナリティクスに送信されないため、
Ajaxのshebang(#!)などで、ハッシュに大事な情報があったとしてもそれを計測することができません。

この記事では、
Googleアナリティクスに送られる情報をGTM(Google Tag Maneger)上で上書きすることにより、通常では計測できないハッシュ部分の情報を計測する方法を紹介します。

手順

:warning: 以下の手順はGoogleアナリティクスに送信する情報そのものを書き換えてしまうものなので、今使っているプロパティとは別に、

①新しいGoogleアナリティクスのプロパティを作成し、
②GTM内に新規のユニバーサルアナリティクスタグを作成した上で、
作業を進めることをオススメします。

1.変数の作成

組み込み変数「New History Fragment」「Old History Fragment」の有効化

まずは、変数ページの「組み込み変数」の「設定」ボタンから、
New History FragmentOld History Fragmentにチェックを入れ、この2つの変数を有効化します。

image.png
これらの変数の意味は以下のとおり

New History Fragment:
履歴変更トリガーの成立時に、dataLayer の「gtm.newUrlFragment」キーを取得します。値は、履歴変更イベント後のページ URL の一部分(ハッシュ)の文字列になります。

Old History Fragment:
履歴変更トリガーの成立時に、dataLayer の「gtm.oldUrlFragment」キーを取得します。値は、履歴変更イベント前のページ URL の一部分(ハッシュ)の文字列になります。
ウェブサイト用コンテナの組み込み変数 - タグマネージャ ヘルプ

ユーザー定義変数:「PagePath include hash」の作成

次に、Googleアナリティクスに送るページ情報を上書きするための変数
ユーザー定義変数「PagePath include hash」をカスタムJavaScript変数として以下の要領で作成します。

変数ページの「ユーザー定義変数」の「新規」ボタンから新しいユーザー定義変数を作成。
image.png

変数名を「PagePath include hash」と設定し、「カスタムJavaScript」を選択。
image.png

「カスタムJavaScript」部分に以下のハッシュ入りのURL情報を出力するためのコードを入力。

カスタムJavaScript部分のコード
function(){
  return location.pathname + location.search + location.hash;
}

image.png

動作例)ページURLがhttps://hoge.com/content/index.html?q=aa&c=bb#hagehageのとき、
パス部分は/content/index.html、GETパラメータは?q=aa&c=bb、ハッシュ部分は#hagehageなので、
/content/index.html?q=aa&c=bb#hagehageが出力される。

ユーザー定義変数「has changed hash」の作成

PagePath include hashでユーザー定義変数を作成したのと同じ要領で、
URLのハッシュ部分が変更になったか検証するためのカスタムJavaScript変数「has changed hash」を作成します。

カスタムJavaScript部分のコード
function(){
  return !!{{New History Fragment}} && {{New History Fragment}} !== {{Old History Fragment}};
}

image.png


2.トリガーの作成

URLのハッシュ部分だけが変化することによりWebページの内容が書き換わっていくとき、
トリガー「ページビュー」だけではGoogleアナリティクスのトラッキングタグを発火させることができません。

これに対応するため、次の手順でハッシュの変更を検知するためのトリガーを作成します。

トリガー「Detect new hash」の作成

トリガーページの「新規」ボタンから新しいトリガーを作成。

image.png

トリガー名を「Detect new hash」と設定し、「履歴の変更」を選択。
image.png

対象はhas changed hashを選択し、条件は「等しい」を指定。一番右のフォームにtrueと入力。
image.png


3.ユニバーサルアナリティクスタグへの変数組み込み

最後に、「タグ」ページから目的のユニバーサルアナリティクスタグの画面を開いた上で、以下の設定を行います。

URLの上書き設定

詳細設定」の「設定するフィールド」部分を設定する
フィールド名pageを選択し、値に先ほど作成したユーザー定義変数「PagePath include hash」を設定することにより、Googleアナリティクスに送信するURL情報を上書き。

※値部分を入力するとき、フォーム右にあるレゴブロックのようなボタンをクリックすれば選択肢が現れるので、手打ちせずにココから選ぶと楽です
image.png

URLのハッシュ部分変更時の発火設定

URLのハッシュ部分が変更したときにもユニバーサルアナリティクスタグを発火させるため、
通常しているページビューのトリガー設定とは別に、先ほど作成したトリガーDetect new hashをタグの発火条件に追加します。
image.png

以上で作業終了。
最後にGTMのコンテナのプレビュー/公開を行うことを忘れずに。

これらの設定により、Googleアナリティクスでハッシュ付きのURLを測定できるようになりました。

image.png

参考

今回のGTM/GAのトラッキングに関係する情報

shebangについて分かるリンク

「#!」の読み方について、シバング、シバン、シェバン、ハッシュバング、とかなり豊富なバリエーションがある様子

日経新聞のスマホ版Webサイトなどに採用されている
http://mw.nikkei.com/sp/#!/uid/paper

おまけ

QiitaをやっていてGoogleアナリティクスで測定も行っている貴方には、次の記事もオススメです
QiitaのGoogle Analyticsを見やすくする(URLを記事名で上書き)