Crear un evento de Google Tag Manager para WooCommerce - VANTAG.es

Crear un evento en Google Tag Manager (GTM) para WooCommerce es fundamental para rastrear las transacciones y optimizar el rendimiento de tu tienda online. Este proceso te permitirá obtener datos valiosos sobre el comportamiento de tus clientes y el rendimiento de tus productos. A continuación, te explicaremos detalladamente cómo configurar eventos en GTM para WooCommerce, tanto si dispones de una página de “Thank You” como si no.

Evento en WooCommerce con “Thank You” Page

1. Instalar y configurar Google Tag Manager

El primer paso es asegurarte de tener Google Tag Manager correctamente configurado en tu sitio WooCommerce. Sigue estos pasos:

Crea una cuenta en Google Tag Manager si aún no tienes una.
Crea un nuevo contenedor para tu sitio web.
Obtén el código de instalación de GTM.
Inserta el código de GTM en tu sitio, generalmente en el archivo header.php de tu tema de WordPress, justo antes del cierre de la etiqueta head.

Es crucial que el código se coloque correctamente para que GTM funcione en todas las páginas de tu sitio.

2. Crear una variable de datos en WooCommerce

Para enviar datos de transacciones a GTM, necesitas agregar un código JavaScript personalizado en tu tema de WordPress. Lo ideal es hacerlo en el archivo functions.php o mediante un plugin de inserción de códigos. Aquí tienes un ejemplo detallado:


	add_action( 'woocommerce_thankyou', 'custom_transaction_data' );
	function custom_transaction_data( $order_id ) {
		$order = wc_get_order( $order_id );
		?>
		<script>
			window.dataLayer = window.dataLayer || [];
			window.dataLayer.push({
				'event': 'transaction',
				'transactionId': '<?php echo $order->get_order_number(); ?>',
				'transactionTotal': '<?php echo $order->get_total(); ?>',
				'transactionProducts': [
					<?php
					foreach ( $order->get_items() as $item ) {
						$product = $item->get_product();
						echo "{";
						echo "'name': '" . $product->get_name() . "',";
						echo "'sku': '" . $product->get_sku() . "',";
						echo "'price': '" . $product->get_price() . "',";
						echo "'quantity': '" . $item->get_quantity() . "'";
						echo "},";
					}
					?>
				]
			});
		</script>
		<?php
	}

Este código captura información detallada sobre la transacción, incluyendo el ID de la orden, el total, los impuestos, el envío y detalles de cada producto comprado.

3. Configurar Google Tag Manager

Una vez que tienes el código en tu sitio, necesitas configurar GTM para capturar y procesar estos datos:

Crear un trigger de evento:

Ve a la sección de Triggers en GTM.
Crea un nuevo trigger.
Selecciona “Evento personalizado” como tipo de trigger.
En el campo “Nombre del evento”, ingresa “transaction” (debe coincidir con el nombre del evento en tu código).
Configura el trigger para que se active en todas las páginas.

Crear un tag para el seguimiento de transacciones:

Ve a la sección de Tags en GTM.
Crea una nueva tag.
Selecciona “Google Analytics: Universal Analytics” como tipo de tag.
Configura la tag de la siguiente manera:
- Tipo de seguimiento: Evento
- Categoría: Ecommerce
- Acción: Compra
- Etiqueta: Transaction ID
- Valor: Transaction Total
En la sección de “Más configuraciones”, habilita “Habilitar anulación de configuración de eCommerce” y selecciona “Ecommerce mejorado”.
En la sección de activación, selecciona el trigger que creaste anteriormente.

4. Pruebas y publicación

Antes de publicar tus cambios, es crucial realizar pruebas exhaustivas:

Utiliza el modo de vista previa de GTM para verificar que los datos se envían correctamente al dataLayer.
Realiza una compra de prueba en tu tienda y verifica que los datos de la transacción aparecen en el dataLayer.
Comprueba que la tag de Google Analytics se dispara correctamente cuando ocurre una transacción.
Verifica que no hay errores en la consola del navegador relacionados con GTM o tu código personalizado.

Si todo funciona correctamente, publica los cambios en GTM.

5. Verificación en Google Analytics

Después de publicar tus cambios, es importante verificar que los datos se están registrando correctamente en Google Analytics:

Ve a la sección de Ecommerce en Google Analytics.
Comprueba que las transacciones se están registrando correctamente.
Verifica que los datos de productos, ingresos y otros detalles de la transacción son precisos.

Evento en WooCommerce sin “Thank You” Page

Si tu tienda WooCommerce no tiene una página de “Thank You” específica, puedes adaptar el enfoque anterior para capturar las transacciones en cualquier página donde se complete un pedido.

1. Rastrear el evento woocommerce_thankyou en todas las páginas

Modifica el código anterior para enviar la información al dataLayer en todas las páginas, pero solo cuando se haya completado un pedido.

2. Añadir el código en el functions.php

Inserta el siguiente código en el archivo functions.php de tu tema o en un plugin personalizado:


	add_action( 'wp_footer', 'custom_transaction_data' );
	function custom_transaction_data() {
		if (is_order_received_page()) {
			global $wp;
			$order_id = wc_get_order_id_by_order_key( sanitize_text_field( $_GET['key'] ) );
			$order = wc_get_order( $order_id );
			
			if ($order) {
				?>
				<script>
					window.dataLayer = window.dataLayer || [];
					window.dataLayer.push({
						'event': 'transaction',
						'transactionId': '<?php echo $order->get_order_number(); ?>',
						'transactionTotal': '<?php echo $order->get_total(); ?>',
						'transactionProducts': [
							<?php
							foreach ( $order->get_items() as $item ) {
								$product = $item->get_product();
								echo "{";
								echo "'name': '" . $product->get_name() . "',";
								echo "'sku': '" . $product->get_sku() . "',";
								echo "'price': '" . $product->get_price() . "',";
								echo "'quantity': '" . $item->get_quantity() . "'";
								echo "},";
							}
							?>
						]
					});
				</script>
				<?php
			}
		}
	}

Este código verifica si el usuario está en la página de confirmación de pedido antes de enviar los datos al dataLayer.

3. Configurar Google Tag Manager

La configuración en GTM será similar a la descrita anteriormente:

Crear un trigger de evento:

Crea un trigger personalizado que se dispare cuando el evento ‘transaction’ sea detectado en el dataLayer.
Asegúrate de que el nombre del evento coincida exactamente con el que usaste en tu código PHP.

Crear una tag para Google Analytics:

Configura una tag en GTM de tipo Google Analytics - Universal Analytics.
Configura la tag para enviar un evento de transacción cuando el trigger se dispare.
Asegúrate de incluir todos los detalles relevantes de la transacción en la configuración de la tag.

4. Pruebas y publicación

Es crucial realizar pruebas exhaustivas antes de publicar:

Usa el modo de vista previa de GTM para verificar que el evento se dispara correctamente.
Realiza una compra de prueba y verifica que todos los datos de la transacción se envían correctamente al dataLayer.
Comprueba que la tag de Google Analytics se activa y envía los datos correctamente.
Verifica que no hay errores en la consola del navegador.

Una vez que hayas confirmado que todo funciona correctamente, publica los cambios en GTM.

5. Verificación en Google Analytics

Después de publicar, verifica que los datos se están registrando correctamente en Google Analytics:

Revisa la sección de Ecommerce en Google Analytics.
Comprueba que las transacciones se están registrando con todos los detalles correctos.
Verifica que los datos de productos, ingresos, impuestos y envío son precisos.

Consideraciones adicionales

Seguridad: Asegúrate de escapar adecuadamente todos los datos que se envían al dataLayer para prevenir inyecciones de código malicioso.
Rendimiento: El código JavaScript adicional puede afectar ligeramente el tiempo de carga de la página. Considera usar técnicas de optimización si notas un impacto significativo.
Privacidad: Asegúrate de cumplir con las regulaciones de privacidad como GDPR al recopilar y procesar datos de transacciones.
Mantenimiento: Actualiza regularmente tu configuración de GTM y el código personalizado para asegurarte de que sigue funcionando correctamente con las nuevas versiones de WooCommerce y WordPress.

Configurar eventos de Google Tag Manager para WooCommerce puede parecer complejo al principio, pero ofrece una gran flexibilidad y potencial para el seguimiento detallado de las transacciones en tu tienda online. Con esta configuración, podrás rastrear las ventas dinámicamente en WooCommerce usando Google Tag Manager, sin necesidad de plugins adicionales. Esto te permitirá obtener insights valiosos sobre el comportamiento de compra de tus clientes y optimizar tu estrategia de ecommerce basándote en datos precisos y detallados. Recuerda siempre probar exhaustivamente cualquier cambio antes de implementarlo en tu sitio de producción, y considera consultar con un desarrollador o especialista en analytics si tienes dudas o necesitas una implementación más compleja.