Next.js アプリケーションで Google アナリティクスを活用した高度な分析：イベントトラッキング、カスタム指標、ディメンションの設定方法

2024-06-24

Next.js アプリケーションで Google アナリティクスを使用する方法

Next.js は、React を使用してモダンな Web アプリケーションを構築するための人気のあるフレームワークです。 Google アナリティクスは、Web サイトやアプリケーションのトラフィックとユーザー行動を理解するのに役立つツールです。

このチュートリアルでは、Next.js アプリケーションで Google アナリティクスを設定する方法を説明します。

手順

Google アナリティクスアカウントを作成する

データストリームを作成する

Google アナリティクスアカウントにログインしたら、管理 > データストリーム に移動します。 Web を選択して新しいデータストリームを作成します。

測定 ID を取得する

データストリームが作成されると、測定 ID が割り当てられます。この ID は、Next.js アプリケーションで Google アナリティクスを設定するために使用します。

Next.js アプリケーションで環境変数を作成する

Next.js アプリケーションのルートディレクトリに .env ファイルを作成します。このファイルに、次の環境変数を追加します。

NEXT_PUBLIC_GA_MEASUREMENT_ID=<測定 ID>

gtag.js 関数を作成する

gtag.js 関数を作成して、Google アナリティクスイベントを送信します。次の例は、ページビューイベントを送信する gtag.js 関数の例です。

export const gtag = (event, data = {}) => {
  window.gtag('event', event, data);
};

_app.js ファイルに、Google アナリティクススクリプトを読み込むコードを追加します。次の例は、gtag.js 関数を使用してページビューイベントを送信するコードです。

import React from 'react';
import { gtag } from './gtag';

export default function MyApp({ Component, pageProps }) {
  React.useEffect(() => {
    gtag('pageview');
  }, []);

  return <Component {...pageProps} />;
}

追加のイベントを送信する

このチュートリアルでは、Next.js アプリケーションで Google アナリティクスを設定する方法を説明しました。上記の手順に従うことで、Web サイトまたはアプリケーションのトラフィックとユーザー行動に関する貴重な洞察を得ることができます。

補足

TypeScript を使用している場合は、gtag.js 関数と他のコードを TypeScript に変換する必要があります。
カスタムイベントやユーザープロパティを送信する場合は、gtag.js 関数に追加のコードを追加する必要があります。

Next.js アプリケーションで Google アナリティクスを使用する際のサンプルコード

ファイル構成

|-- _app.js
|-- gtag.js
|-- pages
|   |-- index.js
|-- .env

.env ファイル

NEXT_PUBLIC_GA_MEASUREMENT_ID=<測定 ID>

gtag.js ファイル

export const gtag = (event, data = {}) => {
  window.gtag('event', event, data);
};

import React from 'react';
import { gtag } from './gtag';

export default function MyApp({ Component, pageProps }) {
  React.useEffect(() => {
    gtag('pageview');
  }, []);

  return <Component {...pageProps} />;
}

pages/index.js ファイル

import React from 'react';
import { gtag } from '../gtag';

const Index = () => {
  const handleClick = () => {
    gtag('event', 'click', {
      category: 'Button',
      label: 'Click Me',
    });
  };

  return (
    <div>
      <h1>Next.js と Google アナリティクス</h1>
      <button onClick={handleClick}>クリックする</button>
    </div>
  );
};

export default Index;

.env ファイルには、Google アナリティクスの測定 ID が含まれています。
gtag.js ファイルには、gtag 関数が含まれています。この関数は、Google アナリティクスイベントを送信するために使用されます。
_app.js ファイルには、Google アナリティクススクリプトを読み込むコードが含まれています。このスクリプトは、すべてのページで実行されます。
pages/index.js ファイルには、ページビューイベントとボタンクリックイベントを送信するコードが含まれています。

このコードをカスタマイズして、ニーズに合わせてイベントを送信できます。詳細については、Google アナリティクス開発者ドキュメント https://support.google.com/analytics/?hl=en を参照してください。

Next.js アプリケーションで Google アナリティクスを設定するその他の方法

next/script コンポーネントを使用する

Next.js 14 以降では、next/script コンポーネントを使用して Google アナリティクススクリプトを読み込むことができます。次の例は、next/script コンポーネントを使用して Google アナリティクススクリプトを読み込む方法です。

import React from 'react';
import Script from 'next/script';

const Index = () => {
  return (
    <div>
      <h1>Next.js と Google アナリティクス</h1>
      <Script
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}`}
        strategy="lazyOnLoad"
        onLoad={() => {
          window.dataLayer.push({
            event: 'pageview',
          });
        }}
      />
    </div>
  );
};

export default Index;