Drittanbieter-Bibliotheken

@next/third-parties ist eine Bibliothek, die eine Sammlung von Komponenten und Hilfsmitteln bereitstellt, die die Leistung und Entwicklererfahrung beim Laden beliebter Drittanbieter-Bibliotheken in Ihrer Next.js-Anwendung verbessern.

Alle Drittanbieter-Integrationen von @next/third-parties wurden für Leistung und Benutzerfreundlichkeit optimiert.

Erste Schritte

Installieren Sie zunächst die Bibliothek @next/third-parties:

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

@next/third-parties ist derzeit eine experimentelle Bibliothek in aktiver Entwicklung. Wir empfehlen, sie mit den Flags latest oder canary zu installieren, während wir weitere Drittanbieter-Integrationen hinzufügen.

Google-Drittanbieter

Alle unterstützten Drittanbieter-Bibliotheken von Google können aus @next/third-parties/google importiert werden.

Google Tag Manager

Die Komponente GoogleTagManager kann verwendet werden, um einen Google Tag Manager-Container auf Ihrer Seite zu instanziieren. Standardmäßig wird das ursprüngliche Inline-Skript nach dem Hydratisieren der Seite geladen.

Um Google Tag Manager für alle Routen zu laden, fügen Sie die Komponente direkt in Ihre benutzerdefinierte _app ein und übergeben Sie Ihre GTM-Container-ID:

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

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

Um Google Tag Manager für eine einzelne Route zu laden, fügen Sie die Komponente in Ihre Seiten-Datei ein:

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

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

Ereignisse senden

Die Funktion sendGTMEvent kann verwendet werden, um Benutzerinteraktionen auf Ihrer Seite zu verfolgen, indem Ereignisse über das dataLayer-Objekt gesendet werden. Damit diese Funktion funktioniert, muss die Komponente <GoogleTagManager /> entweder in einem übergeordneten Layout, einer Seite oder einer Komponente enthalten sein oder direkt in derselben Datei.

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

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

Lesen Sie die Entwicklerdokumentation des Tag Managers, um mehr über die verschiedenen Variablen und Ereignisse zu erfahren, die an die Funktion übergeben werden können.

Optionen

Optionen, die an den Google Tag Manager übergeben werden können. Eine vollständige Liste der Optionen finden Sie in der Google Tag Manager-Dokumentation.

Google Analytics

Die Komponente GoogleAnalytics kann verwendet werden, um Google Analytics 4 über das Google-Tag (gtag.js) in Ihre Seite einzubinden. Standardmäßig werden die ursprünglichen Skripte nach dem Hydratisieren der Seite geladen.

Empfehlung: Wenn Google Tag Manager bereits in Ihrer Anwendung enthalten ist, können Sie Google Analytics direkt darüber konfigurieren, anstatt Google Analytics als separate Komponente einzubinden. Lesen Sie die Dokumentation, um mehr über die Unterschiede zwischen Tag Manager und gtag.js zu erfahren.

Um Google Analytics für alle Routen zu laden, fügen Sie die Komponente direkt in Ihre benutzerdefinierte _app ein und übergeben Sie Ihre Mess-ID:

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

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

Um Google Analytics für eine einzelne Route zu laden, fügen Sie die Komponente in Ihre Seiten-Datei ein:

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

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

Ereignisse senden

Die Funktion sendGAEvent kann verwendet werden, um Benutzerinteraktionen auf Ihrer Seite zu messen, indem Ereignisse über das dataLayer-Objekt gesendet werden. Damit diese Funktion funktioniert, muss die Komponente <GoogleAnalytics /> entweder in einem übergeordneten Layout, einer Seite oder einer Komponente enthalten sein oder direkt in derselben Datei.

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

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

Lesen Sie die Entwicklerdokumentation von Google Analytics, um mehr über Ereignisparameter zu erfahren.

Seitenaufrufe verfolgen

Google Analytics verfolgt automatisch Seitenaufrufe, wenn sich der Browserverlauf ändert. Dies bedeutet, dass clientseitige Navigationen zwischen Next.js-Routen Seitenaufrufdaten senden, ohne dass eine Konfiguration erforderlich ist.

Um sicherzustellen, dass clientseitige Navigationen korrekt gemessen werden, vergewissern Sie sich, dass die Eigenschaft "Enhanced Measurement" in Ihrem Admin-Panel aktiviert ist und das Kontrollkästchen "Page changes based on browser history events" ausgewählt ist.

Hinweis: Wenn Sie sich entscheiden, Seitenaufrufereignisse manuell zu senden, deaktivieren Sie die standardmäßige Seitenaufrufmessung, um doppelte Daten zu vermeiden. Lesen Sie die Entwicklerdokumentation von Google Analytics, um mehr zu erfahren.

Optionen

Optionen, die an die Komponente <GoogleAnalytics> übergeben werden können.

Google Maps Embed

Die Komponente GoogleMapsEmbed kann verwendet werden, um eine Google Maps Embed zu Ihrer Seite hinzuzufügen. Standardmäßig wird das loading-Attribut verwendet, um das Embed unterhalb des Folds verzögert zu laden.

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

Optionen

Optionen, die an die Google Maps Embed übergeben werden können. Eine vollständige Liste der Optionen finden Sie in der Google Map Embed-Dokumentation.

YouTube Embed

Die Komponente YouTubeEmbed kann verwendet werden, um ein YouTube-Embed zu laden und anzuzeigen. Diese Komponente lädt schneller, indem sie lite-youtube-embed verwendet.

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

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

Optionen