Google Analytics 4 en WordPress: GA4, GTM y consentimiento

La analítica es la base de toda estrategia digital. Pero la forma de añadir Google Analytics a WordPress ha cambiado drásticamente a lo largo de los años. Antes pegábamos un simple script _gaq.push. Hoy, en la era de GA4, el RGPD y Consent Mode v2, las cosas son significativamente más complejas.

Descubre más sobre servicios de desarrollo WordPress en WPPoland. Esta guía te llevará a través de todos los métodos de integración de GA4 con WordPress, desde los más sencillos hasta los más avanzados, incluyendo requisitos legales y las mejores prácticas de 2026.

#Añadir Google Analytics a WordPress con un plugin

Si no quieres tocar código, usa un plugin. Es el método más simple pero tiene limitaciones.

#Site Kit de Google como plugin de GA4

Ventajas:

• Producto oficial de Google
• Muestra estadísticas directamente en el panel de WP
• Integración automática con Search Console, PageSpeed Insights
• Configuración más fácil (unos pocos clics)

Desventajas:

• Control limitado de etiquetas
• Sin opciones de seguimiento avanzado
• Puede entrar en conflicto con otros plugins

Instalación:

1. Plugins > Añadir nuevo > “Site Kit”
2. Activa y conecta con tu cuenta de Google
3. Selecciona los servicios a conectar (Analytics, Search Console)
4. Listo

#ID de medición de GA4 en Rank Math o Yoast SEO

Muchos plugins de SEO tienen opciones integradas para el ID de seguimiento. Buena opción si ya usas uno de estos plugins.

RankMath:

• RankMath > Configuración general > Analytics
• Pega el Measurement ID (G-XXXXXXX)

#Configurar GA4 con Google Tag Manager en WordPress

Este es el método recomendado en 2026. En lugar de añadir GA4 directamente, añade un contenedor GTM que gestióne todas las etiquetas.

#Ventajas de utilizar Google Tag Manager

1. Panel de gestión centralizado: Todas las etiquetas (GA4, Facebook Pixel, Hotjar, anuncios) en un solo lugar
2. Consent Mode v2: Implementación sencilla requerida por la legislación de la UE
3. Sin edición de código: Cambios sin modificar archivos del tema
4. Depuración: Modo de vista previa integrado
5. Versionado: Historial de cambios y capacidad de reversión

#Cómo añadir el contenedor de GTM a WordPress

1. Crear contenedor GTM:

• Ve a tagmanager.google.com
• Crea una cuenta y un contenedor (Web)
• Copia el código del contenedor (GTM-XXXXXXX)

2. Pegar código en WordPress:

// En functions.php o mu-plugin
add_action('wp_head', 'add_gtm_head', 1);
add_action('wp_body_open', 'add_gtm_body', 1);

function add_gtm_head() {
    ?>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-YOUR-ID');</script>
    <!-- End Google Tag Manager -->
    <?php
}

function add_gtm_body() {
    ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-YOUR-ID"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <?php
}

3. Configurar etiqueta GA4 en GTM:

• En GTM: Etiquetas > Nueva > Configuración GA4
• Pega el Measurement ID (G-XXXXXXX)
• Activador: Todas las páginas
• Publicar

#Cómo configurar Consent Mode v2 en GTM

Desde marzo de 2024, Consent Mode v2 es obligatorio en Europa. Sin el, Google no procesara los datos de tu sitio.

Que hace:

• Bloquea las cookies de analítica/publicidad por defecto
• Tras la aceptación del usuario: seguimiento completo
• Tras el rechazo: pings anónimos (datos modelados)

Implementación con GTM:

1. Instala un banner de cookies (Cookiebot, Complianz, CookieYes)
2. Configura la integración con GTM
3. Establece las etiquetas en “Respetar Estado de Consentimiento”
4. Añade las variables de consentimiento (analytics_storage, ad_storage)

#Insertar el código de GA4 sin plugin

Si quieres evitar plugins y tienes un sitio sencillo, añade el código directamente.

#Código de GA4 en functions.php

add_action('wp_head', 'add_ga4_code', 1);

function add_ga4_code() {
    ?>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR-ID"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-YOUR-ID');
    </script>
    <?php
}

#Código de GA4 con valores por defecto de Consent Mode

add_action('wp_head', 'add_ga4_with_consent', 1);

function add_ga4_with_consent() {
    ?>
    <script>
      // Estado de consentimiento por defecto - todo bloqueado
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}

      gtag('consent', 'default', {
        'analytics_storage': 'denied',
        'ad_storage': 'denied',
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'wait_for_update': 500
      });
    </script>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR-ID"></script>
    <script>
      gtag('js', new Date());
      gtag('config', 'G-YOUR-ID');
    </script>
    <?php
}

#Seguimiento de GA4 del lado del servidor con sGTM

En 2026, los bloqueadores de anuncios y el ITP (Intelligent Tracking Prevention) limitan significativamente la efectividad del seguimiento del lado del clientes. La solución es el Server-Side Tracking.

#Cómo funciona el seguimiento del lado del servidor

1. El script en la página envía datos a tu servidor (no a Google)
2. Tu servidor reenvía los datos a Google Analytics
3. Los bloqueadores no detectan la conexión con Google

#Opciones de alojamiento para GTM del lado del servidor

1. Contenedor Server-Side de Google Tag Manager:

• Requiere Cloud Run (GCP) u otro alojamiento
• Coste: ~50-100$/mes para tráfico medio
• Control total de los datos

2. Stape.io (SaaS):

• sGTM alojado
• Configuración más fácil
• Desde 20$/mes

#Ventajas del seguimiento del lado del servidor

• Resistente a bloqueadores de anuncios: ~95% de datos vs ~70%
• Mayor precisión: Menos perdidas de conversiones
• Cookies de primera parte: Mayor vida útil de las cookies
• Privacidad: Los datos pasan por tu servidor

#Seguimiento de comercio electrónico de WooCommerce en GA4

Si tienes una tienda, necesitas Enhanced E-commerce.

#Seguimiento de WooCommerce con GTM

1. Data Layer: WooCommerce envía datos de productos, carrito y compras
2. Etiquetas de E-commerce GA4: Configuración en GTM
3. Eventos: view_item, add_to_cart, purchase

#Plugins de WooCommerce para comercio electrónico en GA4

GTM4WP (Premium) o Monster Insights (Pro):

• Integración automática del Data Layer
• Plantillas de etiquetas predefinidas
• Seguimiento de conversiones sin programación

#Cómo comprobar que GA4 funciona en WordPress

#Herramientas para probar GA4

1. Google Tag Assistant: Extension de Chrome
2. Modo de vista previa de GTM: Modo preview
3. DebugView de GA4: Tiempo real en GA4
4. Pestaña Network: Comprobar si las solicitudes se envían

#Problemas comunes con el seguimiento de GA4

1. Seguimiento doble:

• Síntoma: 200% de páginas vistas
• Causa: Dos etiquetas GA4 (p. ej., Site Kit + GTM)
• Solución: Eliminar una fuente

2. Sin datos:

• Síntoma: 0 usuarios
• Causa: Consentimiento bloqueado / ID incorrecto
• Solución: Comprobar Consent Mode y Measurement ID

3. Incumplimiento del RGPD:

• Síntoma: Seguimiento antes del consentimiento
• Causa: Sin Consent Mode
• Solución: Implementar Consent Mode v2

#Carga directa de gtag.js frente a Google Tag Manager

En la ingeniería moderna de WordPress, la medición del comportamiento de los usuarios mediante Google Analytics 4 exige una arquitectura bien planificada. En el pasado, los desarrolladores solían pegar fragmentos de código directamente en las plantillas de cabecera o recurrian a plugins que ocultaban la lógica de medición. Dado que métricas de rendimiento como Interaction to Next Paint (INP) y Largest Contentful Paint (LCP) influyen de forma directa en el posicionamiento orgánico, y las normativas europeas exigen el consentimiento informado antes de acceder al almacenamiento del dispositivo, la medición en el cliente requiere estándares técnicos rigurosos.

La elección entre la carga directa de gtag.js y el despliegue de Google Tag Manager constituye la primera gran decision de diseño. La integración directa de gtag.js utiliza una libreria compacta que se comunica sin intermediarios con los servidores de medición de Google. Al no requerir la compilación de contenedores ni la evaluación continua de variables en tiempo real, genera un tiempo de bloqueo del hilo principal sensiblemente menor que un contenedor completo de GTM. Cuando una plataforma solo necesita registrar páginas vistas, conversiones habituales y clics salientes, la implementación directa mediante gtag.js ofrece el mejor perfil de velocidad.

Por el contrario, Google Tag Manager sigue siendo el estándar para organizaciones que gestionan atribución multicanal y pruebas continuas de marketing. Tag Manager introduce una capa de abstracción donde etiquetas, activadores y variables procesan cada evento antes de enviarlo a herramientas externas. Aunque GTM añade entre 30 y 45 kilobytes de JavaScript comprimido y demanda tiempo de computación en dispositivos móviles, desacopla las operaciones de medición del ciclo de despliegue de software. Los equipos de marketing pueden activar píxeles publicitarios, modificar activadores y registrar nuevos parámetros sin necesidad de modificar el código fuente del tema.

Comparación de factores operativos entre ambas arquitecturas:

En portales editoriales con alto tráfico y tiendas headless donde las Core Web Vitals determinan el ranking, la implementación directa de gtag.js reduce el Total Blocking Time (TBT). En tiendas online con numerosas herramientas publicitarias, GTM aporta el control operativo necesario.

#Cola de scripts de WordPress con wp_enqueue_script y wp_add_inline_script

Un problema recurrente en instalaciones de WordPress consiste en insertar scripts de medición directamente en las plantillas o mediante salidas HTML sin filtrar. Imprimir etiquetas de script dentro de los archivos de cabecera rompe el árbol de dependencias del gestor de contenidos, dificulta la ejecución ordenada de los hooks de acción y bloquea la optimización automatica de atributos por parte de plugins de rendimiento o seguridad.

El estándar profesional exige utilizar el sistema de encolado de WordPress. Mediante la funcion wp_enqueue_script, el sistema registra la libreria oficial de Google, mientras que wp_add_inline_script asocia los comandos de configuración y el estado de consentimiento directamente al script principal. Desde la version 6.3 de WordPress, los desarrolladores pueden declarar formalmente estrategias de carga en el array $args de wp_register_script y wp_enqueue_script, lo que permite configurar de forma nativa strategy => 'async' o strategy => 'defer'.

El siguiente ejemplo muestra la integración profesional de scripts con gestión explícita de dependencias y carga asíncrona:

add_action('wp_enqueue_scripts', function (): void {
    $measurement_id = 'G-XXXXXXXXXX';

    // Registro de la libreria de Google con estrategia asincrona nativa
    wp_register_script(
        'google-tag-platform',
        'https://www.googletagmanager.com/gtag/js?id=' . rawurlencode($measurement_id),
        [],
        null,
        [
            'strategy'  => 'async',
            'in_footer' => false,
        ]
    );

    // Preparacion de la configuracion inline
    $inline_config = sprintf(
        'window.dataLayer = window.dataLayer || [];' . "\n" .
        'function gtag(){dataLayer.push(arguments);}' . "\n" .
        'gtag("js", new Date());' . "\n" .
        'gtag("config", "%s", {' . "\n" .
        '  send_page_view: true,' . "\n" .
        '  anonymize_ip: true,' . "\n" .
        '  cookie_flags: "SameSite=None;Secure"' . "\n" .
        '});',
        esc_js($measurement_id)
    );

    // Asociacion del script de configuracion al identificador registrado
    wp_add_inline_script('google-tag-platform', $inline_config, 'after');
    wp_enqueue_script('google-tag-platform');
}, 10);

Cuando se utiliza Google Tag Manager en lugar de gtag.js directo, el proceso sigue las mismas pautas de ingeniería. Aunque la documentación histórica de GTM sugeria pegar el script inmediatamente tras la etiqueta head, los temas modernos de WordPress exponen el hook wp_body_open, permitiendo insertar el iframe de reserva en el body de manera estandarizada.

add_action('wp_head', function (): void {
    $container_id = 'GTM-XXXXXXX';
    ?>
    <script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','<?php echo esc_js($container_id); ?>');
    </script>
    <?php
}, 1);

add_action('wp_body_open', function (): void {
    $container_id = 'GTM-XXXXXXX';
    ?>
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo esc_attr($container_id); ?>"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <?php
}, 1);

Asignar la prioridad 1 al hook asegura que el objeto dataLayer se cree antes de que otros plugins o elementos interactivos del tema intenten registrar eventos.

#Arquitectura de seguimiento del lado del servidor con Cloudflare Zaraz y Cloud Run

La ejecución exclusiva de etiquetas en el navegador presenta limitaciones estructurales. Las medidas de privacidad de navegadores como Apple WebKit ITP y Firefox ETP limitan la duración de las cookies del cliente a siete días o tan solo 24 horas cuando el tráfico incluye parámetros de campana. De forma simultanea, los bloqueadores de publicidad interceptan peticiones dirigidas a los servidores de Google, causando perdidas de información de entre el 15 y el 30 por ciento en audiencias digitales avanzadas.

El seguimiento del lado del servidor resuelve estos obstáculos mediante una arquitectura proxy de origen directo (first-party). En lugar de que el navegador envie datos a servidores externos de Google, canaliza las solicitudes hacia un subdominio propio de la aplicación (por ejemplo, metricas.tudominio.es). El contenedor del servidor inspecciona los datos recibidos, elimina cabeceras sensibles, enriquece los parámetros con información contextual y reenvía los eventos autorizados a Google Analytics mediante APIs seguras de servidor a servidor.

Los equipos de ingeniería optan mayoritariamente por dos arquitecturas en WordPress:

1. Contenedores en Google Cloud Run: Google ofrece una imagen oficial de contenedor para Server-side Tag Manager (sGTM). Al alojarlo en GCP Cloud Run detrás de un balanceador de carga, el sistema escala horizontalmente según el volumen de peticiones. Esta opción ofrece compatibilidad absoluta con plantillas de la comunidad sGTM, control total sobre las reglas de transformación y exportación nativa hacia BigQuery. El coste mensual de infraestructura suele oscilar entre 40 y 120 dolares según el tráfico.

2. Cloudflare Zaraz y ejecución en el edge: Si el sitio ya utiliza la red CDN de Cloudflare, la herramienta Cloudflare Zaraz o los Workers pueden recopilar eventos en el edge de la red. Zaraz procesa las reglas de medición en los nodos mas cercanos al usuario sin descargar librerias JavaScript de terceros en el navegador. Aunque el entorno de configuración difiere de GTM, la ejecución en el edge elimina el consumo de CPU en el cliente y protege el Total Blocking Time.

Tabla comparativa entre la medición en cliente y del lado del servidor:

#Hashes de script para Content Security Policy y gestión de nonce

La implantacion de herramientas analiticas en plataformas corporativas requiere su integración con una política de Content Security Policy (CSP). Una cabecera CSP estricta bloquea posibles ataques Cross-Site Scripting (XSS) al definir con precision los origenes de script autorizados, prohibir el código inline sin validar ('unsafe-inline') y exigir la comprobación criptográfica de cada elemento ejecutado.

Al iniciarse, tanto Google Tag Manager como gtag.js generan etiquetas de script de forma dinámica. En un entorno con CSP estricta, el navegador denegara su ejecución a menos que se proporcionen hashes criptograficos o tokens nonce.

#Hashes criptograficos sha256

Para scripts estáticos insertados en la cabecera que no varían entre sesiones, es posible calcular un hash SHA-256 del contenido del script e incluirlo en la directiva script-src:

Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-abcdef123456...' https://www.googletagmanager.com; connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com;

Aunque los hashes sha256 son útiles para configuraciones fijas de gtag, no resultan viables para contenedores de Google Tag Manager que inyectan nuevas etiquetas publicitarias y herramientas externas de manera dinámica.

#Tokens nonce dinamicos mediante filtros de WordPress

El estándar habitual para utilizar GTM con una CSP estricta es la generación de un token criptográfico nonce. El servidor genera una cadena aleatoria y única para cada petición HTTP. Este valor se declara en la cabecera CSP y se asigna como atributo a cada etiqueta de script valida.

En WordPress, la creación de tokens nonce se implementa mediante ganchos durante el procesamiento de la petición:

function get_http_csp_nonce(): string {
    static $nonce = null;
    if ($nonce === null) {
        $nonce = base64_encode(random_bytes(16));
    }
    return $nonce;
}

// Inyeccion de cabecera CSP con token nonce dinamico
add_action('send_headers', function (): void {
    $nonce = get_http_csp_nonce();
    $csp = "default-src 'self'; " .
           "script-src 'self' 'nonce-{$nonce}' 'strict-dynamic' https: http:; " .
           "connect-src 'self' https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com; " .
           "img-src 'self' https://*.google-analytics.com https://*.googletagmanager.com;";
    header("Content-Security-Policy: {$csp}");
});

// Asignacion del nonce al script de GTM
add_action('wp_head', function (): void {
    $nonce = get_http_csp_nonce();
    $gtm_id = 'GTM-XXXXXXX';
    ?>
    <script nonce="<?php echo esc_attr($nonce); ?>">
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','<?php echo esc_js($gtm_id); ?>');
    </script>
    <?php
}, 1);

La directiva 'strict-dynamic' permite que los scripts autorizados mediante el token nonce generen scripts secundarios sin necesidad de autorizar cada etiqueta individual mediante una lista de hashes estáticos.

#Implementación de Consent Mode v2 y señales por defecto

Desde marzo de 2024, Google exige el uso de Consent Mode v2 para todo el tráfico procedente del Espacio Económico Europeo (EEE) para mantener las funciones de medición de audiencias y modelado de conversiones en Google Ads y GA4. Consent Mode v2 introduce dos parámetros adicionales junto a los indicadores habituales de almacenamiento: ad_user_data y ad_personalization.

Desde una perspectiva técnica, el estado de consentimiento por defecto debe declararse en la capa de datos dataLayer antes de que cualquier script analitico se descargue o comience su ejecución. Si el comando por defecto se ejecuta después de cargar gtag.js, las etiquetas podrian leer almacenamiento local antes de la elección del usuario, contraviniendo el RGPD y la directiva ePrivacy.

Los cuatro parámetros principales del modo de consentimiento son:

1. analytics_storage: Determina el acceso al almacenamiento local (cookies analiticas) para generar estadisticas.
2. ad_storage: Controla el almacenamiento de cookies para medir el impacto de la publicidad.
3. ad_user_data: Determina si los datos identificables del usuario (como correos con hash) pueden enviarse a Google con fines publicitarios.
4. ad_personalization: Controla el uso de eventos para campanas de remarketing y personalización.

El orden de ejecución adecuado en WordPress requiere emitir el estado denegado en la fase inicial de carga:

add_action('wp_head', function (): void {
    ?>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}

    // Declaracion del consentimiento por defecto antes de cargar librerias
    gtag('consent', 'default', {
      'analytics_storage': 'denied',
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'wait_for_update': 500
    });

    // Envio opcional de identificadores en la URL sin almacenamiento
    gtag('set', 'url_passthrough', true);
    gtag('set', 'ads_data_redaction', true);
    </script>
    <?php
}, 0);

Cuando el visitante define sus preferencias en una plataforma de gestión de consentimiento certificada (como Cookiebot, Complianz o CookieYes), la CMP envia la actualización correspondiente:

gtag('consent', 'update', {
  'analytics_storage': 'granted',
  'ad_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted'
});

En la modalidad Advanced Consent Mode, las etiquetas envían señales anonimizadas sin acceder a cookies para alimentar los modelos predictivos de Google. En la modalidad Basic Consent Mode, la comunicación con los servidores de medición se bloquea por completo hasta recibir la aprobación explícita del usuario.

#Envio de eventos dataLayer para comercio electrónico en WooCommerce

La medición de compras y conversiones en WooCommerce exige enviar eventos estructurados al dataLayer según el esquema de Enhanced E-commerce de GA4. Las instalaciones básicas de WooCommerce no incluyen esta capa de datos de forma nativa. Extraer información directamente del diseño visual (DOM scraping) ocasiona fallos de registro tras cualquier actualización del tema.

El método recomendado consiste en generar e insertar los eventos de datos durante las etapas principales del proceso de compra: view_item_list, view_item, add_to_cart, begin_checkout y purchase.

El evento purchase resulta fundamental para cuadrar la facturación y atribuir ventas. Debe ejecutarse exactamente una vez por cada pedido completado. La implementación adecuada emplea el hook woocommerce_thankyou, valida la información del pedido y guarda un indicador en los metadatos de la orden para evitar duplicidades si el cliente recarga la pagina de confirmación:

add_action('woocommerce_thankyou', function (int $order_id): void {
    if (!$order_id) {
        return;
    }

    $order = wc_get_order($order_id);
    if (!$order) {
        return;
    }

    // Proteccion frente a duplicacion de transacciones al recargar la pagina
    if ($order->get_meta('_ga4_purchase_tracked')) {
        return;
    }

    $items = [];
    $item_index = 0;

    foreach ($order->get_items() as $item) {
        $product = $item->get_product();
        if (!$product) {
            continue;
        }

        $items[] = [
            'item_id'        => (string) $product->get_sku() ?: (string) $product->get_id(),
            'item_name'      => $product->get_name(),
            'price'          => (float) $order->get_item_subtotal($item, false, false),
            'quantity'       => (int) $item->get_quantity(),
            'index'          => $item_index++,
            'item_category'  => wp_strip_all_tags(wc_get_product_category_list($product->get_id(), ', ')),
        ];
    }

    $payload = [
        'event'     => 'purchase',
        'ecommerce' => [
            'transaction_id' => (string) $order->get_order_number(),
            'value'          => (float) $order->get_total(),
            'tax'            => (float) $order->get_total_tax(),
            'shipping'       => (float) $order->get_shipping_total(),
            'currency'       => $order->get_currency(),
            'items'          => $items,
        ],
    ];

    // Registro del pedido en la base de datos para evitar duplicados
    $order->update_meta_data('_ga4_purchase_tracked', '1');
    $order->save();

    ?>
    <script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ ecommerce: null }); // Limpieza del estado previo de comercio electronico
    window.dataLayer.push(<?php echo wp_json_encode($payload); ?>);
    </script>
    <?php
}, 20);

Para las acciones del carrito mediante AJAX, WooCommerce ofrece eventos de jQuery (added_to_cart, removed_from_cart). Los temas que utilizan bloques de carrito o arquitecturas desacopladas basadas en REST API deben emitir eventos DOM con el objeto de datos de GA4 para asegurar la continuidad de la medición.

#Core Web Vitals e impacto de las etiquetas analiticas en el rendimiento

Las librerias analiticas tienen un impacto directo en el rendimiento percibido y en la velocidad de navegación. Una configuración descuidada puede empeorar las métricas Core Web Vitals, provocando perdidas de posicionamiento y fricción en la experiencia de usuario.

Riesgos técnicos principales:

1. Saturacion del hilo principal (degradación de INP): Cuando múltiples etiquetas de marketing ejecutan consultas sincronas al DOM o escuchan eventos en toda la pagina, las respuestas a los clics del usuario se demoran. Si un usuario interactua mientras GTM procesa variables pesadas en JavaScript, el tiempo de Interaction to Next Paint supera los 200 milisegundos recomendados.
2. Competencia de recursos en Largest Contentful Paint (LCP): Los scripts insertados en la cabecera que bloquean el renderizado retrasan la interpretación del CSS y la descarga de la imagen principal.
3. Fugas de memoria en aplicaciones headless y SPA: En sitios desacoplados, no limpiar los escuchadores de eventos al cambiar de vista provoca un consumo desmedido de memoria y lentitud en dispositivos móviles.

Puntos clave de optimización:

Mediante una estrategia de carga asíncrona, la definición correcta de Consent Mode, la medición del lado del servidor y una estructura sólida de dataLayer, los sitios de WordPress obtienen métricas precisas sin comprometer la velocidad ni la seguridad.

#Resumen

Recomendación 2026:

• Sitios pequeños: Site Kit o RankMath
• Negocios/Agencias: GTM + Consent Mode v2
• E-commerce/Enterprise: sGTM Server-Side

No dejes que tus datos de analítica estén incompletos. Invierte en una configuración adecuada: es la base de todas las decisiones de marketing.