きっかけ
業務で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">
参考サイト