Next.jsのApp RouterでGoogle Tag Managerを設定する：next/third-partiesの活用法

更新日：

2024/08/06

Webサイトやアプリケーションの分析において、Google Tag Manager（GTM）は欠かせないツールとなっています。本記事では、Next.jsの公式ライブラリである「next/third-parties」を使用して、Google Tag Managerを効率的に設定する方法を解説します。App Routerの特性を活かしつつ、パフォーマンスと開発効率を両立させる実装方法をコード例とともに紹介していきます。

1 はじめに
2 next/third-partiesとは
3 Google Tag Managerの基本
4 Next.jsプロジェクトの準備
5 next/third-partiesのインストール
6 Google Tag Managerの設定
7 App Routerでの実装
- 7.1 layout.tsxでの設定
- 7.2 ページコンポーネントでのイベント送信
8 まとめ

はじめに

Webサイトの分析や広告効果の測定において、Google Tag Manager（GTM）は非常に重要なツールです。Next.jsを使用して開発されたウェブサイトにGTMを導入することで、様々なマーケティングタグやアナリティクスコードを効率的に管理することができます。

本記事では、Next.jsの最新機能であるApp Routerを使用したプロジェクトに、next/third-partiesライブラリを活用してGoogle Tag Managerを導入する方法を解説します。初心者の方でも理解しやすいよう、ステップバイステップで説明していきますので、ぜひ最後までお付き合いください。

next/third-partiesとは

next/third-partiesは、Next.jsが公式に提供するライブラリです。このライブラリは、Google Analytics、Google Tag Manager、Facebook Pixelなどの一般的なサードパーティスクリプトを、Next.jsアプリケーションに簡単に統合するための機能を提供します。

このライブラリの主な利点は以下の通りです：

パフォーマンスの最適化：スクリプトの読み込みを最適化し、ページの読み込み速度への影響を最小限に抑えます。
型安全性：TypeScriptをサポートしているため、開発時のエラーを減らし、コードの品質を向上させます。
簡単な実装：複雑な設定なしで、数行のコードでサードパーティスクリプトを追加できます。

next/third-partiesを使用することで、開発者はこれらのサードパーティツールの実装に関する煩雑な作業から解放され、アプリケーションの核となる機能の開発に集中できるようになります。

Google Tag Managerの基本

Google Tag Manager（GTM）は、Webサイトやモバイルアプリにマーケティングタグ（コードの一部）を追加したり更新したりするためのタグ管理システムです。GTMを使用することで、開発者に依頼することなく、マーケターや分析担当者が直接タグの管理を行うことができます。

GTMの主な特徴は以下の通りです：

中央管理：様々なマーケティングタグやアナリティクスコードを一箇所で管理できます。
柔軟性：タグの追加、変更、削除を、Webサイトのコードを変更することなく行えます。
バージョン管理：変更履歴を保持し、必要に応じて以前のバージョンに戻すことができます。
プレビューモード：本番環境に反映する前に、変更の効果を確認できます。

GTMを使用することで、Webサイトのパフォーマンスを向上させつつ、マーケティング施策の効果測定や分析を効率的に行うことができます。

Next.jsプロジェクトの準備

Google Tag Managerを導入する前に、Next.jsプロジェクトを準備する必要があります。ここでは、App Routerを使用した新しいNext.jsプロジェクトの作成方法を説明します。

新しいプロジェクトを作成するディレクトリに移動し、以下のコマンドを実行します：

bash

npx create-next-app@latest my-next-gtm-app

プロジェクト作成時の質問に答えます。App Routerを使用するために、以下のように回答してください：
- Would you like to use TypeScript? › Yes
- Would you like to use ESLint? › Yes
- Would you like to use Tailwind CSS? › No (または Yes、お好みで)
- Would you like to use src/ directory? › Yes
- Would you like to use App Router? (recommended) › Yes
- Would you like to customize the default import alias? › No
プロジェクトが作成されたら、ディレクトリに移動します：

bash

cd my-next-gtm-app

これで、Google Tag Managerを導入する準備が整ったNext.jsプロジェクトが作成されました。

next/third-partiesのインストール

next/third-partiesライブラリを使用するには、まずnpmを使用してインストールする必要があります。以下の手順に従ってインストールしてください：

プロジェクトのルートディレクトリで、ターミナルを開きます。
次のコマンドを実行して、@next/third-partiesパッケージをインストールします： npm install @next/third-parties@latest next@latest
インストールが完了したら、package.jsonファイルに@next/third-partiesが依存関係として追加されていることを確認してください。

このインストール手順により、プロジェクトでnext/third-partiesライブラリを使用する準備が整います。

Google Tag Managerの設定

Google Tag Managerを設定するには、まずGTMのアカウントとコンテナを作成する必要があります。以下の手順に従って設定を行ってください：

Google Tag Managerの公式サイト（https://tagmanager.google.com/）にアクセスし、Googleアカウントでログインします。
「アカウントを作成」をクリックし、新しいアカウントを作成します。
- アカウント名：自社名や個人名など
- 国：日本
- 共有データの設定：適切なオプションを選択
アカウント作成後、コンテナを作成します。
- コンテナ名：Webサイトの名前など
- ターゲットプラットフォーム：Web
利用規約に同意すると、GTMコンテナのIDが発行されます。このIDは通常「GTM-XXXXXXX」の形式です。
GTMから提供される設置用のJavaScriptコードは使用しません。代わりに、next/third-partiesライブラリを使用して実装します。

これで、Google Tag Managerの基本的な設定が完了しました。次のステップでは、このGTMコンテナIDを使用して、Next.jsアプリケーションにGoogle Tag Managerを実装していきます。

ScriptLoader コンポーネントの使用

next/third-partiesライブラリは、Google Tag Managerを簡単に実装するためのScriptLoaderコンポーネントを提供しています。このコンポーネントを使用することで、GTMスクリプトを最適化された方法でロードできます。

ScriptLoaderコンポーネントの基本的な使用方法は以下の通りです：

tsx

import { GoogleTagManager } from '@next/third-parties/google'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <GoogleTagManager gtmId="GTM-XXXXXXX" />
      </body>
    </html>
  )
}

このコードでは、GTM-XXXXXXXの部分を実際のGoogle Tag Manager IDに置き換える必要があります。

GoogleTagManagerコンポーネントのオプション

gtmId（必須）：GTMコンテナID。通常「GTM-」で始まります。
dataLayer（オプション）：コンテナの初期化に使用するデータレイヤー配列。デフォルトは空の配列です。
dataLayerName（オプション）：データレイヤーの名前。デフォルトは「dataLayer」です。
auth（オプション）：環境スニペットの認証パラメータ（gtm_auth）の値。
preview（オプション）：環境スニペットのプレビューパラメータ（gtm_preview）の値。

環境変数の設定

セキュリティとコードの柔軟性を高めるために、Google Tag Manager IDを環境変数として設定することをおすすめします。以下の手順で設定できます：

プロジェクトのルートディレクトリに.env.localファイルを作成します（まだ存在しない場合）。
.env.localファイルに以下の行を追加します：

env

NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX

.gitignoreファイルに.env.localが含まれていることを確認し、センシティブな情報がGitリポジトリにコミットされないようにします。
コード内で環境変数を使用するように修正します：

tsx

<GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID} />

この方法を使用することで、開発環境と本番環境で異なるGTM IDを使用したり、セキュリティを向上させたりすることができます。

App Routerでの実装

layout.tsxでの設定

App Routerを使用する場合、Google Tag Managerの設定は通常app/layout.tsxファイルで行います。これにより、すべてのページで一貫してGTMが利用可能になります。

app/layout.tsxファイルを以下のように修正します：

tsx

import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID} />
      <body>
        {children}
      </body>
    </html>
  )
}

この設定により、アプリケーション全体でGoogle Tag Managerが利用可能になります。

ページコンポーネントでのイベント送信

Next.jsの@next/third-partiesライブラリは、Google Tag Managerを通じてイベントを送信するためのsendGTMEvent関数を提供しています。この関数を使用することで、ユーザーのインタラクションを簡単に追跡できます。

以下は、ボタンクリック時にイベントを送信する例です：

tsx

'use client'

import { sendGTMEvent } from '@next/third-parties/google'

export default function ExamplePage() {
  const handleButtonClick = () => {
    sendGTMEvent({
      event: 'buttonClicked',
      value: 'exampleButton'
    })
  }

  return (
    <div>
      <h1>Example Page</h1>
      <button onClick={handleButtonClick}>Click me!</button>
    </div>
  )
}