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

サードパーティライブラリを最適化する方法

@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 を読み込むには、コンポーネントをルートレイアウトに直接含め、GTM コンテナ ID を渡します。

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 Tag Manager を読み込むには、ページファイルにコンポーネントを含めます。

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

イベントの送信

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

'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>
  )
}

Tag Manager の開発者ドキュメントを参照して、関数に渡すことができるさまざまな変数とイベントについて学習してください。

サーバーサイドのタグ付け

サーバーサイドのタグマネージャーを使用しており、タグ付けサーバーから 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 Tag Manager を使用して直接設定できます。Tag Manager と gtag.js の違いについては、ドキュメントを参照してください。

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

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 を読み込むには、ページファイルにコンポーネントを含めます。

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

イベントの送信

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

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

名前	タイプ	説明
`apiKey`	必須	API キー。
`mode`	必須	マップモード
`height`	オプション	埋め込みの高さ。デフォルトは `auto` です。
`width`	オプション	埋め込みの幅。デフォルトは `auto` です。
`style`	オプション	iframe にスタイルを適用します。
`allowfullscreen`	オプション	一部のマップ部品をフルスクリーン表示できるようにするプロパティ。
`loading`	オプション	デフォルトは lazy です。埋め込みが折り畳み部分より上になることがわかっている場合は、変更を検討してください。
`q`	オプション	マップマーカーの位置を定義します。マップモードによっては必須になる場合があります。
`center`	オプション	マップビューの中心を定義します。
`zoom`	オプション	マップの初期ズームレベルを設定します。
`maptype`	オプション	読み込むマップタイルの種類を定義します。
`language`	オプション	UI 要素およびマップタイル上のラベルの表示に使用する言語を定義します。
`region`	オプション	地政学的な感度に基づいて、適切な境界線とラベルを表示します。

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

オプション

名前	タイプ	説明
`videoid`	必須	YouTube 動画 ID。
`width`	オプション	動画コンテナの幅。デフォルトは `auto`
`height`	オプション	動画コンテナの高さ。デフォルトは `auto`
`playlabel`	オプション	アクセシビリティのための、視覚的に隠された再生ボタンのラベル。
`params`	オプション	ここで定義されている動画プレーヤーのパラメータ。パラメータはクエリパラメータ文字列として渡されます。例: `params="controls=0&start=10&end=30"`
`style`	オプション	動画コンテナにスタイルを適用するために使用されます。