Next.js: Google Tag Manager

junju

https://nextjs.org/docs/basic-features/script#beforeinteractive のサンプルを誤認して、_document.jsに書いても動かない…

https://t28.dev/next-js-with-ga4/

junju

next/router で routing の変化を監視して pageview を送信していないこと。

next/router を_app.jsで読み込むと_app.jsが肥大化するような気がしていたし、そもそも送らなくてもGTM->GA動いてたので、同意するところ…

junju

クライアントサイドで動くのだから環境変数は公開しておく必要があるような気がして公開してるけど検証はしてない。

_app.js こんな感じ？

import Script from 'next/script'
import '@styles/globals.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  //return <Component {...pageProps} />
  const getLayout = Component.getLayout || ((page) => page)
  const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID
  return getLayout(
    <>
      <Script
        id="gtag"
        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}');
  `,
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

junju

NEXT_PUBLICでなくても動く気もする。
.env回りも学習せななあ…

junju

dotenvの場合は、ビルド時に参照できる
NEXT_PUBLICの場合は、再起動で反映できそう?