HarioNote

【React/TypeScript】Next.jsプロジェクトにGoogle Tag Managerを導入する【GTM】

【React/TypeScript】Next.jsプロジェクトにGoogle Tag Managerを導入する【GTM】

表題の通りです。Next.jsのプロジェクトにGoogle Tag Managerを導入する際に、公式のexampleがあるのですがそれを見ながらやっても若干苦戦したのでその備忘録です。

公式example：https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib

要点

今回扱うファイル

  • .env.sample(.env.local)
  • pages/_document.tsx
    本記事内の表記について
  • GTM：Google Tag Managerのことです

実装

envファイルにGTMのIDを追加

「.envファイル」(.env.sample, .env.local等)にGTMのIDを記述しておきます。

...

GTM_ID=XXX-XXXXXX

...

＜補足＞
　タグマネージャーのIDは下図の部分に記載されているものです。

image-58566.png

_document.tsxにGTM導入のための記述追加

「/pages/_document.tsx」にGTMを導入するための記述を追加します。

import { Html, Head, Main, NextScript } from "next/document"

/* ↓追記箇所 */
const GTM_ID = process.env.GTM_ID;

export default function Document() {
  return (
    <Html>
      <Head>
/* ↓追記箇所---------------------------------------------- */
          {GTM_ID && (
            <Script
              id="gtag-base"
              strategy="afterInteractive"
              dangerouslySetInnerHTML={{
                __html: `
                      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                      })(window,document,'script','dataLayer', '${GTM_ID}');
                    `,
              }}
            />
          )}
/* ↑追記箇所---------------------------------------------- */
      </Head>
      <body>
/* ↓追記箇所---------------------------------------------- */
          <noscript>
            <iframe
              title="Tag Manager"
              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
              height="0"
              width="0"
              style={{ display: "none", visibility: "hidden" }}
            />
          </noscript>
          <Main />
          <NextScript />
/* ↑追記箇所---------------------------------------------- */
      </body>
    </Html>
  )
}

追加する記述内容は以上です。

動作確認

Next.jsを立ち上げて、Chromeなどブラウザの開発ツールで確認してみます。
　「Network」の欄をみるとちゃんと200が返ってきているようです。
image-685748.png

ちなみにですが、タグマネージャーのプレビュー機能は、localhostで実行している場合でも行えるのでそちらで確認もしてみるといいかもしれません。

Advanced

よりよいコードや設計にするためのAdvancedな項目を挙げてみました。

  • 「GTM_ID」を「_document.tsx」の外で(別ファイルで)定義
    • 環境変数を引っ張ってくる「process.env.XXX」の記述を都度書かせるような設計をしない。（ケアレスミスの温床になりやすい）
    • 使用する環境変数が多い場合、その方がプロジェクト全体がクリーンになる。（と思ってる）
    • 定義ファイルで定義する際についでにZodとかで型安全化するのもあり
  • 「_document.tsx」に記述した、<Script …/>の「dangerouslySetInnerHTML」に渡している内容は別ファイルで定義しておいた方が_document.tsxの全体の見通しがよくなるかも

以上です。

Share this post