Contáctanos
Webflow Premium Partner Ehab Fayez
Volver a Agent Skills
Datos y Analítica

Google Analytics 4 Integration

Rastrea el comportamiento de los usuarios y conversiones con el seguimiento basado en eventos de Google Analytics 4 y APIs de informes.

Claude Code Cursor Copilot Windsurf Gemini CLI

Descripción General

Google Analytics 4 (GA4) es una plataforma de analíticas basada en eventos que rastrea las interacciones de los usuarios en sitios web y aplicaciones. A diferencia del anterior Universal Analytics, GA4 utiliza un modelo de datos orientado a eventos donde cada interacción es un evento con parámetros. Esto proporciona más flexibilidad para rastrear acciones personalizadas, embudos y recorridos de usuario. GA4 incluye funcionalidades de machine learning para audiencias predictivas y detección de anomalías.

La integración de GA4 requiere añadir el snippet gtag.js o usar el contenedor de Google Tag Manager (GTM). Para SPAs y apps renderizadas en el servidor, la API del Measurement Protocol permite enviar eventos desde el lado del servidor, habilitando un seguimiento preciso sin JavaScript del lado del cliente. La API de Datos de GA4 proporciona acceso programático a los informes, permitiendo dashboards personalizados e informes automatizados.

Las funcionalidades clave de GA4 incluyen medición mejorada (seguimiento automático de scrolls, clics salientes, búsqueda del sitio, engagement de video), dimensiones y métricas personalizadas, segmentación de audiencias, análisis de embudos y exploración de rutas. GA4 se integra con Google Ads para seguimiento de conversiones y remarketing, BigQuery para exportación de datos sin procesar y Looker Studio para visualizaciones personalizadas. El modo de consentimiento soporta regulaciones de privacidad ajustando el comportamiento de seguimiento basado en las elecciones de consentimiento del usuario.

¿Para Quién Es?

  • Rastrear vistas de página y eventos personalizados en una aplicación web
  • Configurar seguimiento de conversiones para compras de e-commerce
  • Construir informes personalizados con la API de Datos de GA4
  • Implementar seguimiento del lado del servidor con el Measurement Protocol

Instalación

Configurar Claude Code
npm install @google-analytics/data

Configuración

// Client-side gtag
window.gtag("event", "purchase", {
  transaction_id: "T12345",
  value: 29.99,
  currency: "USD",
  items: [{ item_name: "Pro Plan", price: 29.99 }],
})

// Server-side: GA4 Data API
import { BetaAnalyticsDataClient } from "@google-analytics/data"

const analytics = new BetaAnalyticsDataClient()
const [response] = await analytics.runReport({
  property: "properties/123456789",
  dateRanges: [{ startDate: "30daysAgo", endDate: "today" }],
  metrics: [{ name: "activeUsers" }, { name: "sessions" }],
  dimensions: [{ name: "country" }],
})