LOU-Ark
Project

AIが作ったサイトに「感覚」を。GTMを使ったGA4分析基盤の手動構築ステップ

AIが自動生成したサイトに、分析の「神経網」を配線する第一弾。この記事では、Google Tag Manager経由でGA4を手動設定し、サイトの行動を把握するための具体的なデータサイエンス的手順を解説します。

前回のプロジェクト「AIエージェント協働サイト構築 (sophia-echoes)」では、AIがこのポートフォリオサイトの「肉体」を自動生成しました。しかし、生命が環境を認識し、学習するためには「感覚器官」とそれを統合する「神経網」が不可欠です。デジタル空間におけるそれらは、まさしくデータ分析基盤に他なりません。AIが構築した静的な構造に、ユーザーの行動という「脈動」を与え、そのフィードバックから学習するループを創り出す。これは、AIにはまだ委ねられない、人間の戦略的かつ精密な手動作業です。

この記事では、その分析基盤の全体像（GTM, GA4, GSC, BigQuery）のうち、核となる「Google Analytics 4（GA4）」、すなわちサイト内行動を捉える感覚器官の配線プロセスを詳述します。目標は、AIが作ったサイトに、データという「感覚」を実装することです。

1. なぜGTM（司令塔）経由でGA4を導入するのか？

GA4をサイトに導入する方法は、大きく分けて2つあります。一つはGA4から提供される計測タグを直接HTMLの``内に埋め込む方法。もう一つは、Google Tag Manager（GTM）という「タグ管理の司令塔」を経由する方法です。私は後者を選択しました。その理由は、データサイエンティストとしてのシステム設計思想に基づいています。

設計思想: 責任の分離と将来の拡張性確保。HTMLは構造、CSSは見た目、JavaScriptは振る舞い、そしてGTMは外部計測・マーケティングタグの管理、という役割分担を明確にする。

GTMを経由する具体的なメリットは以下の通りです。

  • タグ管理の一元化: GA4だけでなく、将来的に広告コンバージョンタグ（Google Ads, Meta広告など）やヒートマップツールのタグを追加する際、GTMの管理画面上で完結します。HTMLを直接編集する必要がなく、エンジニアの手を煩わせることがありません。
  • HTMLのクリーン化: サイトのソースコードに記述するタグはGTMのコンテナスニペットのみ。これにより、HTMLは純粋にコンテンツの構造定義に集中でき、可読性と保守性が向上します。
  • 高度なトリガーと変数: 特定のボタンクリック、フォーム送信、ページ滞在時間など、複雑なユーザー行動をトリガーとして設定し、イベントを計測できます。これは直接埋め込みでは困難な、きめ細やかなデータ取得を可能にします。

実際、AIにサイト構築を指示したPythonスクリプト `main_03` は、各HTMLファイルにGTMコンテナタグを挿入する処理のみを自動化しています。これは、AIに「構造」の生成を任せ、分析という「戦略」に関わる部分は人間がGTM上でコントロールするという、明確な役割分担の現れです。

2. GA4プロパティとデータストリームの手動作成

GTMという司令塔を準備したら、次は「感覚器官」であるGA4プロパティを作成します。これは完全に手動のプロセスであり、分析の目的を理解した人間が行うべき作業です。

  1. Google Analyticsアカウントにログイン: 既存のアカウントにログインし、「管理」画面へ進みます。
  2. 新しいプロパティの作成: 「プロパティを作成」ボタンをクリックし、プロパティ名（例: `LOU-Ark Portfolio`）、レポートのタイムゾーン、通貨を設定します。
  3. データストリームの作成: GA4の核となる概念が「データストリーム」です。これは、ウェブサイトやアプリといったデータ収集元を定義するものです。今回は「ウェブ」を選択します。
  4. ウェブストリームの設定:
    • サイトのURL（例: `https://lou-ark.com`）を入力します。
    • ストリーム名（例: `Web Stream - LOU-Ark Portfolio`）を分かりやすく設定します。
    • 「拡張計測機能」がデフォルトで有効になっていることを確認します。これにより、ページビューだけでなく、スクロール、離脱クリック、サイト内検索などの基本的な行動が自動で計測されます。
  5. 測定IDの取得: ストリームを作成すると、「測定ID」（`G-XXXXXXXXXX` の形式）が発行されます。これが、GTMとGA4を接続するための重要なキーとなります。このIDをコピーしておきます。

この段階で、Googleのサーバー上には私たちのサイトからのデータを受け取る準備が整いました。しかし、まだサイト側からデータを送信する仕組みは存在しません。次はその「配線」作業です。

3. GTM側でのGA4タグ設定（手動）

GTMのワークスペースで、先ほど取得したGA4の測定IDを使ってタグを設定します。これにより、サイトにアクセスがあるたびにGTMがそれを検知し、GA4にデータを送信するようになります。

  1. GTMワークスペースで「タグ」>「新規」を選択: 新しいタグを作成します。名前は分かりやすく「GA4 - Google Tag - All Pages」などとします。
  2. タグの設定:
    • タグタイプとして「Google タグ」を選択します。（以前の「GA4 設定」タグはこれに統合されました）
    • 「タグID」のフィールドに、先ほどコピーしたGA4の測定ID (`G-XXXXXXXXXX`) を貼り付けます。
  3. トリガーの設定:
    • トリガーとは、タグを発火させる（＝実行する）条件です。今回は全てのページでGA4を計測したいので、「Initialization - All Pages」を選択します。
    • なぜ「All Pages (ページビュー)」ではなく「Initialization (初期化)」なのか？ これは同意管理（CMP）などを考慮し、他のタグが発火するよりも先に、最も早い段階でGA4の基本設定を読み込ませるためです。これにより、データ計測の漏れを最小限に抑えることができます。
  4. 保存と公開: タグとトリガーの設定を保存した後、最も重要なステップが「公開」です。GTMでは、変更を加えただけではサイトに反映されません。右上の「公開」ボタンを押し、バージョン名（例: 「GA4基本タグ設置」）を付けて公開することで、初めて変更が本番環境に適用されます。

重要:

GTMの「公開」を忘れるのは、最もよくある設定ミスの一つです。プレビューモードで動作を確認しても、公開しなければ実際のユーザーのデータは計測されません。

4. 動作確認とトラブルシューティング

設定が完了したら、必ず動作確認を行います。データは仮説検証の源泉であり、その計測基盤の信頼性は絶対条件です。

  1. GTMのプレビューモード: GTMのワークスペース右上の「プレビュー」ボタンをクリックし、サイトのURLを入力して接続します。
  2. Tag Assistantでの確認: サイトが新しいタブで開き、右下に「Tag Assistant Connected」と表示されます。元のTag Assistantのタブに戻り、左側のイベントリストで「Initialization」をクリックします。右側の「Tags Fired」セクションに、先ほど設定したGA4タグ（「GA4 - Google Tag - All Pages」）が表示されていれば、GTM側の設定は成功です。
  3. GA4のリアルタイムレポート: Google Analyticsにログインし、「レポート」>「リアルタイム」を開きます。数分以内に、自分のアクセスが地図や「過去30分間のユーザー」カードに表示されれば、GA4がデータを受信していることが確認できます。

もしデータが計測されない場合（トラブルシューティング）:

  • GTMの「公開」を忘れていないか？: 再度GTMのワークスペースを確認し、最新のバージョンが公開されているかチェックします。
  • サイト自体がデプロイされているか？: GTMタグを埋め込んだHTMLファイルが、サーバーに正しくアップロード（デプロイ）されているか確認します。
  • 測定IDは正しいか？: GTMに設定した測定IDと、GA4で発行されたIDが完全に一致しているか、一文字ずつ確認します。
  • ブラウザの拡張機能: 広告ブロッカーなどの拡張機能が、計測タグの発火を妨げている可能性があります。シークレットモードや拡張機能をオフにして試します。

結論：AIの肉体に宿った「感覚」と次へのステップ

これで、AIが生成したサイトの「肉体」に、ユーザーの行動を捉えるための「感覚神経」が配線されました。ページが閲覧され、リンクがクリックされるたびに、その情報が電気信号のようにGA4へと送られます。これは単なる技術的な設定作業ではありません。AIと人間の協働における、極めて重要な一歩です。AIが効率的に生み出した構造に対し、人間が目的意識を持って「感覚」を与え、観測と学習のサイクルを開始させたのです。

しかし、これはまだ分析基盤の第一段階に過ぎません。現在はサイト内の「行動」を捉えているだけです。次のステップでは、この神経網をさらに拡張していきます。

  • Google Search Console (GSC)との連携: ユーザーが「サイトに来る前」の行動、すなわちどんな検索キーワードで流入したかを把握する。
  • BigQueryとの連携: GA4で収集した生データを、より高度で柔軟な分析が可能な「データ倉庫 (DWH)」に蓄積する。

これらの連携により、点だったデータは線となり、やがてはユーザー行動の全体像を描き出す面となります。次回は、このGSCとBigQueryを連携させ、分析基盤を完成させるプロセスを解説します。AIが作ったサイトは、これから本格的に「学習」を始めるのです。