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

@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 Analytics 4をページに含めるために使用できます。デフォルトでは、ページでハイドレーションが発生した後に元のスクリプトをフェッチします。

推奨事項：Googleタグマネージャーがアプリケーションにすでに含まれている場合は、Googleアナリティクスを個別のコンポーネントとして含めるのではなく、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" />
}

オプション