きっかけ

業務でNext.jsを使用しており、GTM（Googleタグマネージャー）を設定するのに時間がかかったので忘備録として残します。同じ境遇の方の参考になれば幸いです。

環境

Next.js v13
page routerを使用

実装手順

1, Googleタグマネージャーにログインし、コンテナIDを取得してください
2, .envファイルにNEXT_PUBLIC_GTM_ID(今回説明に使用するのはこちらの変数名とします)としてコンテナIDを追加してください
3, _app.tsxと_document.tsxで変数に入れて宣言してください

const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID || '';

4, _app.tsxにScriptタグ部分の記述を加えてください

_app.tsx

      <Head>
        <title>Site Title</title>
        <meta name="description" content="" />
        <link rel="icon" href="/favicon.png" />
      </Head>
      <Script id="gtm" strategy="beforeInteractive">
        {`
          (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}');
        `}
      </Script>

5, _document.tsxにnoscriptタグ部分の記述を加えてください

_document.tsx

        <body>
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${GTM_ID}" height="0" width="0" style="display: none; visibility: hidden;" />`,
            }}
          />
          <Main />
          <NextScript />
        </body>

6, ローカルで立ち上げ、検証ツールを開きgtmの入ったnoscriptがbodyタグの下に、scriptがheadタグの中にあることを確認してください

詰まったこと

`script`が`<head>`内に設置されない

結論から述べると、beforeInteractive以外を使用する場合、scriptは意図的に <head>の外に配置されてしまうためです。
現状Next.jsの設計上そういうものみたいなので、<head>内にscriptを配置したいのであれば、strategyにbeforeInteractiveを指定してください

<Script id="gtm" strategy="beforeInteractive">

参考サイト