HarioNote

<p>表題の通りです。Next.jsのプロジェクトにGoogle Tag Managerを導入する際に、公式のexampleがあるのですがそれを見ながらやっても若干苦戦したのでその備忘録です。</p>
<p>公式example：<a href="https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib">https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib</a></p>
<h2>要点</h2>
<p>今回扱うファイル</p>
<ul>
<li>.env.sample(.env.local)</li>
<li>pages/_document.tsx<br>
本記事内の表記について</li>
<li>GTM：Google Tag Managerのことです</li>
</ul>
<h2>実装</h2>
<h3>envファイルにGTMのIDを追加</h3>
<p>「.envファイル」(.env.sample, .env.local等)にGTMのIDを記述しておきます。</p>
<pre><code>...

GTM_ID=XXX-XXXXXX

...
</code></pre>
<p>＜補足＞<br>
　タグマネージャーのIDは下図の部分に記載されているものです。</p>
<p><img src="https://storage.googleapis.com/newt-files/7291b0eb-f12e-47c9-8c3a-58f858066649%2Fimage-58566.png" alt="image-58566.png"></p>
<h2>_document.tsxにGTM導入のための記述追加</h2>
<p>「/pages/_document.tsx」にGTMを導入するための記述を追加します。</p>
<pre><code>import { Html, Head, Main, NextScript } from &quot;next/document&quot;

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

export default function Document() {
  return (
    &lt;Html&gt;
      &lt;Head&gt;
/* ↓追記箇所---------------------------------------------- */
          {GTM_ID &amp;&amp; (
            &lt;Script
              id=&quot;gtag-base&quot;
              strategy=&quot;afterInteractive&quot;
              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'?'&amp;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}');
                    `,
              }}
            /&gt;
          )}
/* ↑追記箇所---------------------------------------------- */
      &lt;/Head&gt;
      &lt;body&gt;
/* ↓追記箇所---------------------------------------------- */
          &lt;noscript&gt;
            &lt;iframe
              title=&quot;Tag Manager&quot;
              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
              height=&quot;0&quot;
              width=&quot;0&quot;
              style={{ display: &quot;none&quot;, visibility: &quot;hidden&quot; }}
            /&gt;
          &lt;/noscript&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
/* ↑追記箇所---------------------------------------------- */
      &lt;/body&gt;
    &lt;/Html&gt;
  )
}
</code></pre>
<p>追加する記述内容は以上です。</p>
<h2>動作確認</h2>
<p>Next.jsを立ち上げて、Chromeなどブラウザの開発ツールで確認してみます。<br>
　「Network」の欄をみるとちゃんと200が返ってきているようです。<br>
<img src="https://storage.googleapis.com/newt-files/ea58df0a-e08f-4093-a3a2-7a335995e8d0%2Fimage-685748.png" alt="image-685748.png"></p>
<p>ちなみにですが、タグマネージャーのプレビュー機能は、localhostで実行している場合でも行えるのでそちらで確認もしてみるといいかもしれません。</p>
<h2>Advanced</h2>
<p>よりよいコードや設計にするためのAdvancedな項目を挙げてみました。</p>
<ul>
<li>「GTM_ID」を「_document.tsx」の外で(別ファイルで)定義
<ul>
<li>環境変数を引っ張ってくる「process.env.XXX」の記述を都度書かせるような設計をしない。（ケアレスミスの温床になりやすい）</li>
<li>使用する環境変数が多い場合、その方がプロジェクト全体がクリーンになる。（と思ってる）</li>
<li>定義ファイルで定義する際についでにZodとかで型安全化するのもあり</li>
</ul>
</li>
<li>「_document.tsx」に記述した、&lt;Script …/&gt;の「dangerouslySetInnerHTML」に渡している内容は別ファイルで定義しておいた方が_document.tsxの全体の見通しがよくなるかも</li>
</ul>
<p>以上です。</p>


#GoogleTagManager

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