概要
Next.jsのThird Party Librariesを使えば、簡単にGoogle Analyticsを導入できます。
@next/third-partiesをインストール
Terminal
pnpm add @next/third-parties
環境変数を追加
.env
GA_ID=G-XXXXXXXXXX
app/layout.tsxにコンポーネントを配置
app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'
const isProduction = process.env.NODE_ENV === 'production'
const gaId = process.env.GA_ID!
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>{children}</body>
{isProduction && <GoogleAnalytics gaId={gaId} />}
</html>
)
}
GoogleTagManager を使用する場合
環境変数と app/layout.tsxを以下のように変更する。
.env
GTM_ID=G-XXXXXXXXXX
app/layout.tsx
import { GoogleTagManager } from '@next/third-parties/google'
const isProduction = process.env.NODE_ENV === 'production'
const gtmId = process.env.GTM_ID!
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>{children}</body>
{isProduction && <GoogleTagManager gtmId={gtmId} />}
</html>
)
}
Google Analyticsの測定 ID(gaId)の確認方法
- サイドメニューの「管理」(上記画像)
- データの収集と修正
- データストリーム
- 対象の「ウェブ ストリームの詳細」を開く
- 測定 IDの値
G-XXXXXXXXXX
おまけ その1: Youtubeの埋め込み
Third Party LibrariesにはYoutubeの埋め込みのライブラリもあります。params を文字列で連結して渡さなくてはいけないのでオブジェクトで渡して使える以下のようなラッパーコンポーネントを作ると良いです。
youtube.tsx
import { YouTubeEmbed } from '@next/third-parties/google'
export type YoutubeProps = {
videoid: string
params?: { [key: string]: string | number | undefined }
height?: number
width?: number
playlabel?: string
style?: string
}
export default async function Youtube({ params, ...props }: YoutubeProps) {
const paramsString = params
? Object.entries(params)
.filter(([_, value]) => value !== undefined)
.map(
([key, value]) =>
`${encodeURIComponent(key)}=${encodeURIComponent(value as string | number)}`
)
.join('&')
: undefined
return <YouTubeEmbed {...props} params={paramsString} />
}
使い方
import { YouTube } from './youtube'
<Youtube videoid="l9IDSs2ASXs" params={ start: 55 } />
こうすると、55秒から開始する動画を埋め込むことができます。
Youtubeの埋め込み例
おまけ その2: 現在は同意モードの利用はできない
Google Analyticsには同意に関するユーザーの選択に基づいて動作を調整する同意モードという機能があります。
Third Party Librariesを使用してGoogleAnalyticsを導入した場合、現時点では同意モードの利用はできません。
次の記事のように独自に実装する必要があります。
Next.js に GA4 + Cookie 同意バナーを埋め込む - Qiita
はじめにGA4 を利用するため、Cookie Consent Banner を自前で埋め込んだ。本来？、Cookie を利用する場合、自前での対応はほぼ不可能であるため、Consent Manag…
qiita.com
