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

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

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

はじめに

開始するには、@next/third-parties ライブラリをインストールします：

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を読み込むには、カスタム_appに直接コンポーネントを含め、GTMコンテナIDを渡します：

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleTagManager gtmId="GTM-XYZ" />
    </>
  )
}

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

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

イベントの送信

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

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のドキュメントをお読みください。

Google Analytics

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

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

すべてのルートでGoogle Analyticsを読み込むには、カスタム_appに直接コンポーネントを含め、測定IDを渡します：

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

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

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

イベントの送信

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

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>コンポーネントに渡すオプション。

Google Maps Embed

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

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のドキュメントをお読みください。

YouTube Embed

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

import { YouTubeEmbed } from '@next/third-parties/google'
 
export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}

オプション