サードパーティーライブラリ
@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を渡します:
- TypeScript
- JavaScript
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>
)
}
import { GoogleTagManager } from '@next/third-parties/google'
export default function RootLayout({ children }) {
return (
<html lang="en">
<GoogleTagManager gtmId="GTM-XYZ" />
<body>{children}</body>
</html>
)
}
単一のルートに対してGoogle タグマネージャーをロードさせるには、コンポーネントをページファイル内に追加します:
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>
)
}
異なる変数やイベントを関数に渡す方法については、 タグマネージャーの開発者向けドキュメントを参照してください。
サーバーサイドタグ
サーバーサイドタグマネージャーを使用し、タグ付けサーバーから gtm.js
スクリプトを提供している場合、gtmScriptUrl
オプションを使用してスクリプトのURLを指定できます。
オプション
Google タグマネージャーに渡すオプションです。すべてのオプションの一覧は Google タグマネージャードキュメントを参照してください。
Name | Type | Description |
---|---|---|
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を渡します:
- TypeScript
- JavaScript
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>
)
}
import { GoogleAnalytics } from '@next/third-parties/google'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="G-XYZ" />
</html>
)
}
単一のルートに対してGoogleアナリティクスをロードするには、コンポーネントをページファイルに追加します:
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アナリティクスの開発者向けドキュメントを参照してください。
ページビューのトラッキング
Googleアナリティクスはブラウザの履歴状態が変わると自動的にページビューをトラッキングします。これは、Next.js のルート間をクライアントサイドでナビゲートする場合、ページビューのデータが設定なしで送信されることを意味します。
クライアントサイドのナビゲーションが正しく計測されていることを確かめるためには、管理画面で「拡張計測」プロパティが有効になっており、「ブラウザ履歴イベントに基づくページ変更」チェックボックスが選択されていることを確認してください。
注: ページビューイベントを手動で送信する場合、デフォルトのページビュー計測を無効にして、重複データを避けることを確認してください。詳しくはGoogleアナリティクスの開発者向けドキュメントを参照してください。
オプション
<GoogleAnalytics>
コンポーネントに渡すオプションです。
Name | Type | Description |
---|---|---|
gaId | 必須 | 計測ID です。通常は G- で始まります |
dataLayerName | 任意 | データレイヤーの名前です。デフォルトは dataLayer |
nonce | 任意 | nonceです |
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 マップ埋め込みドキュメントを参照してください。
Name | Type | Description |
---|---|---|
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
を使用して高速に読み込みます。
import { YouTubeEmbed } from '@next/third-parties/google'
export default function Page() {
return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}
オプション
Name | Type | Description |
---|---|---|
videoid | 必須 | YouTube のビデオIDです |
width | 任意 | ビデオコンテナの幅です。デフォルトは auto です |
height | 任意 | ビデオコンテナの高さです。デフォルトは auto です |
playlabel | 任意 | アクセシビリティのための再生ボタンの視覚的に隠されたラベルです |
params | 任意 | ここで定義されたビデオプレイヤーのパラメーターです。 パラメーターはクエリパラメーター文字列として渡されます。 例: params="controls=0&start=10&end=30" |
style | 任意 | ビデオコンテナにスタイルを適用するために使用されます |