Partytown mit Google Tag Manager in Astro verwenden

In dieser Anleitung erfahren Sie, wie Sie die Performance Ihrer Astro-Anwendung verbessern, indem Sie Partytown integrieren, um Google Tag Manager in einen Web Worker auszulagern. Sie durchlaufen den Prozess der Einrichtung eines neuen Astro-Projekts, der Installation der Partytown-Integration und der Konfiguration von Google Tag Manager, damit es in einem separaten Thread läuft, ohne den Main Thread zu blockieren.

• GitHub-Beispielprojekt ansehen

Voraussetzungen

Sie benötigen Folgendes:

• Node.j 20 oder höher
• Ein Google Tag Manager-Konto mit einer Container-ID

Inhaltsverzeichnis

• Was ist Partytown?
• Eine neue Astro-Anwendung erstellen
• Partytown in Ihr Astro-Projekt integrieren
  • Partytown mit der Astro CLI installieren
  • Partytown-Optionen konfigurieren
• Google Tag Manager mit Partytown hinzufügen
  • Eine Tracking-Komponente erstellen
  • Die Tracking-Komponente in Ihrem Layout verwenden
• Ihre Astro-Anwendung lokal testen
• Die Performance-Vorteile verstehen

Was ist Partytown?

Partytown ist eine Bibliothek, die ressourcenintensive Skripte in einen Web Worker und damit vom Main Thread weg verlagert. Das ist besonders nützlich für Drittanbieter-Skripte wie Analytics- und Marketing-Tags, die die Performance Ihrer Website verlangsamen können. Durch die Auslagerung dieser Skripte in einen Web Worker bleibt Ihr Main Thread reaktionsfähig, was zu besseren Core Web Vitals und einer verbesserten Nutzererfahrung führt.

Eine neue Astro-Anwendung erstellen

Beginnen wir mit der Erstellung eines neuen Astro-Projekts. Führen Sie den folgenden Befehl aus:

npm create astro@latest my-app

npm create astro ist die empfohlene Methode, um ein Astro-Projekt schnell zu erstellen.

Wenn Sie dazu aufgefordert werden, wählen Sie:

• Empty, wenn Sie gefragt werden, wie das neue Projekt gestartet werden soll.
• Yes, wenn Sie gefragt werden, ob Sie Typescript schreiben möchten.
• Strict, wenn Sie gefragt werden, wie streng Typescript sein soll.
• Yes, wenn Sie aufgefordert werden, Abhängigkeiten zu installieren.
• Yes, wenn Sie aufgefordert werden, ein Git-Repository zu initialisieren.

Sobald das erledigt ist, können Sie in das Projektverzeichnis wechseln und die App starten:

cd my-app
npm run dev

Die App sollte auf localhost:4321 laufen.

Kommen wir nun zur Integration von Partytown in Ihre Astro-Anwendung.

Partytown in Ihr Astro-Projekt integrieren

Partytown mit der Astro CLI installieren

Astro bietet eine First-Class-Integration für Partytown, die die Einrichtung unglaublich einfach macht. Führen Sie den folgenden Befehl aus:

npx astro add partytown

Wenn Sie dazu aufgefordert werden, wählen Sie:

• Yes, wenn Sie gefragt werden, ob die Partytown-Abhängigkeiten installiert werden sollen.
• Yes, wenn Sie gefragt werden, ob Änderungen an der Astro-Konfigurationsdatei vorgenommen werden sollen.

Der obige Befehl installiert das Paket @astrojs/partytown und konfiguriert automatisch Ihre astro.config.mjs-Datei. Die Integration übernimmt das Kopieren der Partytown-Bibliotheksdateien an den richtigen Ort in Ihrer Build-Ausgabe, sodass Sie sich keine Gedanken über die manuelle Einrichtung machen müssen.

Kommen wir nun zur Konfiguration der Partytown-Optionen.

Partytown-Optionen konfigurieren

Standardmäßig funktioniert die Partytown-Integration sofort, aber Sie können ihr Verhalten an Ihre spezifischen Anforderungen anpassen. Öffnen Sie Ihre astro.config.mjs-Datei und Sie sehen, dass die Partytown-Integration hinzugefügt wurde:

import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

export default defineConfig({
  integrations: [
    partytown({
      config: {
        forward: ['dataLayer.push'],
      },
    }),
  ],
});

Die forward-Konfiguration ist entscheidend für Google Tag Manager. Sie teilt Partytown mit, Aufrufe von window.dataLayer.push() vom Web Worker an den Main Thread weiterzuleiten. Das ist notwendig, weil Google Tag Manager das dataLayer-Array verwendet, um Events zu senden und Nutzerinteraktionen zu tracken.

Kommen wir nun zum Hinzufügen von Google Tag Manager mit Partytown.

Google Tag Manager mit Partytown hinzufügen

Eine Tracking-Komponente erstellen

Erstellen Sie eine neue Komponente für die Google Tag Manager-Integration. Erstellen Sie eine Datei src/components/GoogleTagManager.astro mit folgendem Code:

---
interface Props {
  containerId: string;
}

const { containerId } = Astro.props;
---

<script
  type="text/partytown"
  src={`https://www.googletagmanager.com/gtag/js?id=${containerId}`}
></script>

<script type="text/partytown" define:vars={{ containerId }}>
  window.dataLayer = window.dataLayer || [];
  window.gtag = function gtag() {
    dataLayer.push(arguments);
  };
  gtag('js', new Date());
  gtag('config', containerId);
</script>

Der obige Code macht Folgendes:

• Akzeptiert ein containerId-Prop für Ihre Google Tag Manager-Container-ID.
• Lädt das Google Tag Manager-Skript mit type="text/partytown" statt dem Standard type="module" oder type="text/javascript".
• Initialisiert das dataLayer-Array und die gtag-Funktion, die Google Tag Manager verwendet.
• Konfiguriert Google Tag Manager mit Ihrer Container-ID.

Der entscheidende Unterschied hier ist das Attribut type="text/partytown". Es teilt Partytown mit, diese Skripte abzufangen und in einem Web Worker statt im Main Thread auszuführen.

Kommen wir nun zur Verwendung dieser Komponente in Ihrem Layout.

Die Tracking-Komponente in Ihrem Layout verwenden

Erstellen Sie eine Layout-Datei src/layouts/Layout.astro, um die Google Tag Manager-Komponente einzubinden:

---
import GoogleTagManager from '../components/GoogleTagManager.astro';

interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
    <GoogleTagManager containerId="G-XXXXXXX" />
  </head>
  <body>
    <slot />
  </body>
</html>

Ersetzen Sie G-XXXXXXX durch Ihre tatsächliche Google Tag Manager-Container-ID. Diese ID finden Sie in Ihrem Google Tag Manager-Konto unter Admin > Container Settings.

Aktualisieren Sie nun Ihre src/pages/index.astro-Datei, um dieses Layout zu verwenden:

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Welcome to Astro with Partytown">
  <main>
    <h1>Welcome to Astro</h1>
    <p>Your Google Tag Manager is now running in a web worker!</p>
    <!-- <button track-me> Track Custom Event </button> -->
  </main>
</Layout>

Ihre Astro-Anwendung lokal testen

Um die Anwendung zu testen, starten Sie den Entwicklungsserver mit dem folgenden Befehl:

npm run dev

Öffnen Sie die Entwicklertools Ihres Browsers und navigieren Sie zum Network-Tab. Sie sollten sehen, dass das Google Tag Manager-Skript geladen wird. Um zu überprüfen, ob Partytown korrekt funktioniert:

1. Öffnen Sie den Application-Tab (Chrome) oder den Storage-Tab (Firefox) in den Entwicklertools.
2. Suchen Sie in der linken Seitenleiste nach Web Workers.
3. Sie sollten einen laufenden Partytown-Web Worker sehen, was darauf hinweist, dass Ihre Skripte erfolgreich ausgelagert wurden.

Sie können auch den Console-Tab auf Partytown-bezogene Meldungen oder Fehler überprüfen.

Die Performance-Vorteile verstehen

Durch die Verlagerung von Google Tag Manager in einen Web Worker mit Partytown erhalten Sie mehrere Performance-Vorteile:

• Verbesserte Main-Thread-Performance: Analytics- und Marketing-Skripte konkurrieren nicht mehr um Ressourcen auf dem Main Thread, wodurch Ihre UI reaktionsfähig bleibt.
• Bessere Core Web Vitals: Insbesondere Total Blocking Time (TBT) und First Input Delay (FID) verbessern sich deutlich.
• Schnelleres Laden der Seite: Der Browser kann Rendering und Nutzerinteraktionen gegenüber Drittanbieter-Skripten priorisieren.

Für Google Analytics 4 (GA4), die aktuelle Version von Google Analytics, enthalten die Antworten die korrekten CORS-Header. Das bedeutet, dass Sie kein Proxying für Anfragen an www.google-analytics.com einrichten müssen, was die Integration noch einfacher macht.

Wenn Sie benutzerdefinierte Events tracken möchten, können Sie die Methode dataLayer.push() überall in Ihrer Anwendung verwenden:

<button track-me>Track Custom Event</button>

<script type="text/partytown">
  document.querySelectorAll("button[track-me]").forEach((button) => {
    button.addEventListener("click", () => {
      dataLayer.push({
        event: "button_click",
      });
      // console.log(dataLayer);
    });
  });
</script>

Dank der forward: ['dataLayer.push']-Konfiguration in Partytown werden diese Events korrekt vom Web Worker an den Main Thread weitergeleitet und an Google Tag Manager gesendet.

Referenzen

• Partytown Astro Integration
• Google Tag Manager with Partytown
• Astro Partytown Integration Docs

Abschluss

In dieser Anleitung haben Sie gelernt, wie Sie Partytown mit Google Tag Manager in einer Astro-Anwendung integrieren, um die Performance zu verbessern, indem Sie Drittanbieter-Skripte in einen Web Worker auslagern. Sie haben außerdem Erfahrung mit den First-Class-Integrationen von Astro gesammelt und verstanden, wie Web Worker helfen können, die Core Web Vitals Ihrer Anwendung zu optimieren.

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.