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

@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

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

app/layout.js
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 タグマネージャーをロードさせるには、コンポーネントをページファイル内に追加します：

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 タグマネージャードキュメントを参照してください。

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

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

app/layout.js
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アナリティクスをロードするには、コンポーネントをページファイルに追加します：

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> コンポーネントに渡すオプションです。

Name	Type	Description
`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 マップ埋め込みドキュメントを参照してください。

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 を使用して高速に読み込みます。

app/page.js
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`	任意	ビデオコンテナにスタイルを適用するために使用されます

はじめに​

Googleサードパーティー​

Google タグマネージャー​

イベントの送信​

サーバーサイドタグ​

オプション​

Google アナリティクス​

イベントの送信​

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

オプション​

Google マップ埋め込み​

オプション​

YouTube 埋め込み​

オプション​

はじめに

Googleサードパーティー

Google タグマネージャー

イベントの送信

サーバーサイドタグ

オプション

Google アナリティクス

イベントの送信

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

オプション

Google マップ埋め込み

オプション

YouTube 埋め込み

オプション