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

  • 1
    いいね
  • 2
    コメント

#以降のURL情報をGoogleアナリティクスに送る方法

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

以下の方法を使用すれば、Googleアナリティクスに送られる情報を上書きすることにより、ハッシュ部分の情報を取得することができる。

手順

:warning: このやり方はGoogleアナリティクスに送信する情報を書き換えるやり方なので、今使っているものとは別に新しくGoogleアナリティクスのプロパティを作成し、GTM内に新規のユニバーサルアナリティクスタグを作成した上で行うことをオススメする。

1.変数の作成

組み込み変数:New History FragmentOld 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」部分に以下のコードを入力する。

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

image.png

このコードはページのパス部分とGETパラメータ、ハッシュ部分を繋ぎ合わせた合わせた文字列を返す。
ページ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

URLのハッシュ部分が変更になったか検証するための変数

PagePath include hashでユーザー定義変数を作成したのと同じ要領で以下のカスタムJavaScriptタグを作成する。

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

image.png


2.トリガーの作成

ページURL内のハッシュ部分だけが変化することにより画面の内容が変化していくとき、
トリガー「ページビュー」だけではGoogleアナリティクスのトラッキングタグを発火させることができない。
このため、ハッシュ部分の変更を検知するためのトリガーを作成する。

トリガー:Detect new hash

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

image.png

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

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


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

:warning: この変更はGoogleアナリティクスに送信するデータを改変するものなので、既存のユニバーサルアナリティクスタグを書き換えるのではなく、Googleアナリティクスのプロパティを新規作成して、新しいGTM上でのユニバーサルアナリティクスタグ設定を作成した上で適用することをオススメする。

「タグ」ページから目的のユニバーサルアナリティクスタグの情報を開いた上で、以下の設定を行う。

URLの上書き設定

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

値部分はフォーム右にあるレゴブロックのようなマークをクリックすれば選択肢が現れるので、手打ちせずにここから選ぶ。
image.png

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

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

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

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

image.png

参考

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

shebangについて分かるリンク

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

おまけ

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