Uso de Partytown con Google Tag Manager en Astro

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

Requisitos previos

Necesitará lo siguiente:

• Node.j 20 o posterior
• Una cuenta de Google Tag Manager con un ID de contenedor

Tabla de contenido

• ¿Qué es Partytown?
• Crear una nueva aplicación Astro
• Integrar Partytown en su proyecto Astro
  • Instalar Partytown con la CLI de Astro
  • Configurar las opciones de Partytown
• Añadir Google Tag Manager con Partytown
  • Crear un componente de seguimiento
  • Usar el componente de seguimiento en su diseño
• Probar su aplicación Astro localmente
• Comprender los beneficios de rendimiento

¿Qué es Partytown?

Partytown 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:

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:

cd my-app
npm run dev

La aplicación debería estar ejecutándose en 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:

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:

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:

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

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

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

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:

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

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
• Google Tag Manager with Partytown
• Astro Partytown Integration Docs

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.