🎖️

Next.jsにGoogle Analyticsを導入する

2024/06/17に公開

Google Analytics

Next.js

tech

はじめに

この記事では、Next.jsプロジェクトにGoogle Analyticsを導入するための手順を説明します。

具体的には、トラッキングコードを直接組み込む方法と、@next/third-partiesというライブラリを使用した2つの導入方法について記述しています。

Google Analyticsとは

ウェブサイトやアプリのトラフィックを分析するための無料のツールです。
サイト訪問者の行動を理解し、マーケティングの戦略を改善するのに役立ちます。

アナリティクスのアカウントの作成

アカウント名を入力して、次へを選択してください。

プロパティ名を入力して、次へを選択してください。

業種とビジネスの規模を選択、次へを選択してください。

ビジネスの目標を選択して、次へを選択してください。

同意するを押してください。

アナリティクスのアカウントが作成されました。

トラッキングコードの確認

管理を選択、

管理　> データストリームを選択してください。

プロバティを選択後、トラッキングコードを選択、

手動でインストールするを選択すると表示されます。

環境変数の設定

G-から始まる、計測IDを.envファイルに追記してください。

.env

GA_ID=''

トラッキングコードの追加

トラッキングコードを適切に組み込む方法として、next/scriptコンポーネントを使用します。

next/scriptはNext.jsが提供する特別なコンポーネントで、外部スクリプトの読み込みや実行を最適化し、Reactコンポーネント内で安全に使用できるように設計されています。

src/app/layout.tsx

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import Script from 'next/script'; 
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const gaId = process.env.GA_ID || '';

  return (
    <html lang='ja'>
      <head>
        <Script
          src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
          strategy='afterInteractive'
          async
        />
        <Script id='google-analytics' strategy='afterInteractive'>
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${gaId}');
          `}
        </Script>
      </head>
        <body className={inter.className}>{children}</body>
    </html>
  );
}

ドメイン変更

管理　> データストリームから変更することができます。

カスタムイベントの設定

gtagの型定義をインストールしてください。

npm install @types/gtag.js

event_categoryやevent_labelのようなイベントを追跡する際に使用されるパラメータも設定することができます。

src/app/page.tsx

'use client';

export default function Home() {

  const handleClick = () => {
    if (window.gtag) {
      window.gtag('event', 'カスタムイベントのテスト', {
        event_category: 'カスタムイベント',
        event_label: 'カスタムイベントのボタン',
      });
    }
  };

  return (
    <main>
       <button
          onClick={handleClick}
        >
          カスタムイベントのテスト
        </button>
    </main>
  );
}

3回クリックされたことがわかります。

event_labelがカスタムイベントのボタンとなっているか確認してください。

ライブラリを使用する

現在は実験的な段階ですが、@next/third-partiesというサードパーティライブラリを使用してGAの設定を行うこともできます。

@next/third-parties

Google Tag ManagerやGoogle Analyticsを簡単に導入できるライブラリです。

ライブラリのインストール

npm install @next/third-parties@latest

// 上記で正しく動かない場合はこちらでインストールしてください
npm install @next/third-parties@14.1.2-canary.7

トラッキングコードの追加

src/app/layout.tsx

import { GoogleAnalytics } from '@next/third-parties/google';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const gaId = process.env.GA_ID || '';

  return (
    <html lang='ja'>
      <head>
        <GoogleAnalytics gaId={gaId} />
      </head>
        <body className={inter.className}>{children}</body>
    </html>
  );
}

sendGAEvent

カスタムイベントを設定することができます。

src/app/page.tsx

'use client';
import { sendGAEvent } from '@next/third-parties/google';

export default function Home() {
  return (
    <main>
        <button
          onClick={() =>
            sendGAEvent('event', 'sendGAEventのテスト', { value: 'test' })
          }
        >
          sendGAEventのテスト
        </button>
    </main>
  );
}