サードパーティライブラリの最適化方法

@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 関数を使用して、ページ上のユーザーインタラクションを追跡できます。この関数を使用するには、<GoogleTagManager /> コンポーネントが親レイアウト、ページ、コンポーネント、または同じファイル内に含まれている必要があります。

import { sendGTMEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        イベントを送信
      </button>
    </div>
  )
}

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

サーバーサイドタグ付け

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

オプション

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

Googleアナリティクス

GoogleAnalytics コンポーネントを使用して、Googleタグ（gtag.js）経由でGoogleアナリティクス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 関数を使用して、ページ上のユーザーインタラクションを測定できます。この関数を使用するには、<GoogleAnalytics /> コンポーネントが親レイアウト、ページ、コンポーネント、または同じファイル内に含まれている必要があります。

import { sendGAEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent('event', 'buttonClicked', { value: 'xyz' })}
      >
        イベントを送信
      </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" />
}

オプション