GTMをNext.jsに埋め込む方法

react-gtmなどパッケージで済ませる方法もあるが、今回はパッケージを使用しないTips

_document.jsはすべてのページのラッパーになっているため、_document.jsに貼り付ける。
ただし、通常のようにScriptタグをただただ貼り付けるとエラーがでるのでdangerouslySetInnerHTML を使用する。
以下、<noscript>タグも同様。

<Head>
  <script 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-*****');`,
  }}>
  </script>
  ...
</Head>

参照

関連記事