🐗

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

4 min read

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_viewfalse を設定しています。
  • script タグの中身は tsx 内の script として評価されてしまうため、string にして回避しています。

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

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

設置方法

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 を追い求めて開発したい方を募集しています!

https://www.wantedly.com/companies/magicmoment

Discussion

ログインするとコメントできます