Menu

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

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

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

はじめに

まず、@next/third-parties ライブラリをインストールします:

Terminal
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 コンテナをインスタンス化できます。デフォルトでは、ページの水和(hydration)が発生した後に元のインラインスクリプトを取得します。

すべてのルートでGoogle Tag Managerを読み込むには、コンポーネントをルートレイアウトに直接含め、GTMコンテナIDを渡します:

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

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

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

サーバーサイドタギング

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

オプション

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

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

Google Analytics

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

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

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

app/layout.tsx
TypeScript
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 Maps Embed

GoogleMapsEmbed コンポーネントを使用して、Google Maps Embedをページに追加できます。デフォルトでは、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 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 を使用しているため、より高速に読み込まれます。

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オプション動画コンテナにスタイルを適用するために使用します。