Next.jsにGoogle Analyticsを導入するメリットは何ですか？

Next.jsはサーバーサイドレンダリングや静的生成に対応しているため、SEOに優れたWebサイトの構築が可能です。また、Google Analyticsを導入することで、ユーザー行動の詳細なトラッキングができ、サイト改善に役立ちます。

Google Analyticsの計測データを正確に取得するにはどうすればよいですか？

Next.jsのルーター機能を使って、ページ遷移が発生した際にrouteChangeCompleteイベントを使用してページビューをトラッキングすることで、正確な計測データを取得できます。

Google Analyticsのトラッキングコードはどこに設置しますか？

_app.tsxや_document.tsxにGoogle Analyticsのスクリプトを設置し、next/scriptを使ってトラッキングコードを読み込むのが一般的です。

【Next.js】アナリティクスツールの実装

概要

Next.jsを使ってWebアプリケーションにGoogle Analyticsを導入することで、サイトのパフォーマンスを測定し、ユーザー行動を分析できます。これにより、ページビューやイベントトラッキングを行い、サイトの改善に役立つデータを得ることが可能です。Google Analytics 4（GA4）の導入は、next/scriptコンポーネントを使って簡単に実装できます。本記事では、Next.jsにGoogle Analyticsを組み込む具体的な手順を解説します。

必要な手順

Google Analyticsのセットアップ

まず、Google Analyticsのアカウントを作成し、新しいプロパティを設定します。GA4の測定ID（G-XXXXXXXXXX）を取得し、これをNext.jsで使用するために環境変数に追加します。

NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX

`gtag.js`ファイルの作成

Google Analyticsのトラッキングコードを管理するために、lib/gtag.jsファイルを作成します。このファイルでは、測定IDを使ってページビューを記録する関数pageviewを定義します。

export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_ID;
export const pageview = (url) => {
  window.gtag('config', GA_MEASUREMENT_ID, {
    page_path: url,
  });
};

`next/script`コンポーネントの導入

Google Analyticsのスクリプトを読み込むために、next/scriptコンポーネントを使用します。これを_app.tsxや_document.tsxに追加します。strategy="afterInteractive"を指定して、ページがインタラクティブになった後にトラッキングが開始されるように設定します。

import Script from 'next/script';
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
          `,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}
export default MyApp;

ページ遷移のトラッキング

Next.jsのアプリでは、クライアントサイドのルーティングが行われるため、ページ遷移が発生したときにもGoogle Analyticsにデータを送信する必要があります。router.eventsを使い、ページ遷移ごとにpageviewを発火させます。

import { useRouter } from 'next/router';
import { useEffect } from 'react';
import * as gtag from '../lib/gtag';
function MyApp({ Component, pageProps }) {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url);
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);
  return <Component {...pageProps} />;
}
export default MyApp;

データの確認

Google Analyticsのリアルタイムレポートで、設定が正しく動作しているか確認します。数分待った後、アクセスデータが記録されているかを確認しましょう。

まとめ

Next.jsにGoogle Analyticsを導入することで、ページビューやイベントのトラッキングを効果的に行い、ユーザーの行動を詳細に分析することができます。特に、next/scriptを使ったトラッキングコードの実装や、ルート遷移時のページビュー計測など、リアルタイムにデータを取得する手法を紹介しました。これらのデータは、Webサイトのパフォーマンス向上やSEOの改善に役立ちます。Next.jsの強力な機能と組み合わせて、Google Analyticsを最大限に活用しましょう。

概要