Bibliotecas de terceros

@next/third-parties es una biblioteca que proporciona una colección de componentes y utilidades que mejoran el rendimiento y la experiencia del desarrollador al cargar bibliotecas de terceros populares en tu aplicación Next.js.

Todas las integraciones de terceros proporcionadas por @next/third-parties han sido optimizadas para rendimiento y facilidad de uso.

Primeros pasos

Para comenzar, instala la biblioteca @next/third-parties:

npm install @next/third-parties@latest next@latest

@next/third-parties es actualmente una biblioteca experimental en desarrollo activo. Recomendamos instalarla con las banderas latest o canary mientras trabajamos en agregar más integraciones de terceros.

Bibliotecas de Google

Todas las bibliotecas de terceros de Google admitidas pueden importarse desde @next/third-parties/google.

Google Tag Manager

El componente GoogleTagManager puede usarse para instanciar un contenedor de Google Tag Manager en tu página. Por defecto, recupera el script inline original después de que ocurra la hidratación en la página.

Para cargar Google Tag Manager en todas las rutas, incluye el componente directamente en tu _app personalizado y pasa tu ID de contenedor GTM:

import { GoogleTagManager } from '@next/third-parties/google'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleTagManager gtmId="GTM-XYZ" />
    </>
  )
}

Para cargar Google Tag Manager en una sola ruta, incluye el componente en tu archivo de página:

import { GoogleTagManager } from '@next/third-parties/google'

export default function Page() {
  return <GoogleTagManager gtmId="GTM-XYZ" />
}

Envío de eventos

La función sendGTMEvent puede usarse para rastrear interacciones del usuario en tu página enviando eventos usando el objeto dataLayer. Para que esta función funcione, el componente <GoogleTagManager /> debe estar incluido en un layout padre, página o componente, o directamente en el mismo archivo.

import { sendGTMEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Enviar evento
      </button>
    </div>
  )
}

Consulta la documentación para desarrolladores de Tag Manager para aprender sobre las diferentes variables y eventos que pueden pasarse a la función.

Opciones

Opciones para pasar a Google Tag Manager. Para una lista completa de opciones, lee la documentación de Google Tag Manager.

Google Analytics

El componente GoogleAnalytics puede usarse para incluir Google Analytics 4 en tu página mediante la etiqueta de Google (gtag.js). Por defecto, recupera los scripts originales después de que ocurra la hidratación en la página.

Recomendación: Si Google Tag Manager ya está incluido en tu aplicación, puedes configurar Google Analytics directamente usándolo, en lugar de incluir Google Analytics como un componente separado. Consulta la documentación para aprender más sobre las diferencias entre Tag Manager y gtag.js.

Para cargar Google Analytics en todas las rutas, incluye el componente directamente en tu _app personalizado y pasa tu ID de medición:

import { GoogleAnalytics } from '@next/third-parties/google'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <GoogleAnalytics gaId="G-XYZ" />
    </>
  )
}

Para cargar Google Analytics en una sola ruta, incluye el componente en tu archivo de página:

import { GoogleAnalytics } from '@next/third-parties/google'

export default function Page() {
  return <GoogleAnalytics gaId="G-XYZ" />
}

Envío de eventos

La función sendGAEvent puede usarse para medir interacciones del usuario en tu página enviando eventos usando el objeto dataLayer. Para que esta función funcione, el componente <GoogleAnalytics /> debe estar incluido en un layout padre, página o componente, o directamente en el mismo archivo.

import { sendGAEvent } from '@next/third-parties/google'

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Enviar evento
      </button>
    </div>
  )
}

Consulta la documentación para desarrolladores de Google Analytics para aprender más sobre los parámetros de eventos.

Seguimiento de vistas de página

Google Analytics rastrea automáticamente las vistas de página cuando cambia el estado del historial del navegador. Esto significa que las navegaciones del lado del cliente entre rutas de Next.js enviarán datos de vistas de página sin ninguna configuración.

Para asegurarte de que las navegaciones del lado del cliente se miden correctamente, verifica que la propiedad "Medición mejorada" esté habilitada en tu panel de administración y que la casilla "Cambios de página basados en eventos del historial del navegador" esté seleccionada.

Nota: Si decides enviar manualmente eventos de vista de página, asegúrate de deshabilitar la medición predeterminada de vistas de página para evitar tener datos duplicados. Consulta la documentación para desarrolladores de Google Analytics para aprender más.

Opciones

Opciones para pasar al componente <GoogleAnalytics>.

Google Maps Embed

El componente GoogleMapsEmbed puede usarse para agregar un Google Maps Embed a tu página. Por defecto, usa el atributo loading para cargar diferidamente el embed que esté fuera de la pantalla visible.

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

Opciones

Opciones para pasar a Google Maps Embed. Para una lista completa de opciones, lee la documentación de Google Map Embed.

YouTube Embed

El componente YouTubeEmbed puede usarse para cargar y mostrar un embed de YouTube. Este componente carga más rápido usando lite-youtube-embed internamente.

import { YouTubeEmbed } from '@next/third-parties/google'

export default function Page() {
  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
}

Opciones