【PHP・サーバー不要の難しい知識なし】GA4アクセス解析ダッシュボードをサイトに設置する方法

-
【PHP・サーバー不要の難しい知識なし】GA4アクセス解析ダッシュボードをサイトに設置する方法

「Googleアナリティクスの数字、なんとなくしか見れていない…」「外部ツールに月額費用をかけずに、自分のサイト専用のダッシュボードが欲しい」そんな方に向けて、この記事ではGA4とSearch ConsoleのデータをWebサイト上で直接確認できるダッシュボードを設置する手順を、実際にやってみた経験をもとにまとめました。

目次

    「Googleアナリティクスの数字、なんとなくしか見れていない…」

    「外部ツールに月額費用をかけずに、自分のサイト専用のダッシュボードが欲しい」

    そんな方に向けて、この記事ではGA4とSearch ConsoleのデータをWebサイト上で直接確認できるダッシュボードを設置する手順を、実際にやってみた経験をもとにまとめました。

    必要なもの

    • WordPressなどのCMSではなく、PHPが動くレンタルサーバー
    • Googleアカウント(GA4・Search Consoleに登録済み)
    • Google Cloudアカウント(無料で作成可能)

    全体の流れ

    設定は大きく5つのステップです。

    1. GA4プロパティIDを確認する
    2. Google Cloudでサービスアカウントを作成し、JSONキーを取得する
    3. GA4・Search ConsoleにサービスアカウントのメールアドレスをI追加する
    4. サーバーにファイルを配置・設定する
    5. Google Cloud側でAPIを有効化する

    順番に解説していきます。

    STEP 1:GA4プロパティIDを確認する

    1. Google Analytics にログイン
    2. 左下の歯車マーク「管理」をクリック
    3. 「プロパティ設定」を開く
    4. プロパティID(数字のみ)をメモしておく

    STEP 2:Google Cloudでサービスアカウントを作成する

    サービスアカウントとは、Googleのシステムにアクセスするための「専用ユーザー」のようなものです。

    サービスアカウントの作成

    1. Google Cloud Console にログイン
    2. 使用するプロジェクトを選択(なければ新規作成)
    3. 左メニューから「IAMと管理」→「サービスアカウント」へ
    4. 「サービスアカウントを作成」をクリック
    5. 名前を入力して作成(ロールの設定は不要)

    JSONキーのダウンロード

    1. 作成したサービスアカウントをクリック
    2. 「キー」タブ →「鍵を追加」→「新しい鍵を作成」
    3. 形式は「JSON」を選択してダウンロード
    4. ダウンロードされたJSONファイルを大切に保管しておく

    STEP 3:GA4・Search ConsoleにサービスアカウントのメールIを追加する

    ダウンロードしたJSONファイルの中に client_email という項目があります。〇〇@〇〇.iam.gserviceaccount.com という形式のメールアドレスです。これをGA4とSearch Consoleに追加します。

    GA4に追加する

    1. Google Analyticsの「管理」→「プロパティのアクセス管理」
    2. 右上の「+」→「ユーザーを追加」
    3. client_email のアドレスを入力、権限は「閲覧者」でOK

    Search Consoleに追加する

    1. Search Console →「設定」→「ユーザーと権限」
    2. 「ユーザーを追加」から同じメールアドレスを「制限付き」で追加

    STEP 4:サーバーにファイルを配置・設定する

    ファイルの配置

    サーバーに以下の構成でファイルを配置します。

    analytics/
    ├── index.php
    ├── ga4_api.php
    ├── config.php         ← 設定ファイル(config.sample.phpをコピーして作成)
    └── data/
        └── ga4/
            └── service_account.json  ← STEP2でダウンロードしたJSONファイル

    config.phpの設定

    config.sample.phpconfig.php にコピーして、以下の値を書き換えます。

    $GA4_PROPERTY_ID = 'xxxxxxxx';           // STEP1で確認したプロパティID
    $SC_SITE_URL     = 'https://yoursite.com/'; // Search Consoleに登録しているURL(完全一致)
    
    // ダッシュボードを守るベーシック認証(必ず変更してください)
    $ANALYTICS_BASIC_USER = '任意のユーザー名';
    $ANALYTICS_BASIC_PASS = '強いパスワード';

    config.phpdata/ フォルダはGitの管理対象から外しておきましょう(.gitignore に追記)。秘密鍵の情報が含まれるため、GitHubなどに上げないよう注意が必要です。

    STEP 5:Google Cloud側でAPIを有効化する

    これを忘れてつまずくケースが多いポイントです。サービスアカウントを作成しただけではAPIは使えず、個別に有効化が必要です。

    GA4 Data APIを有効化する

    1. Google Analytics Data API の有効化ページ にアクセス
    2. 対象プロジェクトを選択して「有効にする」をクリック

    Search Console APIを有効化する

    1. Search Console API の有効化ページ にアクセス
    2. 同様に「有効にする」をクリック

    有効化後、反映まで1〜2分かかる場合があります。

    動作確認

    すべての設定が完了したら、以下のURLで直接APIのレスポンスを確認できます。

    https://yoursite.com/analytics/ga4_api.php

    JSONデータが返ってきて error の表示がなければ成功です。エラーが表示された場合はメッセージの内容に従って対応してください。

    問題なければ /analytics/ にアクセスしてダッシュボードを確認してみましょう。

    まとめ

    ステップ

    内容

    STEP 1

    GA4プロパティIDを確認

    STEP 2

    Google Cloudでサービスアカウント作成・JSONキー取得

    STEP 3

    GA4・Search ConsoleにサービスアカウントのメールIを追加

    STEP 4

    サーバーにファイルを配置・config.phpを設定

    STEP 5

    GA4 Data API・Search Console APIを有効化

    外部サービスへの月額費用なし、PHPとcURLだけで動作するので、ロリポップなどの共有レンタルサーバーでも問題なく動きます。自社サイト専用のアクセス解析環境をお手軽に構築してみてください。

    この記事を書いた人
    デザネコの画像

    デザネコ

    ネコの手、借りませんか? デザインを通して、周りとのつながりを築きます。デザネコは魅力を引き出し、伝わりやすく心に届くデザインでお客さまの満足度が高まるよう努めます。私たちの制作物が、皆さまの幸せに繋がりますように。

    favicon 関連記事

    お気軽に
    ご相談ください。

    お問い合わせ・無料相談

    メールで相談する
    TOP