# Next.jsのThird Party Librariesを使ってGoogle Analyticsを導入する
## 概要
Next.jsの[Third Party Libraries](https://nextjs.org/docs/app/building-your-application/optimizing/third-party-libraries)を使えば、簡単にGoogle Analyticsを導入できます。
## @next/third-partiesをインストール
```sh:Terminal
pnpm add @next/third-parties
```
## 環境変数を追加
```sh:.env
GA_ID=G-XXXXXXXXXX
```
## app/layout.tsxにコンポーネントを配置
```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 (
{children}
{isProduction && }
)
}
```
## `GoogleTagManager` を使用する場合
環境変数と `app/layout.tsx`を以下のように変更する。
```sh:.env
GTM_ID=G-XXXXXXXXXX
```
```tsx:app/layout.tsx
import { GoogleTagManager } from '@next/third-parties/google' // [!code highlight]
const isProduction = process.env.NODE_ENV === 'production'
const gtmId = process.env.GTM_ID! // [!code highlight]
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
{isProduction && } /* [!code highlight] */
)
}
```
## Google Analyticsの測定 ID(gaId)の確認方法
1. サイドメニューの「管理」(上記画像)
2. データの収集と修正
3. データストリーム
4. 対象の「ウェブ ストリームの詳細」を開く
5. 測定 IDの値 `G-XXXXXXXXXX`
## おまけ その1: Youtubeの埋め込み
Third Party LibrariesにはYoutubeの埋め込みのライブラリもあります。`params` を文字列で連結して渡さなくてはいけないのでオブジェクトで渡して使える以下のようなラッパーコンポーネントを作ると良いです。
```tsx: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
}
```
```tsx:使い方
import { YouTube } from './youtube'
```
こうすると、55秒から開始する動画を埋め込むことができます。
### Youtubeの埋め込み例
::youtube[https://youtu.be/l9IDSs2ASXs?si=2tLxm3_8Xs9teVD1&t=55]
## おまけ その2: 現在は同意モードの利用はできない
Google Analyticsには同意に関するユーザーの選択に基づいて動作を調整する[同意モード](https://developers.google.com/tag-platform/security/concepts/consent-mode)という機能があります。
Third Party Librariesを使用してGoogleAnalyticsを導入した場合、現時点では同意モードの利用はできません。
次の記事のように独自に実装する必要があります。
::link-card[https://qiita.com/kurab/items/7f1e9d0c2f7d5d67ec07]