はじめに

全体像を把握するためにまとめた
全体像を把握するためなので厳密性と網羅性には少し欠ける。そして、用語などについて意味を全て説明することは行わない。そのため、各自都度調べながら理解していただきたい。

自分が書いた記事や他の人が書いた記事で参考になるものがあれば載せていく。

全体像

まずざっくりとしたユーザ行動をGA4で計測する全体像は以下のようになる。

➀ユーザがブラウザにてウェブサイトを訪問し
②行動をGA4で計測する。

これらを理解するには以下のものを学ぶ必要がある。
そして、それぞれについても深堀をする必要が出てくる。

1. ブラウザにてウェブサイトを訪問
- 1.1 webサイトが表示されるまでの流れ
- 1.2 ブラウザ上で行われている処理
2.ユーザの行動をGA4で計測する
- 2.1 どのように計測を行うのかの仕組み
- 2.2 GA4での計測を行うにはウェブサイトに直接gtagを記述するかGTMでの管理の2通りがある。
- 2.3 GA4とは
- 2.4 GTMとは

さらに深掘る

ブラウザで行われている処理
GA4
GTM
web技術、ブラウザ
BigQuery
その他
- Google Analytics Data API
- Looker Studio
- Google Apps Script
- Googleタグ
- BigQuery API

1. ブラウザにてウェブサイトを訪問

1.1 ウェブサイトが表示されるまでの流れ

ユーザがページのURLをブラウザのアドレスバーに入れる
➡ウェブサーバにこのページの情報をくださいというリクエストを送る
➡ウェブサーバはページの情報(HTML/CSSファイルなど)をレスポンスとして返す
➡ブラウザがレスポンスとして受け取ったデータを使ってページを描画する。(1.2)
➡ユーザがページを閲覧できる。

1.2 ブラウザが行っている処理

一部を紹介する。
ブラウザはウェブサーバからレスポンスとしてHTMLファイルを受け取り、上から順に読み込んでいく。
そして、HTMLファイルの中に別のサーバへの問い合わせが記述されていればそのサーバに問い合わせを行う。
ある要素がクリックされた時に何かを発生させるなどの処理を設定するためにJavaScriptというプログラミング言語にて書かれたファイルも読み込まれる。

以上のようにユーザがウェブページを閲覧するとき、ブラウザがウェブサーバに問い合わせてそのページを表示するための情報を受け取り、その情報を使ってブラウザが描画を行っている。

2. ユーザ行動をGA4で計測する

GA4とは

Google Analytics 4の略
ウェブサイト上でのユーザの行動を分析するツール
ウェブサイトからGA4サーバにデータを送信して分析を行う

2.1 どのように計測を行うのかの仕組み

ユーザ行動をGA4にて計測するには、ユーザの行動を記録してGA4に送る必要がある。
これはリクエストにユーザの行動を記録した文字列を含めるということにて行う。
GA4のサーバに対して、問い合わせる際にユーザの行動を記録した文字列を含めることでGA4にデータを送信する。

ユーザが行動を起こした時にGA4サーバにリクエストを送るように設定を行うことでユーザの行動を測定すると理解できる。
ユーザがページを訪れ、あるボタンをクリックしたとするとページに訪れたことを記録するためのリクエストとクリックを記録するリクエストが2回行われるイメージだ。

2.2 GA4での計測設定の手法

方法が２つある。

gtag.js

一つ目はHTML上に直接処理を記述する方法だ。
gtag.jsというJavaScriptライブラリを使用する。
このライブラリによってGA4にデータを送るための処理を行うためのツールが提供されている。gtag()という関数を記述することでGA4にデータが送れるようになっている。

イメージとしては、ユーザがクリックした際にgtag()関数を呼び出すように記述することでGA4にデータを送信している。

この手法では、HTMLやJavaScriptファイル上に記述を直接追加する必要があり管理が大変であり、知識も必要である。

GTM

2つ目がGTMを使う方法だ。

gtag.jsの管理の大変さをなくしてくれるツールがGTMだ。
Google Tag Managerの略である。
簡単に言うと、HTMLなどを直接いじらなくてもGA4の計測設定を行えるツールだ。(※GA4専用のツールではない)

GTMを使うと、HTML上にGTMスニペットと言われるコードをHTML上の所定の箇所に貼り付けるだけでHTML上の編集はこれ以上基本不要になる。
GTMのツール上にて設定を行うことで自動でGA4計測が行えるように裏側でHTML上にgtagの記述行ってくれるイメージだ。(厳密に言うと直接gtagの記述を行っていない)

▼さらに深く学んでいく

ここまではGA4にてユーザの行動を計測する仕組みとその手法について簡単に説明した。
しかし、正しく計測設定を行い、集まったデータを正しく解釈するには理解すべきことが多い。
ここからは用語と概念についてそれぞれ簡単に述べる。詳細については各自調べてほしい。出来る限り参考リンクを貼ることに努める。

web技術、ブラウザ

HTMLファイル
- ウェブサイトの構造を記述するマークアップ言語にて書かれたファイル
  - 文章に「見出し」であるなどと意味を持たせて記述する
- ウェブサイトの実体とも言える
- HTMLファイルの中にJavaScriptにて処理も記述出来る
CSS
- HTMLで書かれたものの見た目を装飾するもの。
- HTMLのどの要素に対してどのように見た目を設定するのかを記述するイメージ
- 要素を指定するセレクタはGTMにおいても使用する
JavaScript
- ブラウザ上で動くプログラミング言語
- ここを理解すると計測の仕組みを深く理解できる。計測の自由度も上がる
- イベントリスナー
  - クリックなどのイベントが起こった時に行う処理をセットしたもの
  - HTMLの〇〇の要素をクリックしたとき、などのように要素を指定してセットする
ブラウザの仕組み
- リクエスト、レスポンスの仕組み
  - リクエスト、レスポンス共に対象データだけでなく様々な情報の付与してやり取りをしている
- ブラウザ内部で行われている処理
  - レンダリング
  - サーバとの通信
検証ツールの使い方
- elementタブ
  - HTMLファイルの中身を確認できる。
  - ページのどの部分がHTMLのどこと対応するかなどが確認できる
- consoleタブ
  - JavaScriptコードを書いて試して見れる
  - ブラウザ上の領域にアクセス出来る
    - dataLayerなど
- sourcesタブ
  - HTML,CSS,JavaScriptファイル, 画像ファイルなどの中身を確認できる
  - override機能にて実装修正を試すなどが出来る
- networkタブ
  - サーバとの通信を一つずつ確認できる
  - ここでGA4のログ検証が出来る
    - このタブの理解は大事
  - https://ayudante.jp/column/2022-12-01/15-00/
- applicationタブ
  - Cookieの中身などが見れる
Cookie
- Cookieとは
  - セッションを超えてデータを保持するのに必須の技術
  - 毎回ログインしなくても情報が残っているのもCookieのおかげ
- どうやって受け渡しがされているか
  - サーバがレスポンスに載せてブラウザに送る。ブラウザはリクエストにcookieを載せてサーバに渡す
- Cookieの属性
  - Cookieを付与するときに属性を付与して設定を行う
  - https://privacysandbox.google.com/cookies/basics/cookie-attributes?hl=ja
- firstpartyとthirdparty
  - Cookieの発行元が自社サイトか外部サイトであるかで分かれる
  - 規制がそれぞれ異なる
- 最近の規制
  - ブラウザ毎に異なる
  - thirdpartyは規制が強い。safariは完全に制限している。chromeは少し緩い
    - https://www.cookiestatus.com/
URL
- URLの各部分の意味
  - プロトコル
  - ホスト名、ドメイン名
  - ポート番号
  - パス
  - クエリ文字列
  - アンカー
- ドメインレベル
  - サブドメイン
  - ルートドメイン
  - トップレベルドメイン

以上のようなWeb技術について理解しておくと、GA4,GTMの理解が進みやすい

GA4

GA4基礎概念
- プロパティ
- データストリーム
- イベント
- イベントパラメータ
- セッション
- など
各ディメンションと指標の定義を理解する。
- デフォルトチャネルグループ
- 参照元
- エンゲージメントのあったセッション数
- アクティブユーザ
- など
標準レポートと探索レポートとBigQueryのデータの違い
- 標準レポートは生データが集計されたものが表示される
- 探索レポートも生データをセッション単位などで集計加工されたデータ。標準レポートよりは自由度が高い
- BigQueryは生データを扱える
カスタムディメンション
- カスタムで作成したイベントパラメータを探索レポートでディメンションとして使うのに設定が必須
- 作成後のデータしか収集できない
- 命名規則にも注意
閾値
- ユーザが少なすぎると性別などのデータが非表示となる。
- 個人を特定するのを避けるため
サンプリング
- イベント数が特定の値を超えると、一部のデータを使って計算が行われる。
  - 結果が正確とは言えない
- 有料版であればサンプリングなしのデータの取得も可能
レポートID設定
- ユーザ識別子に何を使うかを選択出来る。
  - 何を基準にユーザを区別するかを設定する
- デフォルトでは、user_id > クライアントID > モデリングの順で適用される
GA4にて使われているCookieを理解する
- _gaなど
Cookie規制の影響
- CookieによってクライアントIDをGA4は取得している。そのため、Cookieの保持期間がユーザ識別に関わってくる
  - Cookieの保持期間が7日ならユーザが7日ごとにリセットされることになる
拡張計測機能
- この設定をオンにするとGoogleタグが読み込まれると自動でscrollなどのイベントが計測されるようになる。
- きちんと把握しないと自分で設定したイベントと競合するなど注意が必要
有料版と無料版
- 無料版
  - プロパティのイベント数上限がある
  - カスタムディメンションの個数に制限がある
  - データ保持期間が最大14か月
    - 有料なら50か月
  - サンプリングが起きやすい

GA4は基礎概念を理解するのは容易いが、きちんと理解しておかないと間違ったデータ分析に繋がる。
個人的には、BigQueryにエクスポートした生データを理解しておくとGA4の理解が進むと考えている。

GTM

GTM基礎概念
- アカウント
  - 会社単位
- コンテナ
  - ウェブサイト単位
- ワークスペース
  - 作業環境
- タグ
  - ウェブサイト上に設置するコードというイメージ
- トリガー
  - タグがいつどのような条件で実行されるかを決定する
  - トリガーを自由に設定するにはHTML/CSSを理解しておくとよい
- 変数
  - GTM内部で使う値の箱というイメージ
    - GA4測定IDという変数の箱に'G-XXXXXXX'という値を設定するなど
dataLayer
- ブラウザ上にあるデータを格納する場所というイメージ
- オブジェクト配列の形になっている
- datamodel
  - GTMはdataLayerのデータに直接アクセスするのではなく、datamodelというモデルとしてdataLayerを扱う。dataLayer配列をコンパクトにまとめたものというイメージ。データの種類ごとに最新の値のみにまとめられる。
  - https://qiita.com/sn-fukui/items/51a2e81f97ded98ab84d
変数タイプ
- JavaScript変数
  - webサイト上のJavaScriptにて定義されている変数の値を取得できる
- カスタムJavaScript変数
  - GTM の中でJavaScript コードを記述し、そのコードの戻り値を GTM 内で利用できるようにする
- データレイヤ変数
  - dataLayerの値をキー名で指定し、取得できる
- Cookie変数
  - Cookieの値を取得する
- 自動イベント変数
  - GTMが自動的に検知するクリックやフォーム送信などの情報を取得する
    - クリック要素のtextを取得など
      - 組み込みのClick text変数と同義
プレビューの使い方
- プレビューを使うと公開せずとも実際にタグが飛んでいるか、変数にはどのような値が入っているかが確認できる
GTMでの設定によりなぜGA4の計測が行えるのか
- https://qiita.com/sn-fukui/items/451f2ce981416a494bb3
サーバサイドGTM
- 普通のGTMはブラウザ上(クライアント)からデータをGA4へ送る。これに対比する形でサーバサイドGTMがある。
- 自らが持つサーバ上からGA4にデータを送るため、サーバサイドGTMと言われる
- クライアントサイドGTMからサーバサイドGTMの２つのコンテナを作成し、クライアントサイドからサーバサイドにデータを送り最終的にサーバサイドからGA4に送信するというステップを踏む
  - クライアントサイドGTMの通信先は自分が持つサーバであるので、firstpartyCookieとしてデータを送ることが出来るのが肝
Googleタグについての理解
- Googleタグにて各種サービスへのデータ送信を一元管理出来る
  - 拡張計測機能をオンにするとscrollなどが自動で取れる
- 構成パラメータにデフォルトで値が入っているが書き換えることも可能
  - https://support.google.com/tagmanager/answer/13438166?sjid=8136698895245601511-NC

以上のようにGTMはWeb技術とGA4の知識、サーバーの知識、JavaScriptなど様々な知識が必要とされる。
ブラウザとJavaScriptについても理解しているとGTMの理解が進むと感じる。

BigQuery

BigQueryとは
- サーバレスのデータウェアハウス
- データを格納し、SQLにてデータを抽出出来るツール
- GA4データをBigQueryにエクスポートすることで生データを扱えるようになる。
  - 探索レポートにて分析出来なかったことも分析できる
SQL
- データベースに格納されたデータを操作するプログラミング言語のようなもの
GA4データをBigQueryにエクスポートしたデータの構造
- 一日1テーブルが追加されていく
- 一行に1イベントの情報が格納されていく
- イベントパラメータなどは一行の中に配列のような形で格納されている
GA4データのSQLでの扱い
- unnest
- table_suffix
- など
BigQueryでのコスト抑制
- 様々な方法があるが、BigQueryは列指向であるためselectにて指定する列数をなるべく少なくすることを意識する

GA4データ BigQueryクエリ集

その他

JavaScript
- 基礎を学ぶ
- DOM,イベントリスナー
  - https://lorem-co-ltd.com/dom-event-basic/
- 同期非同期
Google Analytics Data API
- GA4のデータをスプレッドシートに書きだすことなどを自動化出来る。
  - GASで扱うことが多い
- データはjson形式で返ってくるため、jsonのデータ処理を学ぶとよい
- 抽出出来るデータは探索レポートと同じと思えばよい
Looker Studio
- Google Analytics Data APIを用いているBIツール
  - GA4コネクタを使って簡単にデータを可視化出来る
- 直感的にデータの可視化が行える
- データ統合については理解しておくとよい
Google Apps Script
- GASと言われる
- Google Workspace プラットフォーム上で動作するサーバーサイドのスクリプト言語。
  - 元はJavaScript
- Googleサービスをプログラムで操作するための便利なライブラリが用意されている
BigQuery API
- GASやPythonなどでBigQueryでの処理を操作出来る
- プログラム上でSQLクエリをBigQueryに渡して処理し、結果をpandasデータフレームとして受け取ることが出来る

Tips

networkタブにてログ検証を行う
- 設定したイベントがちゃんと飛んでいるかを確認できる
- 世の中のウェブサイトがどのようなイベントを飛ばしているかも確認することが出来たりする
userAgentをいじる
- 検証ツールでuserAgentを自由に設定することが出来る
権限のないGTMコンテナの設定を覗く
- GTMのUI上での設定はGTM.jsファイルに反映される
- このファイルは検証ツールにて確認できる
- https://qiita.com/sn-fukui/items/dd3074268947d3bbcd73
GTM.jsファイルの構成
- タグ、トリガー、変数などの情報がオブジェクトとして格納されている
- https://qiita.com/sn-fukui/items/675e5e347ab78c18ccd6
Google Analytics Data APIの割り当て履歴を分析可能にする
- GA4の管理画面上で割り当て履歴を確認出来るがエクスポートできず扱にくい
- https://qiita.com/sn-fukui/items/741dd37090eeba54d324
アンカーリンクはHTMLのidを付与したものに対して使える
- HTMLにてidを付与した要素に対してはURLの末尾にアンカーリンクを設定できるようになる
GTM API
- GTMのコンテナ情報はjson形式でエクスポート出来る
- タグなどの情報をAPI経由でスプレッドシートに書きだすことも出来る
- API経由でGTM設定を行うことも出来る
カスタムHTMLの順序制御
- カスタムHTMLタグを複数作成したときは順序を制御する必要がある。
  - デフォルトで用意されている順序の制御には注意
- https://qiita.com/at-sacai/items/12e74d7ba984f6b6b694
リファラーの仕様
- デフォルトではドメインまでしか取得できなくなった
  - https://ex-ture.com/blog/2023/05/03/%E9%81%8E%E5%8E%BB%E5%8F%96%E3%82%8C%E3%81%A6%E3%81%84%E3%81%9F%E3%83%AA%E3%83%95%E3%82%A1%E3%83%A9%E6%83%85%E5%A0%B1%E3%81%8C%E4%B8%8A%E6%89%8B%E3%81%8F%E5%8F%96%E3%82%8C%E3%81%AA%E3%81%8F%E3%81%AA/
検証ツールnetworkタブにて表示されるパラメータの省略文字の意味を検索する
- イベントはenなど2文字のアルファベットに意味が割り振られている
- https://www.thyngster.com/ga4-measurement-protocol-cheatsheet/