## tl;dr
SPAに分類されるウェブサイトでページ読み込みがなく、Google Analytics等のトラッキングができない場合はGTMトリガー「history change」を利用する## 背景
React等を用いてSPAによるウェブフォームが作成され、それをトラッキングする必要がありました。そんなに多くのSPAを見てきた訳ではない & 自分でSPAのサンプル等を作ったこともなかったのでSPAだから共通して言える事なのかどうかはわかりませんが以下のような特徴がありました* SPAなので当たり前ですがページ読み込みのない遷移
* ページ遷移後のURLが `#` の後ろにつく
* ウェブ履歴(history)には遷移毎にURLが載ってくる
## 必要な実装
### トラッキングに必要となる要件・要点
1. ページ遷移毎にGoogle Analytics等、トラッキングツールや広告ツールにログを送信すること2. `#` 以下のURLをバーチャルページビューとしてURLトラッキングできるように実装すること
### ページ遷移毎のログ送信方法
#### 履歴トリガー
SPAでの実装時にブラウザのウェブ履歴にURLが掲載される事がポイント。これはAjaxが出てき5年以上前と全く同じ。SPAでもpushStateが利用されているのか、それともhistory api的ななにかが使われているのかは分かっていないのですが履歴トリガーを使います。
### バーチャルページビュー対応
#### Google AnalyticsへのURL送信
Google Analyticsへバーチャルページビューを送信する場合 `Fileds to Set` で `location` を指定するか `page` を指定します。#### URL整形
この部分は実装方法がサイトごとに異なるかもしれませんが私の場合、こんな感じの実装を行いました。1. 【変数】 `#` 以降のハッシュ文字列を取得する - URL fragment
2. 【変数】 ハッシュURLを用いてURLを正規化する
こちらは方法は何通りもありますルックアップテーブルを使ってもいいし以下のように正規表現で書き換えても良いと思います。
※Lookup系テーブルは上から順に評価されることに注意してください
3. Google AnalyticsにURLを送信する
2でパスへ書き換えた場合は `Fields to Set` は `page` で、Step2で書き換えた変数を送信する。フルURLで書き換えた場合は `location` で送れば良いと思います。
## 注意事項
実装で個人的に考慮が漏れた点を1つ注意事項としてあげますが、トラッキング系含めURLにgetパラメータが付いてきた場合の挙動はちゃんと確認するべきでしょう。
最初Lookupテーブルを利用して実装していたのですが、そうすると様々なツールを通してget系パラメータ付で飛んでくるURLのパースがうまくいかない事にリリース直後気づきました。そこで正規表現テーブルへ移行してすぐにリカバリーしたのですがバーチャルURL生成時にちゃんとパラメータ付でも処理されるかは見たほうが良いでしょう。
## 結論
GTMのコードを埋め込んでもらっていれば自由に内部で処理できます。ハッシュ以下のURLも含めてきれいにトラッキング可能ですがツールによってバーチャルページビューをどう投げれば良いかは異なるので調べる必要があります。ただ個人的にヒートマップツールなんかはバーチャルURLを利用するとデータ取得としては問題ないけれどもヒートマップとしてウェブページの上にレイヤー表示できない部分だけ解決出来ていないので、そういうツール毎に考慮が必要な部分が出てくるかもしれません。
Ajax実装でGTMを触っていたら `ブラウザ履歴を確認してみる` という行動をすると思いますが、全くの初めてだと迷うかもしれませんが、それほど難しい処理を書く必要は無いのではないかと思います。
## どうでもいいこと
GTMの正規表現テーブル、GAのフィルタみたいに `$A1` みたいな変な書き方ないよな？とか勘ぐって `GTM 正規表現テーブル 書き方` みたいなクエリでGoogle検索したのは内緒。
0 コメント:
コメントを投稿