超簡単にGoogle Tag ManagerをNext.jsで読み込ませる方法！クリックイベントも簡単

2024/01/21

Google Tag ManagerをタグをどうやってNext.jsで読み込めせようか調べていたところ、
Next.js公式で`@next/third-parties`というライブラリを提供していたので、
その使い方を紹介しようと思います。

@next/third-partiesは、Next.jsアプリケーションで一般的なサードパーティライブラリの読み込みパフォーマンスと開発者エクスペリエンスを向上させるためのコンポーネントとユーティリティのコレクションを提供するライブラリです。

@next/third-partiesが提供するすべてのサードパーティの統合は、パフォーマンスと利便性の向上のために最適化されています。

インストール

はじめるには、@next/third-partiesライブラリをインストールします。

npm install @next/third-parties@latest next@latest

@next/third-partiesは現在実験的なライブラリであり、積極的に開発が進行中です。より多くのサードパーティの統合を追加する作業中ですので、最新またはキャナリーフラグを使用してインストールすることをお勧めします。

Google Tag Managerコンポーネント

GoogleTagManagerコンポーネントは、Google Tag Managerコンテナをページにインスタンス化するために使用できます。デフォルトでは、ページ上でハイドレーションが行われた後にオリジナルのインラインスクリプトを取得します。

すべてのルートでGoogle Tag Managerを読み込むには、ルートのレイアウトに直接コンポーネントを含め、GTMコンテナIDを渡します。

// app/layout.tsx

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  )
}

単一のルートでGoogle Tag Managerを読み込むには、ページファイルにコンポーネントを含めます。

// app/page.js

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />
}

イベントの送信

sendGTMEvent関数を使用して、dataLayerオブジェクトを使用してページ上のユーザーの対話をトラッキングすることができます。この機能を使用するには、<GoogleTagManager />コンポーネントが親レイアウト、ページ、またはコンポーネントのいずれかに含まれているか、または同じファイルに直接含まれている必要があります。

// app/page.js

'use client'
 
import { sendGTMEvent } from '@next/third-parties/google'
 
export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        イベントを送信
      </button>
    </div>
  )
}

関数に渡すことができる異なる変数やイベントについての詳細については、Tag Managerの開発者ドキュメントを参照してください。

オプション

Google Tag Managerに渡すオプションのリストについては、Google Tag Managerのドキュメントを参照してください。

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