😎

Next.jsのThird Party Librariesを使ってGoogle Analyticsを導入する

公開日
5か月前
2024-01-08
更新日
6日前
2024-06-09
更新履歴

概要

Next.jsのThird Party Librariesを使えば、簡単にGoogle Analyticsを導入できます。

@next/third-partiesをインストール

Terminal
pnpm add @next/third-parties

環境変数を追加

.env
GTM_ID=G-XXXXXXXXXX

app/layout.tsxにコンポーネントを配置

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="en">
      <body>{children}</body>
      {isProduction && <GoogleTagManager gtmId={gtmId} />}
    </html>
  )
}

Google Analyticsの測定 ID(gtmId)の確認方法

サイドメニューの「管理」

  1. サイドメニューの「管理」(上記画像)
  2. データの収集と修正
  3. データストリーム
  4. 対象の「ウェブ ストリームの詳細」を開く

おまけ: Youtubeの埋め込み

Third Party LibrariesにはYoutubeの埋め込みのライブラリもあります。params を文字列で連結して渡さなくてはいけないのでオブジェクトで渡して使える以下のようなラッパーコンポーネントを作ると良いです。

youtube.tsx
import { YouTubeEmbed } from '@next/third-parties/google'

export interface YoutubeProps {
  videoId: string
  params?: { [key: string]: string | number | undefined }
}

export default async function Youtube({ videoId, params }: 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 videoid={videoId} params={paramsString} />
}
使い方
import { YouTube } from './youtube'

<Youtube videoId="l9IDSs2ASXs" params={ start: 55 } />

こうすると、55秒から開始する動画を埋め込むことができます。

埋め込み例

GoogleTagManager では計測がうまくいかない場合

なぜか上記の GoogleTagManager を使用したコードでは Google Analytics のリアルタイムレポートが反映されなくなりました。GAのCookie自体が保存されていなかったです。

@next/third-parties を v14.2.3 以上にアップデートして、GoogleTagManager の代わりに GoogleAnalytics を使うと上手くいきました。以下のコードを参考にしてください。

タグマネージャーの設定によるのかもしれないですがとりあえずはこれでなんとかなりました。

app/layout.tsx
import { GoogleAnalytics } 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="en">
      <body>{children}</body>
      {isProduction && <GoogleAnalytics gaId={GTM_ID} />}
    </html>
  )
}