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

@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 タグマネージャーをロードするには、ルートレイアウトにコンポーネントを直接含め、GTM コンテナ ID を渡します。

app/layout.tsx

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 タグマネージャーをロードするには、ページファイルにコンポーネントを含めます

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

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

サーバーサイドタグ付け

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

オプション

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

名前	型	説明
`gtmId`	必須	GTM コンテナ ID。通常は `GTM-` で始まります。
`gtmScriptUrl`	オプション	GTM スクリプト URL。デフォルトは `https://#/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 を別のコンポーネントとして含めるのではなく、それを使用して直接 Google Analytics を構成できます。Tag Manager と gtag.js の違いの詳細については、ドキュメントを参照してください。

すべてのルートで Google Analytics をロードするには、ルートレイアウトに直接コンポーネントを含め、測定 ID を渡します。

app/layout.tsx

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 /> コンポーネントが親レイアウト、ページ、またはコンポーネント、または同じファイルに直接含まれている必要があります。

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 マップの埋め込み

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

名前	型	説明
`apiKey`	必須	API キー。
`mode`	必須	マップモード
`height`	オプション	埋め込みの高さ。デフォルトは `auto` です。
`width`	オプション	埋め込みの幅。デフォルトは `auto` です。
`style`	オプション	iframe にスタイルを渡します。
`allowfullscreen`	オプション	特定のマップ部分を全画面表示できるようにするプロパティ。
`loading`	オプション	デフォルトは lazy です。埋め込みが折り返しより上にあることがわかっている場合は、変更を検討してください。
`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`	オプション	動画コンテナにスタイルを適用するために使用されます。