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

`@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`オブジェクトを使用してイベントを送信することで、ページのユーザーインタラクションを追跡するために使用できます。この関数が機能するには、``コンポーネントが親レイアウト、ページ、コンポーネントのいずれか、または同じファイルに直接含まれている必要があります。

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タグマネージャーに渡すオプション。オプションの全リストについては、Googleタグマネージャーのドキュメントを参照してください。

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

Googleアナリティクス

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

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

すべてのルートでGoogleアナリティクスをロードするには、ルートレイアウトにコンポーネントを直接含め、測定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アナリティクスをロードするには、ページファイルにコンポーネントを含めます。

app/page.js

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

イベントの送信

`sendGAEvent`関数は、`dataLayer`オブジェクトを使用してイベントを送信することで、ページのユーザーインタラクションを測定するために使用できます。この関数が機能するには、``コンポーネントが親レイアウト、ページ、コンポーネントのいずれか、または同じファイルに直接含まれている必要があります。

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

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

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

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

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

オプション

``コンポーネントに渡すオプション。

名前	型	説明
`gaId`	必須	あなたの測定ID。通常、`G-`で始まります。
`dataLayerName`	オプション	データレイヤーの名前。デフォルトは`dataLayer`です。
`nonce`	オプション	A 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`	オプション	ビデオコンテナにスタイルを適用するために使用されます。