Библиотеки сторонних разработчиков

@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:

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 по документации для получения дополнительной информации о различных переменных и событиях, которые могут быть переданы в функцию.

Параметры

Параметры для передачи в Google Tag Manager. Полный список параметров см. в документации Google Tag Manager.

Google Analytics

Компонент GoogleAnalytics может быть использован для добавления Google Analytics 4 на вашу страницу через тег Google (gtag.js). По умолчанию, он загружает исходные скрипты после гидрации страницы.

Рекомендация: Если Google Tag Manager уже включен в ваше приложение, вы можете настроить Google Analytics непосредственно с его помощью, вместо включения Google Analytics как отдельного компонента. Обратитесь к документации, чтобы узнать больше о различиях между Tag Manager и gtag.js.

Для загрузки Google Analytics для всех маршрутов, включите компонент напрямую в ваш пользовательский _app и передайте ваш идентификатор измерения:

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 Карт

Компонент 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 Карт.

Вставка 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" />
}

Параметры