Next.jsでGoogle Analytics 4(GA4)を導入する

に投稿

に更新


Google Analytics 4 についてはGoogle のヘルプセンターに詳しく書いてあるので、気になる方は見てみてください

_document.jsx

スクリプトの読み込みは、一度だけ実行されるDocumentに書けばいい

できればdangerouslySetInnerHTMLは使いたくはなかったのだが、何故か動作しなかったのでこうなった

import Document, { Html, Head, Main, NextScript } from 'next/document'
export default class extends Document {
render() {
return (
<Html>
<Head>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '追跡ID');`,
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument

_app.jsx

ページが切り替わったときの処理

import React from 'react'
import { useRouter } from 'next/router'
const App = ({ Component, pageProps }) => {
const router = useRouter()
React.useEffect(() => {
const handleRouteChange = url => {
gtag('config', process.env.GOOGLE_ANALYTICS_CLIENT_ID, {
page_path: url,
})
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => router.events.off('routeChangeComplete', handleRouteChange)
}, [router.events])
return <Component {...pageProps} />
}