【Next.js】GoogleAnalyticsを導入する方法を解説

Next.js(TypeScript)でGoogleAnalyticsを導入する方法を解説します。

Next.jsのnext/scriptを使った形で、GoogleAnalytics最新のGoogleアナリティクス 4 プロパティ（GA4）を導入します。

モグモグさん

ちなみに旧GA（ユニバーサルアナリティクス）は2023年の7月にサポート終了となる予定ですのでGA4を使うことをオススメします。

両方導入することも可能です。

[/box]

バージョン

next 12.3.1
react 18.2.0
@types/gtag.js 0.0.12

next/scriptとは？
- 使用例
Analytics用のScriptを作成
まとめ

next/scriptとは？

一言で表すと主に、外部スクリプトを読み込む際のパフォーマンス低下を防ぐコンポーネントです。

GoogleAnalyticsだけではなく、各種広告やGoogleタグマネージャーなどWEBサイトやWEBアプリケーションにおいてサードパーティ製のライブラリを読み込むケースは必ずといっていいほどあります。

ただしそれによってパフォーマンスに悪影響を及ぼすこともしばしばあります。

next/scriptを使用することで、HTMLの<script>を拡張してユースケースに合わせて読み込みタイミングを変更することが可能になります。

<script>タグで開発者側でできることを増やすことができるイメージですね。

使用例

本記事では簡単に使用例とポイントに触れておきます。

import Script from 'next/script'

<Script
  src="https://example.com/script.js"
  strategy="beforeInteractive"
/>

strategyというpropsが重要で、下記のような値を使用することができます。

beforeInteractive: ページが表示される前にロード
afterInteractive(初期値): ページが表示された直後にロード
lazyOnload: ページが表示されアイドル状態になった後にロード

モグモグさん

詳細は公式リファレンスを確認ください。

Analytics用のScriptを作成

それでは導入のためにAnalytics用のScriptを作成していきます。

イベント用の関数を定義

開発環境などでは動かないような処理も追加しています。

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || "";

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: string): void => {
  if (!GA_TRACKING_ID) return;
  if (typeof window !== "undefined") {
    window.gtag("config", GA_TRACKING_ID, {
      page_path: url,
    });
  }
};

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
type GaEventProps = {
  action: string;
  category: string;
  label: string;
  value?: number;
};

// NOTE: 本記事内では使用してません。イベントを測定したいページやアクションなどでご利用ください。
export const event = ({
  action,
  category,
  label,
  value,
}: GaEventProps): void => {
  if (!GA_TRACKING_ID) return;

  if (typeof window !== "undefined") {
    window.gtag("event", action, {
      event_category: category,
      event_label: label,
      value: value,
    });
  }
};

型定義を追加

$ yarn add -D @types/gtag.js

or

$ npm i --save-dev @types/gtag.js

環境変数に追加

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-xxxxxx

Analytics読み込み用のスクリプトを作成

next/scriptを使った形でスクリプトを作成します。

import Script from "next/script";

export const GaScript = () => (
  <>
    {GA_TRACKING_ID && (
      <>
        <Script
          id="load-ga"
          src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          strategy="afterInteractive"
        />
        <Script id="load-ga-script">
          {`
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}
             gtag('js', new Date());
             gtag('config', '${GA_TRACKING_ID}');
          `}
        </Script>
      </>
    )}
  </>
);

作成したScriptを読み込む

最後に先ほど作成したScriptを_app.tsxで読み込みます。

かつイベントも発火させるようにしています。

モグモグさん

ディレクトリ構成やファイル名は異なると思いますので各自読み替えてください。

import type { AppProps } from "next/app";
import { useRouter } from "next/router";
import { useEffect } from "react";
import * as gtag from "../src/libs/gtag";
import { GaScript } from "../src/components/GaScript";

function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: string) => {
      gtag.pageview(url);
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  return (
    <>
      <MyScript />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;