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 ingenieria moderna de WordPress, la medicion del comportamiento de los usuarios mediante Google Analytics 4 exige una arquitectura bien planificada. En el pasado, los desarrolladores solian pegar fragmentos de codigo directamente en las plantillas de cabecera o recurrian a plugins que ocultaban la logica de medicion. Dado que metricas de rendimiento como Interaction to Next Paint (INP) y Largest Contentful Paint (LCP) influyen de forma directa en el posicionamiento organico, y las normativas europeas exigen el consentimiento informado antes de acceder al almacenamiento del dispositivo, la medicion en el cliente requiere estandares tecnicos rigurosos.

La eleccion entre la carga directa de gtag.js y el despliegue de Google Tag Manager constituye la primera gran decision de diseno. La integracion directa de gtag.js utiliza una libreria compacta que se comunica sin intermediarios con los servidores de medicion de Google. Al no requerir la compilacion de contenedores ni la evaluacion 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 implementacion directa mediante gtag.js ofrece el mejor perfil de velocidad.

Por el contrario, Google Tag Manager sigue siendo el estandar para organizaciones que gestionan atribucion multicanal y pruebas continuas de marketing. Tag Manager introduce una capa de abstraccion donde etiquetas, activadores y variables procesan cada evento antes de enviarlo a herramientas externas. Aunque GTM anade entre 30 y 45 kilobytes de JavaScript comprimido y demanda tiempo de computacion en dispositivos moviles, desacopla las operaciones de medicion del ciclo de despliegue de software. Los equipos de marketing pueden activar pixeles publicitarios, modificar activadores y registrar nuevos parametros sin necesidad de modificar el codigo fuente del tema.

Comparacion de factores operativos entre ambas arquitecturas:

En portales editoriales con alto trafico y tiendas headless donde las Core Web Vitals determinan el ranking, la implementacion 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 medicion directamente en las plantillas o mediante salidas HTML sin filtrar. Imprimir etiquetas de script dentro de los archivos de cabecera rompe el arbol de dependencias del gestor de contenidos, dificulta la ejecucion ordenada de los hooks de accion y bloquea la optimizacion automatica de atributos por parte de plugins de rendimiento o seguridad.

El estandar 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 configuracion 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 integracion profesional de scripts con gestion explicita de dependencias y carga asincrona:

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 ingenieria. Aunque la documentacion historica 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 ejecucion exclusiva de etiquetas en el navegador presenta limitaciones estructurales. Las medidas de privacidad de navegadores como Apple WebKit ITP y Firefox ETP limitan la duracion de las cookies del cliente a siete dias o tan solo 24 horas cuando el trafico incluye parametros de campana. De forma simultanea, los bloqueadores de publicidad interceptan peticiones dirigidas a los servidores de Google, causando perdidas de informacion de entre el 15 y el 30 por ciento en audiencias digitales avanzadas.

El seguimiento del lado del servidor resuelve estos obstaculos 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 aplicacion (por ejemplo, metricas.tudominio.es). El contenedor del servidor inspecciona los datos recibidos, elimina cabeceras sensibles, enriquece los parametros con informacion contextual y reenvia los eventos autorizados a Google Analytics mediante APIs seguras de servidor a servidor.

Los equipos de ingenieria 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 detras de un balanceador de carga, el sistema escala horizontalmente segun el volumen de peticiones. Esta opcion ofrece compatibilidad absoluta con plantillas de la comunidad sGTM, control total sobre las reglas de transformacion y exportacion nativa hacia BigQuery. El coste mensual de infraestructura suele oscilar entre 40 y 120 dolares segun el trafico.

2. Cloudflare Zaraz y ejecucion 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 medicion en los nodos mas cercanos al usuario sin descargar librerias JavaScript de terceros en el navegador. Aunque el entorno de configuracion difiere de GTM, la ejecucion en el edge elimina el consumo de CPU en el cliente y protege el Total Blocking Time.

Tabla comparativa entre la medicion en cliente y del lado del servidor:

#Hashes de script para Content Security Policy y gestion de nonce

La implantacion de herramientas analiticas en plataformas corporativas requiere su integracion con una politica 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 codigo inline sin validar ('unsafe-inline') y exigir la comprobacion criptografica de cada elemento ejecutado.

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

#Hashes criptograficos sha256

Para scripts estaticos insertados en la cabecera que no varian 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 utiles para configuraciones fijas de gtag, no resultan viables para contenedores de Google Tag Manager que inyectan nuevas etiquetas publicitarias y herramientas externas de manera dinamica.

#Tokens nonce dinamicos mediante filtros de WordPress

El estandar habitual para utilizar GTM con una CSP estricta es la generacion de un token criptografico nonce. El servidor genera una cadena aleatoria y unica para cada peticion HTTP. Este valor se declara en la cabecera CSP y se asigna como atributo a cada etiqueta de script valida.

En WordPress, la creacion de tokens nonce se implementa mediante ganchos durante el procesamiento de la peticion:

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

#Implementacion de Consent Mode v2 y senales por defecto

Desde marzo de 2024, Google exige el uso de Consent Mode v2 para todo el trafico procedente del Espacio Economico Europeo (EEE) para mantener las funciones de medicion de audiencias y modelado de conversiones en Google Ads y GA4. Consent Mode v2 introduce dos parametros adicionales junto a los indicadores habituales de almacenamiento: ad_user_data y ad_personalization.

Desde una perspectiva tecnica, 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 ejecucion. Si el comando por defecto se ejecuta despues de cargar gtag.js, las etiquetas podrian leer almacenamiento local antes de la eleccion del usuario, contraviniendo el RGPD y la directiva ePrivacy.

Los cuatro parametros 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 personalizacion.

El orden de ejecucion 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 gestion de consentimiento certificada (como Cookiebot, Complianz o CookieYes), la CMP envia la actualizacion 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 envian señales anonimizadas sin acceder a cookies para alimentar los modelos predictivos de Google. En la modalidad Basic Consent Mode, la comunicacion con los servidores de medicion se bloquea por completo hasta recibir la aprobacion explícita del usuario.

#Envio de eventos dataLayer para comercio electronico en WooCommerce

La medicion de compras y conversiones en WooCommerce exige enviar eventos estructurados al dataLayer segun el esquema de Enhanced E-commerce de GA4. Las instalaciones basicas de WooCommerce no incluyen esta capa de datos de forma nativa. Extraer informacion directamente del diseno visual (DOM scraping) ocasiona fallos de registro tras cualquier actualizacion del tema.

El metodo 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 facturacion y atribuir ventas. Debe ejecutarse exactamente una vez por cada pedido completado. La implementacion adecuada emplea el hook woocommerce_thankyou, valida la informacion del pedido y guarda un indicador en los metadatos de la orden para evitar duplicidades si el cliente recarga la pagina de confirmacion:

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

#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 navegacion. Una configuracion descuidada puede empeorar las metricas Core Web Vitals, provocando perdidas de posicionamiento y friccion en la experiencia de usuario.

Riesgos tecnicos principales:

1. Saturacion del hilo principal (degradacion de INP): Cuando multiples 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 interpretacion 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 moviles.

Puntos clave de optimizacion:

Mediante una estrategia de carga asincrona, la definicion correcta de Consent Mode, la medicion del lado del servidor y una estructura solida de dataLayer, los sitios de WordPress obtienen metricas 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.