技術
【ほぼコピペで実装】Next.jsにGoogle Analyticsを導入する方法
2021-10-18T12:30:57.177Z
Next.jsでGoogleAnalyticsを導入する方法が結構大変でしたので、ほぼコピペでGoogleAnalyticsを導入するためのブログを書いてみました。
.envファイルの作成と修正
まず、プロジェクトのルートに.envファイルを作成します。
作成したら、以下の内容を記述します。
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=googlaアナリティクスのID
googleアナリティクスのIDは以下の手順で取得できます。
- 設定→データストリーム→ウェブタグを選択して該当箇所をクリック
- 下記画像の
ここのID
に記載されているIDがgoogleアナリティクスのID
です。
gtag.jsの作成
libs/の直下にgtag.jsファイルを作成します。(libsディレクトリがない場合は、プロジェクトルートにlibsディレクトリを作成してください。)
export const GA_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || ''
export const existsGaId = GA_ID !== ''
export const pageview = (path) => {
window.gtag('config', GA_ID, {
page_path: path,
})
}
export const event = ({action, category, label, value = ''}) => {
if (!existsGaId) {
return
}
window.gtag('event', action, {
event_category: category,
event_label: JSON.stringify(label),
value,
})
}
GoogleAnalytics.jsの作成
components/の直下にGoogleAnalytics.jsを作成し、以下の内容を記述します。(componentsディレクトリがない場合は、プロジェクトルートにcomponentsディレクトリを作成してください。)
import Script from 'next/script'
import { existsGaId, GA_ID } from '../libs/gtag'
const GoogleAnalytics = () => (
<>
{existsGaId && (
<>
<Script defer src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} strategy="afterInteractive" />
<Script id="ga" defer strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_ID}');
`}
</Script>
</>
)}
</>
)
export default GoogleAnalytics
usePageView.jsの作成
hooks/の直下にusePageView.jsを作成し、以下の内容を記述します。(hooksディレクトリがない場合は、プロジェクトルートにhooksディレクトリを作成してください。)
import { useEffect } from 'react'
import { useRouter } from "next/router";
import { existsGaId, pageview } from '../libs/gtag'
export default function usePageView() {
const router = useRouter()
useEffect(() => {
if (!existsGaId) {
return
}
const handleRouteChange = (path) => {
pageview(path)
}
router.events.on('routeChangeComplete', handleRouteChange)
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
}
_app.jsの修正
pagesディレクトリの_app.jsがあると思いますので、以下//追加
と記載してある行を追加してください。
import React from 'react'
import usePageView from '../hooks/usePageView' // 追加
import GoogleAnalytics from '../components/GoogleAnalytics' // 追加
const App = ({ Component, pageProps }) => {
usePageView() // 追加
return (
<>
<GoogleAnalytics /> // 追加
<Component {...pageProps} />
</>
)
}
export default App
以上で、Next.jsでGoogleAnalyticsを使うための設定は完了となります。
あとはビルド&デプロイして実際にアクセスし、GoogleAnalyticsを確認してみましょう!
以上です!
亀山 直起
本業でFinTech企業のプロダクトマネージャ、副業でEdTech企業のフルスタックエンジニアをやっています。
趣味はWebサービス開発やお金の勉強にハマっています。最近「英単語通知」というアプリをリリースしました。
働き方、技術、金融のジャンルに興味があるので、それらに関することを書いていこうと思います。
趣味はWebサービス開発やお金の勉強にハマっています。最近「英単語通知」というアプリをリリースしました。
働き方、技術、金融のジャンルに興味があるので、それらに関することを書いていこうと思います。