Comment optimiser les bibliothèques tierces

@next/third-parties est une bibliothèque qui fournit une collection de composants et d'utilitaires améliorant les performances et l'expérience développeur lors du chargement de bibliothèques tierces populaires dans votre application Next.js.

Toutes les intégrations tierces fournies par @next/third-parties ont été optimisées pour les performances et la facilité d'utilisation.

Premiers pas

Pour commencer, installez la bibliothèque @next/third-parties :

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

@next/third-parties est actuellement une bibliothèque expérimentale en développement actif. Nous recommandons de l'installer avec les flags latest ou canary pendant que nous travaillons à ajouter plus d'intégrations tierces.

Bibliothèques tierces Google

Toutes les bibliothèques tierces prises en charge par Google peuvent être importées depuis @next/third-parties/google.

Google Tag Manager

Le composant GoogleTagManager peut être utilisé pour instancier un conteneur Google Tag Manager sur votre page. Par défaut, il récupère le script inline original après l'hydratation de la page.

Pour charger Google Tag Manager sur toutes les routes, incluez le composant directement dans votre _app personnalisé et passez votre ID de conteneur GTM :

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

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

Pour charger Google Tag Manager pour une seule route, incluez le composant dans votre fichier de page :

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

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

Envoi d'événements

La fonction sendGTMEvent peut être utilisée pour suivre les interactions utilisateur sur votre page en envoyant des événements via l'objet dataLayer. Pour que cette fonction fonctionne, le composant <GoogleTagManager /> doit être inclus dans un layout parent, une page, un composant, ou directement dans le même fichier.

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

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}
      >
        Envoyer un événement
      </button>
    </div>
  )
}

Consultez la documentation pour développeurs de Tag Manager pour en savoir plus sur les différentes variables et événements pouvant être passés à la fonction.

Tagging côté serveur

Si vous utilisez un gestionnaire de tags côté serveur et servez les scripts gtm.js depuis votre serveur de tagging, vous pouvez utiliser l'option gtmScriptUrl pour spécifier l'URL du script.

Options

Options à passer à Google Tag Manager. Pour une liste complète des options, consultez la documentation Google Tag Manager.

Google Analytics

Le composant GoogleAnalytics peut être utilisé pour inclure Google Analytics 4 à votre page via la balise Google (gtag.js). Par défaut, il récupère les scripts originaux après l'hydratation de la page.

Recommandation : Si Google Tag Manager est déjà inclus dans votre application, vous pouvez configurer Google Analytics directement via celui-ci, plutôt que d'inclure Google Analytics comme un composant séparé. Consultez la documentation pour en savoir plus sur les différences entre Tag Manager et gtag.js.

Pour charger Google Analytics sur toutes les routes, incluez le composant directement dans votre _app personnalisé et passez votre ID de mesure :

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

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

Pour charger Google Analytics pour une seule route, incluez le composant dans votre fichier de page :

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

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

Envoi d'événements

La fonction sendGAEvent peut être utilisée pour mesurer les interactions utilisateur sur votre page en envoyant des événements via l'objet dataLayer. Pour que cette fonction fonctionne, le composant <GoogleAnalytics /> doit être inclus dans un layout parent, une page, un composant, ou directement dans le même fichier.

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

export function EventButton() {
  return (
    <div>
      <button
        onClick={() => sendGAEvent('event', 'buttonClicked', { value: 'xyz' })}
      >
        Envoyer un événement
      </button>
    </div>
  )
}

Consultez la documentation pour développeurs de Google Analytics pour en savoir plus sur les paramètres d'événement.

Suivi des pages vues

Google Analytics suit automatiquement les pages vues lorsque l'état de l'historique du navigateur change. Cela signifie que les navigations côté client entre les routes Next.js enverront des données de pages vues sans aucune configuration.

Pour vous assurer que les navigations côté client sont correctement mesurées, vérifiez que la propriété "Mesure améliorée" est activée dans votre panneau d'administration et que la case "Changements de page basés sur les événements d'historique du navigateur" est cochée.

Remarque : Si vous décidez d'envoyer manuellement des événements de pages vues, assurez-vous de désactiver la mesure par défaut pour éviter d'avoir des données en double. Consultez la documentation pour développeurs de Google Analytics pour en savoir plus.

Options

Options à passer au composant <GoogleAnalytics>.

Intégration Google Maps

Le composant GoogleMapsEmbed peut être utilisé pour ajouter une intégration Google Maps à votre page. Par défaut, il utilise l'attribut loading pour charger l'intégration en lazy-load en dessous du fold.

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

Options

Options à passer à l'intégration Google Maps. Pour une liste complète des options, consultez la documentation Google Map Embed.

Intégration YouTube

Le composant YouTubeEmbed peut être utilisé pour charger et afficher une intégration YouTube. Ce composant se charge plus rapidement en utilisant lite-youtube-embed en interne.

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

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

Options