サイト名変更・お引越しのお知らせ

【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とは?

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

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;

まとめ

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

next/scriptに関してはGoogleAnalyticsだけではなく他のスクリプトを読み込む場合でももちろん使えます。

参考になれば幸いです。

2 COMMENTS

匿名

初歩的な質問で大変恐縮なのですが、gtag.tsで定義されexportされている”event”という関数は_app.tsx内で使われていますか?

おそらくgtag.eventという風に用いられるとは思うのですが、私が拝見したところ見受けられません。そこでeventという関数の意義について知りたいです。

この質問に回答するにあたり足りない前提条件等があったら申し訳ないですが、回答していただけると幸いです。

モグモグさん

ご質問ありがとうございます。

ややこしくて申し訳ないですが、この関数は記事内では使っていないです。
例えば別ページで特定のイベントを取得したい場合などにご利用ください。

本記事もコメントをつけて更新しておきます。ありがとうございます。

現在コメントは受け付けておりません。