Google Cloud Platform
GA4 Data APIを利用するために、GCP側でAPIの有効化、OAuthクライアントID、クライアントシークレットを管理します。Google Cloud Consoleは、そのGCPを設定するための管理画面です。
STACK
仕様技術
大きな管理画面を作り込むのではなく、GA4のデータ取得と表示に必要な部分だけをPHPでシンプルに構成しています。
PHP
各レポートページで設定を読み込み、GA4 Data APIへのリクエスト、集計、表示用データの整形を行います。
Google Analytics Data API
閲覧数、訪問者数、ページ別アクセス、年齢・性別・端末、流入元などを必要に応じて取得します。
OAuth 2.0
Googleアカウント認証後にトークンを保存し、以降はAPIアクセスに利用します。認証情報は公開領域から分離します。
File Cache
APIの呼び出し回数と表示待ち時間を抑えるため、取得結果を一定時間キャッシュします。必要な場合は手動更新もできます。
HTML / CSS / JavaScript
レポートごとに見やすいUIを用意し、推移グラフや期間切り替えなど必要な操作だけを軽く実装します。
Chart.js
推移、属性、端末など、表だけでは読み取りづらいデータをグラフで補助的に表示します。
PROCESS
取得から表示までの流れ
GA4の生データをそのまま見せるのではなく、クライアントが判断しやすい単位に変換してから表示します。
GCPでAPI利用の準備をする
GCPはGoogleのクラウドサービス全体、Google Cloud Consoleはそれを操作する管理画面です。Consoleでプロジェクトを用意し、Google Analytics Data APIの有効化、OAuthクライアント、リダイレクトURI、認証情報を設定します。
レポート設定を読み込む
プロパティID、除外URL、ページ名の置換、QRコードやInstagram流入の条件などをサイトごとに定義します。
GA4 Data APIへ問い合わせる
期間、dimension、metricを指定して、ページ別・日別・属性別・流入別のデータを取得します。
表示用に整形する
URLの統合、タイトル補正、不要ページの除外、日別から週別・月別への集計などを行います。
キャッシュして表示する
整形済みデータをキャッシュし、次回表示を高速化します。画面側ではサマリー、推移、ページ別、流入を見やすく並べます。
DATA DESIGN
表示設計の考え方
専門的な分析よりも、運用判断に使える見やすさを優先しています。
GA4の数字をそのまま出さない
ページタイトルの重複、URL表記揺れ、不要ページなどを整理し、見る人が迷わない単位にまとめます。
クライアントごとに表示を変える
QRコード流入を重視するサイト、複数プロパティを横断するサイトなど、目的に合わせて構成します。
軽量に保つ
必要なデータだけを取得し、キャッシュとシンプルな画面構成で、共有しやすいレポートにします。