SaveData開発記録#22 Googleアナリティクス活用でアプリのアクセス管理

今日はGoogleアナリティクスをアプリに導入して
アクセス数を管理する設定をしていきます。

Googleアナリティクスのことから
導入方法まで網羅的に解説します。

簡単な環境一覧
Rails７系 Ruby 3系
デプロイ先 Render
開発環境 Docker

そもそもGoogleアナリティクスって何？

Googleが提供する無料のアクセス解析ツール！
マーケティング戦略を組むときの最強の相棒なのだ🥳

これって何ができるの？

基本機能

• 訪問者数：何人来たか
• ページビュー：何ページ見られたか
• 滞在時間：どれくらい滞在したか
• 離脱率：どこで離れたか
• 流入元：どこから来たか（Google検索、SNS、直接など）

詳細分析

• リアルタイム：今何人見てるか
• デバイス：スマホ/PC/タブレットの割合
• 地域：どの国・地域から
• ユーザー属性：年齢、性別（推定）
• コンバージョン：目標達成数（登録、購入など）

こんな感じで作戦立てられる

1. 毎日のアクセス数チェック
2. 人気機能の特定（ゲーム登録が多い？閲覧が多い？）
3. 改善効果の測定（UI変更前後で比較）
4. ポートフォリオのアピール材料（「月間◯◯PV達成」など）

導入方法

1. Google Analytics IDを取得

こちらの記事がとても参考になると思います。

まず、Google Analytics 4 (GA4) でプロパティを作成して、
測定IDを取得。

すると
測定ID：G-XXXXXXXXXX
みたいなのが出てくるのでコピペしておきます。

2. 環境変数に設定

# .env ファイルに追加
echo "GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX" >> .env

Render.comの環境変数にも追加してください：

• Key: GOOGLE_ANALYTICS_ID
• Value: G-XXXXXXXXXX

3. レイアウトファイルに追加

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>

ここから↓

     <!-- Google Analytics -->
   <% if ENV['GOOGLE_ANALYTICS_ID'].present? %>
     <!-- Google tag (gtag.js) -->
       <script async src="https://www.googletagmanager.com/gtag/js?id=<%=            ENV['GOOGLE_ANALYTICS_ID'] %>"></script>
      <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         gtag('config', '<%= ENV['GOOGLE_ANALYTICS_ID'] %>');
      </script>
   <% end %>

ここまで↑

  </head>
  <body>
    <%= yield %>
  </body>
</html>

4. Turboに対応（オプション）

Turbo使用時にページ遷移を追跡するには、以下を追加：

 app/views/layouts/application.html.erb の</body>の手前に

<% if ENV['GOOGLE_ANALYTICS_ID'].present? %>
  <script>
    // Turbo対応：ページ遷移時にもトラッキング
    document.addEventListener('turbo:load', function(event) {
      if (typeof gtag === 'function') {
        gtag('config', '<%= ENV['GOOGLE_ANALYTICS_ID'] %>', {
          'page_location': event.detail.url
        });
      }
    });
  </script>
<% end %>

その後デプロイします。

🔍 動作確認

開発環境

# .envファイルを確認
cat .env | grep GOOGLE_ANALYTICS_ID

# サーバー再起動
docker compose restart web

本番環境（Render.com）

1. Render.comのダッシュボード
2. Environment変数に GOOGLE_ANALYTICS_ID を追加
3. 再デプロイ

確認方法

1. ブラウザで開発者ツール（F12）
2. Networkタブ
3. gtag/js や google-analytics が読み込まれているか確認

または

1. Google Analytics リアルタイムレポート
2. 自分でサイトにアクセス
3. リアルタイムで表示されるか確認

これでGoogleアナリティクス設定完了です。

よければ触ってみてね。
ゲームx思い出保管アプリ　SaveData