Zenn
🐗

React/TypeScript のプロダクトに GA4 を導入しようとしたら思ったより大変だった話

2021/09/28に公開
Google Analytics
React
TypeScript
tech

Agenda

  • はじめに
  • Google Analytics の導入
    • グローバルサイトタグの設置
    • ページビューイベントの送信
    • User 属性の送信
    • デバッグ方法
  • まとめ

はじめに

はじめまして。Magic Moment でエンジニアをしている栗原と申します。

Magic Moment では Magic Moment Playbook をリリースし半年が経ち、多くのお客様にお使い頂くようになりました。
お客様が増えたことで UI/UX に関してご意見を頂くようになりましたが、実際にどのように使われているかがわからず、正しく改善できない状態でした。
そこで、データに基づく UI/UX の改善をすべく、Google Analytics (以下 GA ) を導入することにしました。

GA の導入にあたり、ウェブ上のさまざまな情報を試みましたが、リクエストが重複して送られてしまったり、ユーザー属性情報が正しく送られないなど多くの問題が発生しました。
問題を調査したところ、どうやら Google Analytics 4 (以下 GA4 ) になり、導入方法や概念が変わったようです。

これから記載するやり方でうまくいったので、ご紹介させてください。

Google Analytics の導入

Magic Moment では、フロントエンドのベースとして、React/TypeScript を使用しています。

React/TypeScript 環境下で 、 GA4 を導入する方法として、react-ga や Google が公式で提供している gtag.js などが考えられますが、Magic Moment では gtag.js を採用することにしました。

react-ga を採用しなかった理由としては、内部的に一世代前の analytics.js を使用しているなど、いくつか問題があったためです。

グローバルサイトタグの設置

GA4 をアプリケーションに組み込むために最初にやることは、グローバルサイトタグの設置です。

public/index.html にタグを設置して動かすことも可能ですが、環境変数が使えないなどの問題があるので、react-helmet を使用して設置することにしました。

  • react-helmet とは

    React で html の head に要素を追加・変更ができるライブラリです。

インストール方法

$ npm install --save react-helmet
$ npm install @types/react-helmet

設置方法

import { Helmet } from 'react-helmet';

const App = () => {
  return (
    <div>
      {!!process.env.GA_MEASUREMENT_ID && (
        <Helmet>
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_MEASUREMENT_ID}`}></script>
          <script>
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${process.env.GA_MEASUREMENT_ID}', { send_page_view: false });
            `}
          </script>
        </Helmet>
      )}
    </div>
  );
};

Point

  • GA4 はデフォルトで History の変更を検知して自動的にページビューを送る機能が備わったため、特別な設定はいらないのですが、 Magic Moment ではページビューイベントの送信をコントールしたいため、send_page_view に false を設定しています。
  • script タグの中身は tsx 内の script として評価されてしまうため、string にして回避しています。

ページビューイベントの送信

グローバルサイトタグ設置の際に send_page_view に false にしたので、手動でページビューイベントを送信します。

設置方法

import * as React from 'react';

React.useEffect(() => {
  process.nextTick(() => {
    window.gtag('event', 'page_view', {
      page_path: location.pathname,
    });
  });
}, [location.pathname]);

拡張計測機能の設定

このままだと、GA4 の History の変更を検知する機能が動作してしまい、リクエストが重複して送られてしまうので、 拡張計測機能の設定 を行い、デフォルトの動作を無効にします。

  1. 管理 → データストリーム → 対象のストリームに移動します
  2. 拡張計測機能エリアの 歯車 をクリックします
  3. ページビュー数の 詳細設定を表示 をクリックします
  4. ブラウザの履歴イベントに基づくページの変更 のチェックを外します

1.png

User 属性の送信

GA4 上でユーザーの特定をするため、User 属性の設定を行います。

設置方法

React.useEffect(() => {
  process.nextTick(() => {
    window.gtag('set', 'user_properties', {
      user_id: userId,
      team_id: teamId,
    });
  });
}, [userId, teamId]);

Point

デバッグ方法

GA4 を導入し始めた頃は、レポートのリアルタイム画面で確認していましたが、DebugView という機能を使えばもっと詳細が見られることがわかりました。

  1. Google Chrome で「Google Analytics Debugger」をインストールし、拡張機能「Google Analytics Debugger」のアイコンをクリックにして ON にします
  2. Google Analytics の画面から 設定 → DebugView を開きます
  3. グローバルサイトタグを設置したサイトに実際にアクセスします

まとめ

今回は、React/TypeScript のプロダクトに GA4 を導入する方法について書かせて頂きました。

GA4 になり、思想や見られるレポートも変わったようなので、新しい Google Analytics を理解し、UI/UX 改善に役立てていきたいと思っています。

また、ともによりよい UI/UX を追い求めて開発したい方を募集しています！

Magic Momentに少しでも興味を持っていただけたら是非エントリーください！

8/30にはFindy様主催のイベントにMagic Momentから石田さんが登壇されます！
よろしければぜひご視聴ください！

さらに、こちらのイベントも8/29開催予定です！こちらはオンラインイベントです。Magic Momentの開発がどんなものか興味を持っていただいた方は是非ご参加ください！

Discussion