Zenn
🏋️‍♀️

【Rails7】Google Analytics 4（GA4）を導入する

2022/09/15に公開
Rails
#
ga4
#
googleanalytics4
tech

Rails7で個人開発しているWebアプリ（下記）に、アクセス解析ツールの「Google Analytics 4（GA4）」を導入しました。そのやり方の備忘録です。

https://torikomi.fly.dev/

環境

アプリは以下の環境で作成しています。

  • macOS 11.6.2
  • Ruby 3.1.2
  • Rails 7.0.3
  • PostgreSQL 14.4

GA4でセットアップを行う

https://support.google.com/analytics/answer/9304153

こちらが公式ガイド。日本語で読めます。この公式ガイド通りに、

  • アナリティクスのアカウントを作成する
  • Google アナリティクス 4 プロパティを作成する
  • データストリームを追加する

の項目を進めて、GA4側のセットアップを行います。

Webアプリに追加するGA4タグを取得する

次に、

  • データ収集を設定する（ウェブサイトの場合）

の項目に進み、Webアプリ側に追加するGA4タグを取得します。

今回は、「Google タグをウェブページに直接追加する」の方法でいきます。

Google アナリティクス アカウントにログインし、左下の「管理」をクリック→「プロパティ」列から先ほど作成したプロパティを選択→「データ ストリーム」をクリックと進みます。

「ウェブ」を選択してクリックします。

「タグの実装手順を表示する」をクリックします。

「手動でインストールをする」をクリックします。こちらに表示されているGA4タグを、Webアプリのhead内に記述すれば測定が始まります。

WebアプリにGA4タグを追加する

上記で取得したGA4タグをWebアプリに追加します。

Railsのテンプレートエンジンにerbを使っているのであれば、GA4タグをそのままapp/views/layouts/application.html.erbのheadタグ内に貼り付ければよいでしょう。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=あなたの測定ID"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'あなたの測定ID');
    </script>
  </head>
  <body>
  </body>
</html>

slimだとこんな感じになります。

app/views/layouts/application.html.slim
doctype html
html
  head
    / Google tag (gtag.js)
    script[async src="https://www.googletagmanager.com/gtag/js?id=あなたの測定ID"]
    script
      | window.dataLayer = window.dataLayer || [];
      | function gtag(){dataLayer.pugsh(arguments);}
      | gtag('js', new Date());
      | gtag('config', 'あなたの測定ID');
  body

ブラウザからWebアプリにアクセスしている状態でGA4の画面に戻り、「レポート」→「リアルタイム」と進み、自分の現在地が表示されていたらアクセスが取得できています！

GA4のレポートの見方はこちらのサイトが詳しそうでした。GA4から得られるデータをサービス運営に活かしていきたいと思います！

https://www.ga4.guide/

Discussion