LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@sn-fukui

GTM, GA4を扱うのにあたって必要な知識の全体像をまとめてみる

Posted at

はじめに

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

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

全体像

まずざっくりとしたユーザ行動を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タブ
    • applicationタブ
      • Cookieの中身などが見れる
  • Cookie
    • Cookieとは
      • セッションを超えてデータを保持するのに必須の技術
      • 毎回ログインしなくても情報が残っているのもCookieのおかげ
    • どうやって受け渡しがされているか
      • サーバがレスポンスに載せてブラウザに送る。ブラウザはリクエストにcookieを載せてサーバに渡す
    • Cookieの属性
    • firstpartyとthirdparty
      • Cookieの発行元が自社サイトか外部サイトであるかで分かれる
      • 規制がそれぞれ異なる
    • 最近の規制
      • ブラウザ毎に異なる
      • thirdpartyは規制が強い。safariは完全に制限している。chromeは少し緩い
  • 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の計測が行えるのか
  • サーバサイドGTM
    • 普通のGTMはブラウザ上(クライアント)からデータをGA4へ送る。これに対比する形でサーバサイドGTMがある。
    • 自らが持つサーバ上からGA4にデータを送るため、サーバサイドGTMと言われる
    • クライアントサイドGTMからサーバサイドGTMの２つのコンテナを作成し、クライアントサイドからサーバサイドにデータを送り最終的にサーバサイドからGA4に送信するというステップを踏む
      • クライアントサイドGTMの通信先は自分が持つサーバであるので、firstpartyCookieとしてデータを送ることが出来るのが肝
  • Googleタグについての理解

以上のように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
  • 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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?