GAをscriptタグでhtmlに埋め込みたいがNext.jsだとそれが難しい。
Next.js/Reactの場合scriptタグをhtmlのように埋め込むことができないです。
公式にやり方書いてあるがなぜか検索ヒットしないのでこちらで書いてみようと思います。
公式はこちら↓
https://nextjs.org/docs/messages/next-script-for-ga
目次
gtag.jsを設定する
_app.tsxなどルートになるコンポーネントに設定するのが良いと思います。
_app.tsxはpages直下に以下のようなミニマムな実装をしてあげましょう。
import React from 'react'
export default function MyApp({ Component, pageProps }) {
return (
<Component {...pageProps} />
)
}以下のようにnext/scriptを使ってgtag.jsを読み込むようにします。GA_MEASUREMENT_IDはそれぞれでGoogle Analytics上で取得したIDを設定します。
import React from 'react'
import Script from 'next/script'
export default function MyApp({ Component, pageProps }) {
return (
<>
<Script
src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
`}
</Script>
<Component {...pageProps} />
</>
)
}開発時と切り分けたい場合
開発時とデプロイ時とGA切り分けたい場合あると思います。
その場合はこんな感じでprocess.envなど環境変数で切り分けるしかなさそうです。
import React from 'react'
import Script from 'next/script'
export default function MyApp({ Component, pageProps }) {
const id = process.env.mode === "debug" ? <デバッグ用ID> : <商用ID>
return (
<>
<Script
src=`https://www.googletagmanager.com/gtag/js?id={id}`
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${id}');
`}
</Script>
<Component {...pageProps} />
</>
)
}そのほか、Next.jsでOGPパラメータの設定やサイトマップの設定方法をまとめています。よかったら見てみてください！