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

@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タグマネージャー

GoogleTagManager コンポーネントは、ページにGoogleタグマネージャーコンテナをインスタンス化するために使用できます。デフォルトでは、ページのハイドレーション後に元のインラインスクリプトをフェッチします。

すべてのルートにGoogleタグマネージャーを読み込むには、カスタム_appに直接コンポーネントを含め、GTMコンテナIDを渡します。

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

単一のルートにGoogleタグマネージャーを読み込むには、ページファイルにコンポーネントを含めます。

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' })}
      >
        Send Event
      </button>
    </div>
  )
}

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

サーバーサイドタグ付け

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

オプション

Googleタグマネージャーに渡すオプション。オプションの完全なリストについては、Googleタグマネージャーのドキュメントを参照してください。

Googleアナリティクス

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

推奨: Googleタグマネージャーがアプリケーションにすでに含まれている場合、Googleアナリティクスを別のコンポーネントとして含めるのではなく、それを使用して直接設定できます。タグマネージャーとgtag.jsの違いについては、ドキュメントを参照してください。

すべてのルートにGoogleアナリティクスを読み込むには、カスタム_appに直接コンポーネントを含め、測定IDを渡します。

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

単一のルートにGoogleアナリティクスを読み込むには、ページファイルにコンポーネントを含めます。

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

イベントの送信

sendGAEvent 関数は、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アナリティクスの開発者ドキュメントを参照してください。

ページビューのトラッキング

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

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

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

オプション

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

Googleマップ埋め込み

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

YouTube埋め込み

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" />
}

オプション