【GA4】SPAで構築されたWEBサイトでページビューを計測する方法を紹介

久々の投稿。

昨年、ブログを始めたもののなかなか継続して投稿出来なかった。
継続するって簡単なようでなかなか難しい…。

年も明けたので、心機一転、少しずつ備忘録がてら投稿していこうと思う。

今回は昨年参画したプロジェクトの中のネタである。
Unqork（SPA）で構築されたWEBサイトにGTMを使ったGA4の導入をサポートしたので、
その時の内容をまとめてみた。
まずはページビューの計測方法についてご紹介。

※SPA・・・シングルページアプリケーション

目次

1. はじめに
2. 様々な制約
3. 大まかな設定内容
4. TOPページ（静的ページ）のページビュー計測設定
5. Unqork(SPA)ページのページビュー計測設定
6. Unqork(SPA)ページの履歴の変更設定
7. dataLayerでGTMイベントと取得変数を確認する
8. カスタムディメンションの設定
9. まとめ

はじめに

SPAでない一般的なサイト（MPA：マルチページアプリケーション）ではGA4でページビューを計測する場合、
GTMの設定としては配信トリガーに”All Pages”を設定すると、タグが発火してページビューが計測出来るようになる。

しかしながら、Unqorkでの計測の場合は様々な制約があり、同様の設定ではうまく発火するページ、発火しないページがあった。

まず、抑えておかないといけないと感じたのは配信トリガーとイベントの発火タイミングである。

配信トリガーとイベントの発火順序

様々な制約

• TOPページ（申し込み用LPページ）は静的ページだが、2ページ目以降（申し込み導線）はUnqorkで構築されている
• Unqorkで生成されたURLはドメイン配下のパスが/#/display/ランダムな文字列となる。GA4では#以下の文字列は表示されない仕様である
• UnqorkのURLから、独自ドメインのURLに転送処理がかかっている
• GTMでSPAサイトを計測する場合は二重計測が発生する可能性がある
• 二重計測、三重計測など重複計測されるページがあり、どういうイベントで発火させて設定したタグを取得しているかチェックする必要があった

下記サイトが大変参考になりました。
GA4でページビューを計測するときの注意点 – GA4とGTMの履歴に関するイベントの違いを調査してみた

大まかな設定内容

1. TOPページ（静的ページ）はタグを”GA4設定”、配信トリガーを”ページビュー”と設定
2. Unqorkで構築された申し込み導線はタグを”GA4設定”、配信トリガーを”ページビュー”と設定
3. 2で取得出来ないページは”GA4イベント”、配信トリガーを”履歴の変更”と設定

TOPページ（静的ページ）のページビュー計測設定

設定するURLをhttps://matsuichi-design.com/sampleというLPだと仮定。
LPページのみ実行させるように設定する。

タグの設定

• [タグの種類] – [GA設定]を選択
• [測定ID] – [GA4の測定ID]を設定
• [フィールド名] – [page_location]、[値] – [Page Path]を設定

トリガーの設定

• [トリガーのタイプ] – [ページビュー]
• [トリガーの発生場所] – [Page Path][含む][sample]

Unqork(SPA)ページのページビュー計測設定

タグの設定

• [タグの種類] – [GA4設定]
• [測定ID] – [GA4の測定ID]を設定
• [フィールド名] – [page_location]、[値] – [custom_page_location]を設定
  ※custom_page_locationはカスタムJavaScriptで定義した変数

トリガーの設定

• [トリガーのタイプ] – [ページビュー]
• [トリガーの発生場所] – [Page Path][含まない][sample]

変数の設定

[ユーザー定義変数] – [変数のタイプ][カスタムJavaScript]を選択。
変数名は任意の名前を設定。今回は[custom_page_location]と設定。

function() {
  var hash = location.hash;
  var hashArray = hash.split('/');
  var location = '';
  if(hashArray.length > 1 && hashArray[1] === 'display'){
    location = '#/display/' + hashArray[2].split('?')[0];
  }else if(hashArray.length > 1 && hashArray[1] === 'workflow'){
    location = '#/workflow/' + hashArray[2] + '/' + hashArray[3].split('?')[0]
  }
  return location;
}

Unqork(SPA)ページの履歴の変更設定

組み込み変数の有効化

• New History Fragment
• Old History Fragment
• New History State
• Old History State
• History Source

GA4拡張計測機能「ブラウザの履歴イベントに基づくページの変更」の無効化

[管理] – []

タグの設定

• [タグの種類] – [GA4イベント]
• [設定タグ] – [手動設定したID]
• [測定ID] – [GA4の測定ID]を設定
• [イベント名] – [page_view]
  ※標準で定義されているイベントと分けたい場合はカスタムでイベント設定してもよいが、
  特に理由がなければ、標準で設定されているイベント名を定義する方が管理面で良い
  拡張計測機能で定義されるイベント：
  参考サイト：[GA4] 拡張イベント計測機能／[GA4] 推奨イベント

トリガーの設定

ここでは以下の条件の場合、履歴の変更を実行しないケースの説明です。

• [Old History Fragment]に[history_sample]を含む
• [New History Fragment]に[new_history_sample]を含む

GTMトリガー[ページビュー]と[履歴の変更]が両方発火し、ページビューの重複カウントが起きた為、このような条件指定を行いました。

[Old History Fragment][New History Fragment]のチェック方法については後程説明します。

dataLayerでGTMイベントと取得変数を確認する

ブラウザのコンソール画面でdataLayerと入力すると、発火しているイベントや取得出来ている変数が表示出来る。
GTMのプレビューモードで確認出来るページはそちらを使うと良いが、
ユーザーのログイン機能に紐づくページなど動的に生成されるページはGTMのプレビューモードで確認出来ない。
その際にはこのやり方が有効だという事に気づいた。

このページを確認すると以下のように表示される。

そして、履歴の変更が実行されているページでは、[gtm.historyChange]というイベントが実行される。
そのイベントで[gtm.oldUrlFragment]や[gtm.newUrlFragment]が取得出来る。

• gtm.oldUrlFragment・・・GTMの組み込み変数の[Old History Fragment]で取得
• gtm.newUrlFragment・・・GTMの組み込み変数の[New History Fragment]で取得

カスタムディメンションの設定

GTMで設定したパラメータをGAで表示させるにはカスタムディメンションを設定する必要がある。
その方法を紹介。

• [ディメンション名] – [任意の名前]
• [範囲] – [イベント]
• [イベントパラメータ] – [page_location]
  ※GTMタグで定義したフィールド名を設定する

まとめ

これまで一般的なWEBサイト（MPA）でのGA4の導入は経験したことがあったが、SPAで構築されたWEBサイトでのGA4導入は初めての経験だった。
しかも、GTMイベントの発火によって重複カウントや計測されないページが出るなど、意図しない挙動が多く試行錯誤の連続だった。
同じようなケースで悩まれている方の参考になれば幸いです。

• 
  松浦 一彦
  • X（旧Twitter）
  • Facebook
  • Instagram

• 約11年間、事業者会社、制作会社でWEBデザイン、WEBディレクション、GA/GTMを使用したアクセス解析などを経験。
  2022年3月よりフリーランスとして独立。
  現在は業務委託として複数の企業のプロジェクトに参加する傍ら、受託案件を受けたり、自身のブログを運用しています。

  • スキルUI/UX改善、サイト分析、WEBサイト&LPデザイン、コーディング、ディレクション、動画編集、WordPress構築
  • 言語HTML、CSS、Javascript/jQuery、PHP
  • ツールPhotoshop、illustrator、Premiere、After Effect、XD、Figma、Googleアナリティクス