Next.jsのThird Party Librariesを使えば、簡単にGoogle Analyticsを導入できます。
pnpm add @next/third-parties
GA_ID=G-XXXXXXXXXX
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
を以下のように変更する。
GTM_ID=G-XXXXXXXXXX
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>
)
}
G-XXXXXXXXXX
Third Party LibrariesにはYoutubeの埋め込みのライブラリもあります。params
を文字列で連結して渡さなくてはいけないのでオブジェクトで渡して使える以下のようなラッパーコンポーネントを作ると良いです。
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秒から開始する動画を埋め込むことができます。
Google Analyticsには同意に関するユーザーの選択に基づいて動作を調整する同意モードという機能があります。
Third Party Librariesを使用してGoogleAnalyticsを導入した場合、現時点では同意モードの利用はできません。
次の記事のように独自に実装する必要があります。