コンテンツまでスキップ
  • 検索フィールドが空なので、候補はありません。

GTM（Google Tag Manager）のタグを埋め込む方法は？

→ フロントエンド側でGTMタグを読み込む必要があります。

microCMSはヘッドレスCMSのため、CMSからGTMタグの配信はできません。GTMのタグはフロントエンド（Next.jsなど）側に設置します。

本ページでは、一例としてNext.jsのApp RouterでGTMタグを埋め込む方法をご案内します。

詳細はNext.jsの公式ドキュメントをご参照ください。

https://nextjs.org/docs/app/guides/third-party-libraries#google-tag-manager

GTM側のコンテナID発行

1. Google Tag Managerでコンテナを作成 

2. GTM-XXXXXXXの形式のコンテナIDを控える 

Next.js（App Router）での埋め込み

GTMタグの埋め込みには、Next.jsが推奨するサードパーティ読み込み用ライブラリの@next/third-partiesを使用します。

パッケージを追加

プロジェクトに@next/third-partiesを追加します。

npm install @next/third-parties@latest

コンポーネントで読み込み

Next.jsのコンポーネント内でライブラリを利用し、GTMタグを読み込みます。

すべてのページで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="GTM-XXXXXXX" />
      <body>{children}</body>
    </html>
  )
}