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

@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を渡します：

app/layout.tsx

TypeScript

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>
  )
}

単一のルートで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の開発者ドキュメントを参照してください。

サーバーサイドタグ付け

サーバーサイドのタグマネージャーを使用していて、タグサーバーからgtm.jsスクリプトを提供している場合は、スクリプトのURLを指定するためにgtmScriptUrlオプションを使用できます。

オプション

Google Tag Managerに渡すオプション。オプションの完全なリストについては、Google Tag Managerのドキュメントをお読みください。

名前	型	説明
`gtmId`	必須	GTMコンテナID。通常は`GTM-`から始まります。
`gtmScriptUrl`	オプション	GTMスクリプトURL。デフォルトは`https://www.googletagmanager.com/gtm.js`。
`dataLayer`	オプション	コンテナをインスタンス化するデータレイヤーオブジェクト。
`dataLayerName`	オプション	データレイヤーの名前。デフォルトは`dataLayer`。
`auth`	オプション	環境スニペット用の認証パラメーター（`gtm_auth`）の値。
`preview`	オプション	環境スニペット用のプレビューパラメーター（`gtm_preview`）の値。

Google Analytics

GoogleAnalyticsコンポーネントは、Google タグ（gtag.js）を介してGoogle Analytics 4をページに含めるために使用できます。デフォルトでは、ページのハイドレーション後に元のスクリプトをフェッチします。

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

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

app/layout.tsx

TypeScript

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>
  )
}

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

app/page.js

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

sendGAEvent関数を使用して、dataLayerオブジェクトを使用してページ上のユーザーの操作を計測できます。この関数を機能させるには、<GoogleAnalytics />コンポーネントが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' })}
      >
        Send Event
      </button>
    </div>
  )
}

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

ページビューの追跡

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

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

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

オプション

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

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

Google Maps Embed

GoogleMapsEmbedコンポーネントを使用して、ページにGoogle Maps Embedを追加できます。デフォルトでは、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 Embedに渡すオプション。完全なオプションリストについては、Google Map Embedのドキュメントをお読みください。

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

YouTube Embed

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`	オプション	ビデオコンテナにスタイルを適用するために使用します。