Zenn
🐡

GA4（Web）でDebugViewが使えるようになっていたので試してみた

2021/07/25に公開
Google Analytics
Next.js
React
tech

昨年、GA4がリリースされた時は使えなかったような気がしたDebugViewが使えるようになっていたので、試してみました。

業務での利用だと検証環境用と本番環境用などでGAのプロパティ・トラッキングIDを分けていることがほとんどだと思いますが、個人レベルで触る分にはID一つで使えたほうが楽なので、これで楽できる...！

DebugViewとは

[GA4] デバッグモードでイベントをモニタリングする

こんな感じでリアルタイムにイベント等を確認できます。
FirebaseではAndroid, iOSアプリ向けで使っていて便利だったのでWebでも使いたいと思っていました。

Next.jsでの実装

Next.js ×　TypeScriptな環境です。

まずは型定義を追加します。
window.d.tsに自分で型定義を追加するのでもいいのですが、面倒なので追加しちゃいます。

npm i -D @types/gtag.js
# or
yarn add -D @types/gtag.js

Next.jsで使う時は大抵下記のような実装をすると思います。
ここは変えず、今まで通りの実装をします。

lib/gtag.ts
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID || '';

export const pageview = (url: string): void => {
    if (!GA_TRACKING_ID) return;

    window.gtag('config', GA_TRACKING_ID, {
        page_path: url,
    });
}

export const event = (...) => { 省略 }

_document.tsxでgtag.jsを読み込む

自分はHeadタグ内をごちゃごちゃさせたくないので、コンポーネントに切り出します。

2つ目のscriptタグのdangerouslySetInnerHTML内にgtag.jsの呼び出しをコピペしてます。
そして、本番環境以外のときにgtag('config')の第3引数のオプションにdebug_mode: trueを渡すことでDebugViewが利用可能な状態になります。
作業としてはこれだけです。

Gtag.tsx
import { VFC } from 'react';
import { GA_TRACKING_ID } from '@/lib/gtag';

const isProduction = process.env.NODE_ENV === 'production';

export const GlobalSiteTag: VFC = () => {
    if (!GA_TRACKING_ID) return null;

    return (
        <>
            <script async src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`}></script>
            <script
                dangerouslySetInnerHTML={{
                __html: `
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', ${isProduction ? `'${GA_TRACKING_ID}'` : `'${GA_TRACKING_ID}', { debug_mode: true }`});
                `,
                }}
            />
        </>
    )
}
_document.tsx
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { GlobalSiteTag } from '@/components/script/Gtag';

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang='ja'>
        <Head>
            <GlobalSiteTag />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Discussion