Optimierung von 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 @next/third-parties-Bibliothek:

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 GoogleTagManager-Komponente kann verwendet werden, um einen Google Tag Manager-Container auf Ihrer Seite zu instanziieren. Standardmäßig lädt sie das ursprüngliche Inline-Skript nach dem Hydratisieren der Seite.

Um Google Tag Manager für alle Routen zu laden, fügen Sie die Komponente direkt in Ihre benutzerdefinierte _app-Datei 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 <GoogleTagManager />-Komponente entweder in einem übergeordneten Layout, einer Seite oder Komponente oder direkt in derselben Datei enthalten sein.

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 von Tag Manager, um mehr über die verschiedenen Variablen und Ereignisse zu erfahren, die an die Funktion übergeben werden können.

Serverseitiges Tagging

Wenn Sie einen serverseitigen Tag-Manager verwenden und gtm.js-Skripte von Ihrem Tagging-Server bereitstellen, können Sie die Option gtmScriptUrl verwenden, um die URL des Skripts anzugeben.

Optionen

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

Google Analytics

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

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-Datei 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 <GoogleAnalytics />-Komponente entweder in einem übergeordneten Layout, einer Seite oder Komponente oder direkt in derselben Datei enthalten sein.

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 Seitenaufrufe automatisch, wenn sich der Browserverlauf ändert. Das bedeutet, dass clientseitige Navigationen zwischen Next.js-Routen ohne zusätzliche Konfiguration Seitenaufrufdaten senden.

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 "Seitenänderungen basierend auf Browserverlaufsereignissen" ausgewählt ist.

Hinweis: Wenn Sie Seitenaufrufereignisse manuell senden möchten, 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 <GoogleAnalytics>-Komponente übergeben werden können.

Google Maps Embed

Die GoogleMapsEmbed-Komponente kann verwendet werden, um einen Google Maps Embed zu Ihrer Seite hinzuzufügen. Standardmäßig verwendet sie das loading-Attribut, um das Embed unterhalb des Folds nachzuladen.

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 Google Maps Embed übergeben werden können. Eine vollständige Liste der Optionen finden Sie in der Google Map Embed-Dokumentation.

YouTube Embed

Die YouTubeEmbed-Komponente 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