メインコンテンツまでスキップ

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

@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 タグマネージャーをロードさせるには、コンポーネントを直接rootレイアウトに追加し、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 オブジェクトを使い、ユーザーのページ上での操作を追跡するイベントを送信できます。この関数を利用するには、<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>
)
}

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

サーバーサイドタグ

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

オプション

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

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

Google アナリティクス

GoogleAnalytics コンポーネントを使用して、Google タグ(gtag.js)を介して Google アナリティクス4 をページに追加できます。デフォルトでは、ページのハイドレーションが起こった後でオリジナルのスクリプトを取得します。

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

すべてのルートでGoogleアナリティクスをロードするには、コンポーネントを直接rootレイアウトに追加し、計測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 オブジェクトを用いて、ページ上のユーザーの操作を計測するイベントを送信できます。この関数を利用するには、<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アナリティクスの開発者向けドキュメントを参照してください。

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

Googleアナリティクスはブラウザの履歴状態が変わると自動的にページビューをトラッキングします。これは、Next.js のルート間をクライアントサイドでナビゲートする場合、ページビューのデータが設定なしで送信されることを意味します。

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

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

オプション

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

NameTypeDescription
gaId必須計測ID です。通常は G- で始まります
dataLayerName任意データレイヤーの名前です。デフォルトは dataLayer
nonce任意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 マップ埋め込みドキュメントを参照してください。

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

オプション

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