目次
はじめに
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プロジェクトの作成方法を説明します。
- 新しいプロジェクトを作成するディレクトリに移動し、以下のコマンドを実行します：
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
- プロジェクトが作成されたら、ディレクトリに移動します：
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コンポーネントの基本的な使用方法は以下の通りです：
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ファイルに以下の行を追加します：
NEXT_PUBLIC_GTM_ID=GTM-XXXXXXX.gitignoreファイルに.env.localが含まれていることを確認し、センシティブな情報がGitリポジトリにコミットされないようにします。- コード内で環境変数を使用するように修正します：
<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ファイルを以下のように修正します：
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関数を提供しています。この関数を使用することで、ユーザーのインタラクションを簡単に追跡できます。
以下は、ボタンクリック時にイベントを送信する例です：
'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>
)
}この例では、sendGTMEvent関数を使用してイベントを送信しています。重要なポイントは以下の通りです：
'use client'ディレクティブを使用して、このコンポーネントがクライアントサイドでレンダリングされることを明示しています。sendGTMEvent関数は@next/third-parties/googleからインポートします。- この関数を使用するには、親のレイアウト、ページ、またはコンポーネントで
<GoogleTagManager />コンポーネントが含まれている必要があります。 - イベントのパラメータは、Google Tag Managerの設定に応じてカスタマイズできます。
まとめ
本記事では、Next.jsのApp Routerを使用したプロジェクトに、next/third-partiesライブラリを活用してGoogle Tag Managerを導入する方法を解説しました。
これらの手順に従うことで、Next.jsアプリケーションに効率的にGoogle Tag Managerを実装し、ウェブサイトのアナリティクスやマーケティング施策の効果測定を行うことができます。
Google Tag Managerの導入は、ウェブサイトのパフォーマンス分析や改善の第一歩です。この記事で学んだ知識を活かし、より効果的なウェブサイト運営を行ってください。
また、Google Tag Managerの機能は頻繁に更新されるため、常に最新の情報をチェックし、必要に応じて実装方法を更新することをおすすめします。
DeLT WebInsider編集部