サードパーティライブラリ

@next/third-parties は、Next.jsアプリケーションで人気のあるサードパーティライブラリの読み込みパフォーマンスと開発者体験を向上させるコンポーネントとユーティリティのコレクションを提供するライブラリです。

@next/third-parties が提供するすべてのサードパーティ統合は、パフォーマンスと使いやすさのために最適化されています。

はじめに

まず、@next/third-parties ライブラリをインストールします:

Terminal

npm install @next/third-parties@latest next@latest

@next/third-parties は現在実験的なライブラリで、活発に開発中です。より多くのサードパーティ統合を追加する間は、latest または canary フラグを付けてインストールすることを推奨します。

Googleサードパーティ

Googleが提供するすべてのサードパーティライブラリは @next/third-parties/google からインポートできます。

Google Tag Manager

GoogleTagManager コンポーネントを使用すると、ページにGoogle Tag Managerコンテナをインスタンス化できます。デフォルトでは、ページのハイドレーション後に元のインラインスクリプトを取得します。

すべてのルートでGoogle Tag Managerを読み込むには、ルートレイアウトにコンポーネントを直接含め、GTMコンテナIDを渡します:

import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  )
}

import { GoogleTagManager } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  )
}

単一のルートでGoogle Tag Managerを読み込むには、ページファイルにコンポーネントを含めます:

app/page.js

import { GoogleTagManager } from '@next/third-parties/google'

export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />
}

イベント送信

sendGTMEvent関数を使用すると、dataLayerオブジェクトを使用してページ上のユーザー操作を追跡するイベントを送信できます。この関数を動作させるには、<GoogleTagManager />コンポーネントが親レイアウト、ページ、コンポーネント、または同じファイル内に含まれている必要があります。

app/page.js

'use client'

import { sendGTMEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        イベント送信
      </button>
    </div>
  )
}

この関数に渡すことができるさまざまな変数とイベントについては、Tag Managerの開発者ドキュメントを参照してください。

オプション

Google Tag Managerに渡すオプション。すべてのオプションのリストについては、Google Tag Managerドキュメントを参照してください。

名前	タイプ	説明
`gtmId`	必須	GTMコンテナID。通常`GTM-`で始まります。
`dataLayer`	オプション	コンテナをインスタンス化するデータレイヤー配列。デフォルトは空の配列です。
`dataLayerName`	オプション	データレイヤーの名前。デフォルトは`dataLayer`です。
`auth`	オプション	環境スニペットの認証パラメータ(`gtm_auth`)の値。
`preview`	オプション	環境スニペットのプレビューパラメータ(`gtm_preview`)の値。

Google Analytics

GoogleAnalyticsコンポーネントを使用すると、Googleタグ(gtag.js)を介してGoogle Analytics 4をページに含めることができます。デフォルトでは、ページのハイドレーション後に元のスクリプトを取得します。

推奨: アプリケーションにGoogle Tag Managerが既に含まれている場合は、別のコンポーネントとしてGoogle Analyticsを含めるのではなく、Google Tag Managerを使用して直接Google Analyticsを構成できます。Tag Managerとgtag.jsの違いについてはドキュメントを参照してください。

すべてのルートでGoogle Analyticsを読み込むには、ルートレイアウトにコンポーネントを直接含め、測定IDを渡します:

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

単一のルートでGoogle Analyticsを読み込むには、ページファイルにコンポーネントを含めます:

app/page.js

import { GoogleAnalytics } from '@next/third-parties/google'

export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

イベント送信

sendGAEvent関数を使用すると、dataLayerオブジェクトを使用してページ上のユーザー操作を測定するイベントを送信できます。この関数を動作させるには、<GoogleAnalytics />コンポーネントが親レイアウト、ページ、コンポーネント、または同じファイル内に含まれている必要があります。

app/page.js

'use client'

import { sendGAEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        イベント送信
      </button>
    </div>
  )
}

イベントパラメータの詳細については、Google Analyticsの開発者ドキュメントを参照してください。

ページビューの追跡

Google Analyticsは、ブラウザの履歴状態が変更されると自動的にページビューを追跡します。つまり、Next.jsルート間のクライアントサイドナビゲーションは、設定なしでページビューデータを送信します。

クライアントサイドナビゲーションが正しく測定されていることを確認するには、管理パネルで「拡張計測」プロパティが有効になっており、_「ブラウザ履歴イベントに基づくページ変更」_チェックボックスが選択されていることを確認してください。

注: 手動でページビューイベントを送信する場合は、デフォルトのページビュー測定を無効にして重複データを避けてください。詳細については、Google Analyticsの開発者ドキュメントを参照してください。

オプション

<GoogleAnalytics>コンポーネントに渡すオプション。

名前	タイプ	説明
`gaId`	必須	測定ID。通常`G-`で始まります。
`dataLayerName`	オプション	データレイヤーの名前。デフォルトは`dataLayer`です。

Google Maps埋め込み

GoogleMapsEmbedコンポーネントを使用すると、ページにGoogle Maps埋め込みを追加できます。デフォルトでは、loading属性を使用して、折りたたみ線より下の埋め込みを遅延読み込みします。

app/page.js

import { GoogleMapsEmbed } from '@next/third-parties/google'

export default function Page() {
  return (
    <GoogleMapsEmbed
      apiKey="XYZ"
      height={200}
      width="100%"
      mode="place"
      q="Brooklyn+Bridge,New+York,NY"
    />
  )
}

オプション

Google Maps埋め込みに渡すオプション。すべてのオプションのリストについては、Google Map Embedドキュメントを参照してください。

名前	タイプ	説明
`apiKey`	必須	APIキー。
`mode`	必須	マップモード
`height`	オプション	埋め込みの高さ。デフォルトは`auto`です。
`width`	オプション	埋め込みの幅。デフォルトは`auto`です。
`style`	オプション	iframeにスタイルを適用します。
`allowfullscreen`	オプション	特定のマップ部分をフルスクリーンにするプロパティ。
`loading`	オプション	デフォルトは遅延読み込み。埋め込みが折りたたみ線より上にあることがわかっている場合は変更を検討してください。
`q`	オプション	マップマーカーの位置を定義します。マップモードによっては必須になる場合があります。
`center`	オプション	マップビューの中心を定義します。
`zoom`	オプション	マップの初期ズームレベルを設定します。
`maptype`	オプション	読み込むマップタイルのタイプを定義します。
`language`	オプション	UI要素とマップタイル上のラベルの表示に使用する言語を定義します。
`region`	オプション	地理政治的な感度に基づいて表示する適切な境界線とラベルを定義します。

YouTube埋め込み

YouTubeEmbedコンポーネントを使用すると、YouTube埋め込みを読み込んで表示できます。このコンポーネントは、内部でlite-youtube-embedを使用することで高速に読み込まれます。

app/page.js

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

export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}

オプション

名前	タイプ	説明
`videoid`	必須	YouTube動画ID。
`width`	オプション	動画コンテナの幅。デフォルトは`auto`です。
`height`	オプション	動画コンテナの高さ。デフォルトは`auto`です。
`playlabel`	オプション	再生ボタンのアクセシビリティのための視覚的に隠されたラベル。
`params`	オプション	ここで定義されている動画プレーヤーのパラメータ。パラメータはクエリパラメータ文字列として渡されます。例: `params="controls=0&start=10&end=30"`
`style`	オプション	動画コンテナにスタイルを適用するために使用されます。

サードパーティライブラリ

On this page