GA4 DataLayer / GTM

El módulo DataLayer envía automáticamente eventos de ecommerce GA4 a la capa de datos (dataLayer). Es compatible tanto con Google Tag Manager (GTM) como con la integración directa de gtag.js. Los scripts se cargan con el atributo defer para un impacto mínimo en las Web Vitals.

Activación del módulo

Ve a WooCommerce > Polski > Módulos de la tienda y activa GA4 DataLayer / GTM (ID del módulo: datalayer).

Configuración

Los ajustes del módulo se guardan en la opción polski_datalayer. Ve a WooCommerce > Polski > Módulos de la tienda > GA4 DataLayer / GTM.

Ajustes disponibles

Ajuste	Formato	Descripción
`gtm_container_id`	`GTM-XXXXXXX`	Identificador del contenedor de Google Tag Manager
`ga4_measurement_id`	`G-XXXXXXXXXX`	Identificador de medición GA4 (para el modo gtag.js)
`use_sku_as_id`	boolean	Usar el SKU en lugar del ID del producto como `item_id`

Modos de funcionamiento

Google Tag Manager - introduce gtm_container_id. El módulo inyecta el snippet del contenedor GTM (un script en <head> y un noscript en <body>). Los eventos de ecommerce llegan a window.dataLayer.

gtag.js - introduce ga4_measurement_id (sin GTM). El módulo carga el script gtag.js directamente desde Google y envía los eventos mediante gtag('event', ...).

Puedes usar ambos modos a la vez, entonces los eventos llegan tanto al dataLayer (GTM) como directamente a GA4.

Eventos de ecommerce

El módulo envía los siguientes eventos conformes con la especificación GA4 Enhanced Ecommerce:

view_item_list

Visualización de una lista de productos (página de categoría, resultados de búsqueda, página de la tienda).

dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'category_koszulki',
    item_list_name: 'Koszulki',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Koszulka polo',
        item_category: 'Koszulki',
        price: 89.99,
        index: 0
      }
    ]
  }
});

view_item

Visualización de la página de un producto individual.

dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'PLN',
    value: 89.99,
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Koszulka polo',
        item_category: 'Koszulki',
        price: 89.99,
        quantity: 1
      }
    ]
  }
});

add_to_cart

Añadir un producto al carrito. El evento se envía mediante AJAX tras hacer clic en el botón Añadir al carrito (tanto en la página del producto como en la lista).

dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'PLN',
    value: 89.99,
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Koszulka polo',
        item_category: 'Koszulki',
        price: 89.99,
        quantity: 1
      }
    ]
  }
});

remove_from_cart

Eliminar un producto del carrito.

dataLayer.push({
  event: 'remove_from_cart',
  ecommerce: {
    currency: 'PLN',
    value: 89.99,
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Koszulka polo',
        price: 89.99,
        quantity: 1
      }
    ]
  }
});

begin_checkout

Inicio del proceso de compra (llegada a la página de pago).

dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    currency: 'PLN',
    value: 179.98,
    items: [/* productos del carrito */]
  }
});

purchase

Finalización del pedido (página de agradecimiento). El evento se envía solo una vez por pedido (protegido mediante una cookie).

dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: '12345',
    currency: 'PLN',
    value: 179.98,
    tax: 33.55,
    shipping: 9.99,
    items: [/* productos del pedido */]
  }
});

Snippet del contenedor GTM

Tras introducir gtm_container_id, el módulo inyecta automáticamente el código del contenedor GTM:

En la sección <head> (hook wp_head, prioridad 1):

<script defer>
(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.defer=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>

Después de la apertura de <body> (hook wp_body_open):

<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

Rendimiento y Web Vitals

El módulo está optimizado para las Core Web Vitals:

Defer - los scripts de GTM y gtag.js se cargan con el atributo defer, no bloquean el renderizado de la página
Inline dataLayer - los datos de ecommerce se inyectan como JSON en línea, sin peticiones HTTP adicionales
Lazy events - los eventos add_to_cart y remove_from_cart se registran mediante delegación de eventos (un único listener en el documento)
No layout shift - el snippet noscript de GTM tiene dimensiones cero, no provoca CLS

Identificador del producto

De forma predeterminada, como item_id se usa el ID del producto de WooCommerce (post ID). Activa la opción Usar SKU como ID (use_sku_as_id) para enviar en su lugar el SKU del producto.

Cuando un producto no tiene un SKU asignado, el módulo usa el ID del producto como fallback.

Datos de productos variables

Para los productos variables (variable products) el módulo envía los datos de la variación seleccionada:

item_id - el SKU de la variación (o el ID de la variación)
item_variant - el nombre de los atributos seleccionados (p. ej. “Rojo / XL”)
price - el precio de la variación

Hooks

// Modificar los datos del producto antes de enviarlos al dataLayer
add_filter('polski/datalayer/item_data', function (array $item_data, \WC_Product $product): array {
    $item_data['item_brand'] = $product->get_attribute('marka');
    return $item_data;
}, 10, 2);

// Desactivar un evento concreto
add_filter('polski/datalayer/event_enabled', function (bool $enabled, string $event_name): bool {
    if ($event_name === 'view_item_list') {
        return false;
    }
    return $enabled;
}, 10, 2);

// Modificar los datos del evento purchase
add_filter('polski/datalayer/purchase_data', function (array $data, \WC_Order $order): array {
    $data['ecommerce']['coupon'] = implode(',', $order->get_coupon_codes());
    return $data;
}, 10, 2);

Depuración

Modo de vista previa de GTM

Usa Tag Assistant para previsualizar los eventos en tiempo real. Abre Tag Assistant, conéctate al dominio de la tienda y recorre todo el proceso de compra.

Consola del navegador

Comprueba el contenido del dataLayer en la consola:

console.table(window.dataLayer);

GA4 DebugView

En Google Analytics 4 ve a Administrar > DebugView para ver los eventos en tiempo real desde un dispositivo con el modo de depuración activado.

Resolución de problemas

El evento purchase no se dispara - comprueba si la página de agradecimiento está en caché. Desactiva la caché para el endpoint order-received.

No hay eventos add_to_cart - asegúrate de que el AJAX de WooCommerce funciona correctamente. Revisa la consola del navegador en busca de errores de JavaScript.

Eventos purchase duplicados - el módulo establece una cookie polski_datalayer_order_{id} tras enviar el evento. Si la cookie está bloqueada, el evento puede repetirse.

El snippet de GTM no se carga - comprueba si el tema llama a wp_head() y wp_body_open().

Reportar problemas: github.com/wppoland/polski/issues

Esta página tiene únicamente carácter informativo y no constituye asesoramiento legal. Polski for WooCommerce es software de código abierto (GPLv2) proporcionado sin garantía.