---
title: "Uso de Partytown con Google Tag Manager en Astro"
description: "¿Cómo mejorar el rendimiento descargando Google Tag Manager a un Web Worker con Partytown en Astro?"
source: "https://www.launchfa.st/es/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" />

En esta guía, aprenderá cómo mejorar el rendimiento de su aplicación Astro integrando Partytown para descargar Google Tag Manager a un Web Worker. Recorrerá el proceso de configuración de un nuevo proyecto Astro, la instalación de la integración de Partytown y la configuración de Google Tag Manager para que se ejecute en un hilo separado sin bloquear el hilo principal.

- [Ver el proyecto de ejemplo en GitHub](https://github.com/rishi-raj-jain/astro-gtm-partytown)

## Requisitos previos

Necesitará lo siguiente:

- [Node.j 20](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
- Una cuenta de Google Tag Manager con un ID de contenedor

## Tabla de contenido

- [¿Qué es Partytown?](#what-is-partytown)
- [Crear una nueva aplicación Astro](#create-a-new-astro-application)
- [Integrar Partytown en su proyecto Astro](#integrate-partytown-in-your-astro-project)
  - [Instalar Partytown con la CLI de Astro](#install-partytown-using-astro-cli)
  - [Configurar las opciones de Partytown](#configure-partytown-options)
- [Añadir Google Tag Manager con Partytown](#add-google-tag-manager-with-partytown)
  - [Crear un componente de seguimiento](#create-a-tracking-component)
  - [Usar el componente de seguimiento en su diseño](#use-the-tracking-component-in-your-layout)
- [Probar su aplicación Astro localmente](#test-your-astro-application-locally)
- [Comprender los beneficios de rendimiento](#understanding-the-performance-benefits)

## ¿Qué es Partytown?

[Partytown](https://partytown.builder.io/) es una biblioteca que traslada scripts que consumen muchos recursos a un web worker, alejándolos del hilo principal. Esto resulta especialmente útil para scripts de terceros como etiquetas de analítica y marketing que pueden ralentizar el rendimiento de su sitio web. Al descargar estos scripts a un web worker, el hilo principal permanece receptivo, lo que se traduce en mejores puntuaciones de Core Web Vitals y una experiencia de usuario mejorada.

## Crear una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

```bash
npm create astro@latest my-app
```

`npm create astro` es la forma recomendada de crear un proyecto Astro rápidamente.

Cuando se le solicite, elija:

- `Empty` cuando se le pregunte cómo iniciar el nuevo proyecto.
- `Yes` cuando se le pregunte si planea escribir Typescript.
- `Strict` cuando se le pregunte qué tan estricto debe ser Typescript.
- `Yes` cuando se le solicite instalar dependencias.
- `Yes` cuando se le solicite inicializar un repositorio git.

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

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

La aplicación debería estar ejecutándose en [localhost:4321](http://localhost:4321/).

Ahora, pasemos a integrar Partytown en su aplicación Astro.

## Integrar Partytown en su proyecto Astro

### Instalar Partytown con la CLI de Astro

Astro ofrece una integración de primera clase para Partytown que hace que la configuración sea increíblemente sencilla. Ejecute el siguiente comando:

```bash
npx astro add partytown
```

Cuando se le solicite, elija:

- `Yes` cuando se le pregunte si desea instalar las dependencias de Partytown.
- `Yes` cuando se le pregunte si desea realizar cambios en el archivo de configuración de Astro.

El comando anterior instala el paquete `@astrojs/partytown` y configura automáticamente su archivo `astro.config.mjs`. La integración se encarga de copiar los archivos de la biblioteca Partytown a la ubicación correcta en la salida de compilación, por lo que no necesita preocuparse por la configuración manual.

Ahora, pasemos a configurar las opciones de Partytown.

### Configurar las opciones de Partytown

De forma predeterminada, la integración de Partytown funciona sin configuración adicional, pero puede personalizar su comportamiento según sus necesidades específicas. Abra su archivo `astro.config.mjs` y verá que se ha añadido la integración de Partytown:

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';

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

La configuración `forward` es crucial para Google Tag Manager. Indica a Partytown que reenvíe las llamadas a `window.dataLayer.push()` desde el web worker al hilo principal. Esto es necesario porque Google Tag Manager utiliza el array `dataLayer` para enviar eventos y rastrear las interacciones del usuario.

Ahora, pasemos a añadir Google Tag Manager con Partytown.

## Añadir Google Tag Manager con Partytown

### Crear un componente de seguimiento

Cree un nuevo componente para gestionar la integración de Google Tag Manager. Cree un archivo `src/components/GoogleTagManager.astro` con el siguiente código:

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

El código anterior hace lo siguiente:

- Acepta una prop `containerId` para el ID de contenedor de Google Tag Manager.
- Carga el script de Google Tag Manager con `type="text/partytown"` en lugar del valor predeterminado `type="module"` o `type="text/javascript"`.
- Inicializa el array `dataLayer` y la función `gtag` que utiliza Google Tag Manager.
- Configura Google Tag Manager con su ID de contenedor.

La diferencia clave aquí es el atributo `type="text/partytown"`. Indica a Partytown que intercepte estos scripts y los ejecute en un web worker en lugar del hilo principal.

Ahora, pasemos a usar este componente en su diseño.

### Usar el componente de seguimiento en su diseño

Cree un archivo de diseño `src/layouts/Layout.astro` para incluir el componente de Google Tag Manager:

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

Asegúrese de reemplazar `G-XXXXXXX` por su ID de contenedor real de Google Tag Manager. Puede encontrar este ID en su cuenta de Google Tag Manager en Admin > Container Settings.

Ahora actualice su archivo `src/pages/index.astro` para usar este diseño:

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

## Probar su aplicación Astro localmente

Para probar la aplicación, inicie el servidor de desarrollo con el siguiente comando:

```bash
npm run dev
```

Abra las herramientas de desarrollo de su navegador y vaya a la pestaña Network. Debería ver que se carga el script de Google Tag Manager. Para verificar que Partytown funciona correctamente:

1. Abra la pestaña **Application** (Chrome) o **Storage** (Firefox) en las herramientas de desarrollo.
2. Busque **Web Workers** en la barra lateral izquierda.
3. Debería ver un web worker de Partytown en ejecución, lo que indica que sus scripts se han descargado correctamente.

También puede revisar la pestaña Console para ver mensajes o errores relacionados con Partytown.

## Comprender los beneficios de rendimiento

Al mover Google Tag Manager a un web worker con Partytown, obtiene varios beneficios de rendimiento:

- **Mejor rendimiento del hilo principal**: Los scripts de analítica y marketing ya no compiten por recursos en el hilo principal, manteniendo su interfaz receptiva.
- **Mejores Core Web Vitals**: En particular, las puntuaciones de Total Blocking Time (TBT) y First Input Delay (FID) mejoran significativamente.
- **Carga de página más rápida**: El navegador puede priorizar el renderizado y las interacciones del usuario por encima de los scripts de terceros.

Para Google Analytics 4 (GA4), que es la versión actual de Google Analytics, las respuestas incluyen los encabezados CORS correctos. Esto significa que no necesitará configurar un proxy para las solicitudes a `www.google-analytics.com`, lo que simplifica aún más la integración.

Si necesita rastrear eventos personalizados, puede usar el método `dataLayer.push()` en cualquier parte de su aplicación:

```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" />

Gracias a la configuración `forward: ['dataLayer.push']` en Partytown, estos eventos se reenviarán correctamente desde el web worker al hilo principal y se enviarán a Google Tag Manager.

## Referencias

- [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/)

## Conclusión

En esta guía, aprendió a integrar Partytown con Google Tag Manager en una aplicación Astro para mejorar el rendimiento descargando scripts de terceros a un web worker. También adquirió experiencia con las integraciones de primera clase de Astro y comprendió cómo los web workers pueden ayudar a optimizar los Core Web Vitals de su aplicación.

Si tiene preguntas o comentarios, no dude en contactarme en [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_).