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

@next/third-parties は、Next.js アプリケーションで一般的なサードパーティライブラリの読み込みパフォーマンスと開発者エクスペリエンスを向上させるコンポーネントとユーティリティのコレクションを提供するライブラリです。

@next/third-parties が提供するすべてのサードパーティ統合は、パフォーマンスと使いやすさのために最適化されています。

はじめに

開始するには、@next/third-parties ライブラリをインストールしてください。

npm install @next/third-parties@latest next@latest

@next/third-parties は現在、活発な開発中の実験的なライブラリです。より多くのサードパーティ統合を追加する作業を進めているため、最新またはカナリアフラグを付けてインストールすることを推奨します。

Googleサードパーティ

Google がサポートするすべてのサードパーティライブラリは、@next/third-parties/google からインポートできます。

Google Tag Manager

GoogleTagManager コンポーネントを使用して、ページに Google Tag Manager コンテナをインスタンス化できます。デフォルトでは、ページでのハイドレーション後に元のインラインスクリプトを取得します。

すべてのルートで Google Tag Manager を読み込むには、カスタム _app にコンポーネントを直接含め、GTM コンテナ ID を渡してください。

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

単一のルートで Google Tag Manager を読み込むには、ページファイルにコンポーネントを含めてください。

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

さまざまな変数とイベントについて、Tag Manager の 開発者ドキュメント を参照してください。

サーバーサイドタグ付け

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

オプション

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

Google Analytics

GoogleAnalytics コンポーネントを使用して、Google タグ (gtag.js) を介してGoogle Analytics 4をページに含めることができます。デフォルトでは、ページでハイドレーションが発生した後に元のスクリプトを取得します。

推奨: Google Tag Manager が既にアプリケーションに含まれている場合は、Google Analytics を個別のコンポーネントとして含めるのではなく、Google Tag Manager を使用して直接設定できます。Tag Manager と gtag.js の違いについては、ドキュメント を参照してください。

すべてのルートで Google Analytics を読み込むには、カスタム _app にコンポーネントを直接含め、測定 ID を渡してください。

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

単一のルートで Google Analytics を読み込むには、ページファイルにコンポーネントを含めます。

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 Analytics の 開発者ドキュメント を参照してください。

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

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

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

注意: ページビューイベントを手動で送信することにした場合は、重複データを回避するためにデフォルトのページビュー測定を無効にしてください。Google Analytics の 開発者ドキュメント を参照してください。

オプション

<GoogleAnalytics> コンポーネントに渡すオプション。

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 のドキュメント を参照してください。

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

オプション