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:

Terminal

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 Ihr Root-Layout ein und übergeben Sie Ihre GTM-Container-ID:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <GoogleTagManager gtmId="GTM-XYZ" />
      <body>{children}</body>
    </html>
  )
}

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

app/page.js

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.

app/page.js

'use client'

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.

Name	Typ	Beschreibung
`gtmId`	Erforderlich	Ihre GTM-Container-ID. Beginnt normalerweise mit `GTM-`.
`gtmScriptUrl`	Optional	GTM-Skript-URL. Standardwert ist `https://www.googletagmanager.com/gtm.js`.
`dataLayer`	Optional	Data-Layer-Objekt, mit dem der Container instanziiert wird.
`dataLayerName`	Optional	Name des Data Layers. Standardwert ist `dataLayer`.
`auth`	Optional	Wert des Authentifizierungsparameters (`gtm_auth`) für Umgebungssnippets.
`preview`	Optional	Wert des Vorschauparameters (`gtm_preview`) für Umgebungssnippets.

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 Ihr Root-Layout ein und übergeben Sie Ihre Mess-ID:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

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

app/page.js

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.

app/page.js

'use client'

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.

Name	Typ	Beschreibung
`gaId`	Erforderlich	Ihre Mess-ID. Beginnt normalerweise mit `G-`.
`dataLayerName`	Optional	Name des Data Layers. Standardwert ist `dataLayer`.
`nonce`	Optional	Ein Nonce.

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.

app/page.js

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.

Name	Typ	Beschreibung
`apiKey`	Erforderlich	Ihr API-Schlüssel.
`mode`	Erforderlich	Kartenmodus
`height`	Optional	Höhe des Embeds. Standardwert ist `auto`.
`width`	Optional	Breite des Embeds. Standardwert ist `auto`.
`style`	Optional	Stile an das iframe übergeben.
`allowfullscreen`	Optional	Eigenschaft, um bestimmte Kartenteile im Vollbildmodus anzuzeigen.
`loading`	Optional	Standardwert ist lazy. Ändern Sie dies, wenn Sie wissen, dass Ihr Embed oberhalb des Folds liegt.
`q`	Optional	Definiert die Position des Kartenmarkers. Dies kann je nach Kartenmodus erforderlich sein.
`center`	Optional	Definiert die Mitte der Kartenansicht.
`zoom`	Optional	Legt die anfängliche Zoomstufe der Karte fest.
`maptype`	Optional	Definiert den Typ der zu ladenden Kartenkacheln.
`language`	Optional	Definiert die Sprache für UI-Elemente und die Anzeige von Beschriftungen auf Kartenkacheln.
`region`	Optional	Definiert die anzuzeigenden Grenzen und Beschriftungen basierend auf geopolitischen Sensibilitäten.

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.

app/page.js

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

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

Optionen

Name	Typ	Beschreibung
`videoid`	Erforderlich	YouTube-Video-ID.
`width`	Optional	Breite des Video-Containers. Standardwert: `auto`
`height`	Optional	Höhe des Video-Containers. Standardwert: `auto`
`playlabel`	Optional	Eine visuell versteckte Beschriftung für den Play-Button zur Barrierefreiheit.
`params`	Optional	Die Video-Player-Parameter, definiert hier. Parameter werden als Query-String übergeben. Beispiel: `params="controls=0&start=10&end=30"`
`style`	Optional	Wird verwendet, um Stile auf den Video-Container anzuwenden.

Optimierung von Drittanbieter-Bibliotheken

On this page