Zenn
📊

【React】Google Analytics (GA4) を導入する

2022/06/10に公開
Google Analytics
React
tech

この記事では、React で Google Analytics (GA4) の計測を行う方法についてお話しします。Google Analytics (GA4) は様々な手法で導入が可能ですが、今回の記事では react-ga4 というパッケージを使ったパターンを紹介します。

はじめに

Google Analytics のバージョンについて

現在、Google Analytics には 2 種類のバージョンが存在しております。従来の Google Analytics が Universal Property (UA) と呼ばれ、2020年10月にリリースされた最新バージョンが Google Analytics 4 Property (GA4) と呼ばれます。

UA と GA4 の比較

Google Analytics の次世代バージョンとして期待される GA4 ですが、現在はあくまでも移行期間となっており、世の中の現行アプリでは UA が使われていることが一般的です。また、GA4 はまだ機能開発が進められている段階なので、現時点で UA と比較するとまだまだ計測機能が乏しい印象もあります。

一方で、今後のアップデートは GA4 がメインとなり、いずれは UA に変わり置き換わるものなので、これから実装するアプリケーションでどちらを採用するべきか悩む方も多いかと思います。

私が GA4 のみを導入した理由

そもそも、GA4 と UA は並行して計測することが可能なので、「今は機能の揃っている UA を使いたいけど、移行した時には GA4 にも計測データがほしい」という方は、両方とも計測することを推奨します。

では、私がなぜ GA4 だけを導入したかというと工数削減のためです。背景ですが、私が手がけていたウェブアプリは、新しくローンチを予定していたモバイルアプリのランディングページでした。チームメンバーが少ないスタートアップで開発を行なっていたので、なるべく工数はモバイルアプリの開発に割きたい状況でした。また、あくまでも簡易的なランディングページを作りたかっただけなので、Google Analytics に期待していた計測機能は GA4 で十分に満たせました。

最小工数で Google Analytics を導入するためにパッケージを採用する決断をしましたが、React で有力なパッケージには欠点がありました。

  1. react-ga: analytics.js というクライアントライブラリを使った UA 導入用パッケージ
  2. react-ga4: gtag.js というクライアントライブラリを使った GA4 導入用パッケージ

既存のパッケージで UA と GA4 が簡単に同時に導入できるのであれば検討したかったのですが、残念ながら上記のパッケージはどちらとも片方の Google Analytics にしか対応しておりません。そもそも、GA4 を計測するためには gtag.js が必須 (UA は analytics.js と gtag.js 両方で計測できる) なのですが、react-ga4 では UA の計測が行えませんでした。

というわけで、今回の要件では GA4 だけで十分だったので、最新のクライアントライブラリを使った react-ga4 で Google Analytics を導入しました。

React-ga4 を使った実装手順

Google Analytics を準備

1) Google Analytics にアクセスして、管理画面からアカウントを作成します。

2) 必須入力項目を記入し、Google Analytics アカウントとプロパティの作成を進めます。

3) データストリームメニューからストリームを作成します。

私は、ウェブアプリケーションで測定を行うので、Web を選択します。

4) サイト情報を入力すると、測定 ID が現れます。

この測定 ID を使って以降の設定を進めるので、メモをしておくと便利です。

番外編) 以降の設定を進めたら、レポートメニューから計測データが確認できます。

React-ga4 をインストール

基本的な使い方は UA に対応していた react-ga と大差ないので、react-ga に慣れている方であれば簡単に設定ができます。

インストール
npm i react-ga4
使い方
import ReactGA from "react-ga4";

// Google Analytics 測定 ID を入力して設定
ReactGA.initialize("G-XXXXXXXXXX");
// ページビューイベントを処理
ReactGA.send("pageview");

参照: https://github.com/PriceRunner/react-ga4

Pageview イベントを処理

React の Single Page Application (SPA) では、一つのページをベースとして、ページ遷移等とともにページ内のコンテンツを置き換える方式でレンダリングされます。そのため、Google Analytics の pageview イベントを正しく処理するようにケアが必要です。

そのために活用するのが、レンダリング直後に呼び出される componentDidMount もしくは useEffect です。

私は、全てのパスで同じ形式 (パス名+クエリ文字列) の pageview イベントを処理したかったので、App.js から以下の usePageTracking を呼び出しています。

useTracking.js
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga4";

const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    // Google Analytics 測定 ID を入力して設定
    ReactGA.initialize("G-XXXXXXXXXX");
    ReactGA.send({
      hitType: "pageview",
      // アクセスしたパス (pathname) とクエリ文字列 (search) を送付する (必要に応じて編集する)
      page: location.pathname + location.search,
    });
  }, [location]);
};

export default usePageTracking;

その他イベントを送付

カスタムイベントを処理することも簡単に行えますので、参考までにコードを残しておきます。

カスタムイベント
// ここでイベント名を置き換える
ReactGA.event("custom_event_name");

宣伝

ダイエット中の人を応援するために、ファミリーレストランのメニューをガチャガチャ形式で選べるネタ(?)サイトを作成しました。

カロリーを指定してメニューを選べるので、ネタで遊んでみてください！
https://dietgacha.net/

普段は、誰でも使いやすい「筋トレ記録アプリ」を開発しておりますので、こちらも是非ご利用ください！

https://komms.co.jp/brnt

おわりに

React-ga4 パッケージを利用することで、最小工数で Google Analytics を導入することが可能です。冒頭でも紹介しましたが、Google Analytics には複数のバージョンがあり、様々な導入方法があるので、ユースケースに合った方法で導入を考えてみてください！

Discussion