---
title: "Partytown mit Google Tag Manager in Astro verwenden"
description: "Wie verbessern Sie die Performance, indem Sie Google Tag Manager mit Partytown in Astro in einen Web Worker auslagern?"
source: "https://www.launchfa.st/de/blog/astro-gtm-partytown"
author: "Rishi Raj Jain"
created_at: 2025-11-26T13:00:00.000Z
---

> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.

<img width="1600" height="900" alt="Using Partytown with Google Tag Manager in Astro" decoding="async" loading="eager" class="mt-4 border rounded-sm bg-cover bg-center bg-no-repeat transform will-change-auto" src="https://ik.imagekit.io/vjeqenuhn/launchfast-website/astro-gtm-partytown.png" />

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](https://github.com/rishi-raj-jain/astro-gtm-partytown)

## Voraussetzungen

Sie benötigen Folgendes:

- [Node.j 20](https://nodejs.org/en/blog/announcements/v20-release-announce) oder höher
- Ein Google Tag Manager-Konto mit einer Container-ID

## Inhaltsverzeichnis

- [Was ist Partytown?](#what-is-partytown)
- [Eine neue Astro-Anwendung erstellen](#create-a-new-astro-application)
- [Partytown in Ihr Astro-Projekt integrieren](#integrate-partytown-in-your-astro-project)
  - [Partytown mit der Astro CLI installieren](#install-partytown-using-astro-cli)
  - [Partytown-Optionen konfigurieren](#configure-partytown-options)
- [Google Tag Manager mit Partytown hinzufügen](#add-google-tag-manager-with-partytown)
  - [Eine Tracking-Komponente erstellen](#create-a-tracking-component)
  - [Die Tracking-Komponente in Ihrem Layout verwenden](#use-the-tracking-component-in-your-layout)
- [Ihre Astro-Anwendung lokal testen](#test-your-astro-application-locally)
- [Die Performance-Vorteile verstehen](#understanding-the-performance-benefits)

## Was ist Partytown?

[Partytown](https://partytown.builder.io/) 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:

```bash
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:

```bash
cd my-app
npm run dev
```

Die App sollte auf [localhost:4321](http://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:

```bash
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:

```js title="astro.config.mjs"
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:

```astro
---
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:

```astro
---
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:

```astro title="src/pages/index.astro"
---
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:

```bash
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:

```astro
<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>
```

<img width="1600" height="900" alt="Using Partytown with Google Tag Manager in Astro" decoding="async" loading="eager" class="mt-4 border rounded-sm bg-cover bg-center bg-no-repeat transform will-change-auto" src="https://ik.imagekit.io/vjeqenuhn/launchfast-website/track-event.png" />

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](https://partytown.builder.io/astro/)
- [Google Tag Manager with Partytown](https://partytown.builder.io/google-tag-manager/)
- [Astro Partytown Integration Docs](https://docs.astro.build/en/guides/integrations-guide/partytown/)

## 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](https://twitter.com/direct_messages/create/rishi_raj_jain_).