Documentación

PrestaShop Google Tag Manager

por 10 de diciembre de 2025 0 Comentarios
Documentación de PrestaShop Google Tag Manager
Documentación completa para el módulo PrestaShop de integración avanzada con Google Tag Manager (cc_ps_googletrack) con soporte para Enhanced Ecommerce, Enhanced Conversions y configuración completa de eventos.

Índice
  1. Introducción
  2. Instalación y requisitos del sistema
  3. Activación del módulo
  4. Configuración básica de GTM
  5. Configuración de eventos
  6. Capa de datos ampliada
  7. Conversiones mejoradas (datos del usuario)
  8. Modo depuración
  9. Registro de eventos
  10. Código de seguimiento propio
  11. Sistema de traducción
  12. Eventos: detalles
  13. Calendario de eventos
  14. Prueba del asistente de etiquetas
  15. Resolución de problemas
  16. PREGUNTAS FRECUENTES

1. introducción
CC Google Tag Manager es un módulo avanzado de PrestaShop que garantiza una integración completa con Google Tag Manager. El módulo realiza un seguimiento automático de todos los eventos clave de Enhanced Ecommerce de acuerdo con los últimos estándares.

Funciones clave del módulo:
  • Integración completa con Google Tag Manager (GTM)
  • Seguimiento automático de 18 eventos diferentes
  • Comercio electrónico mejorado según los estándares de Google
  • Conversiones mejoradas con datos de usuario hash
  • Capa de datos ampliada (dataLayer) con información adicional
  • Configuración de activación/desactivación de eventos individuales
  • Modo de depuración con inicio de sesión en la consola del navegador
  • Registro de eventos en la base de datos con visualización
  • Código JavaScript propio ejecutado en todas las páginas
  • Sistema completo de traducción (polaco, inglés, posibilidad de añadir otros idiomas)
  • Compatible con PrestaShop 1.7.x, 8.x y 9.x.
  • Compatibilidad con Google Consent Mode 2.0

2. Instalación y requisitos del sistema
Requisitos del sistema
  • PrestaShop 1.7.0.0 o superior (probado hasta la versión 9.0)
  • PHP 7.4 o posterior
  • Acceso al panel de administración de PrestaShop
  • Cuenta de Google Tag Manager (gratuita)
  • Opcional: Google Analytics 4 (gratuito)
Proceso de instalación
  1. Descarga el archivo ZIP del módulo desde la página web oficial. códigos.cocos
  2. Inicie sesión en el panel de administración de PrestaShop
  3. Ir a: Módulos → Administrador de módulos
  4. Haga clic en „Cargar módulo” en la esquina superior derecha.
  5. Selecciona el archivo ZIP descargado y haz clic en „Subir este módulo”.”
  6. Una vez finalizada la instalación, haga clic en "Configurar".
  7. El módulo está listo para configurarse.
Información
Tras la instalación, el módulo registra automáticamente todos los hooks necesarios de PrestaShop y crea una tabla en la base de datos para registrar eventos (si la función está activada). La instalación no requiere ningún paso técnico adicional.

3. Activación del módulo
El módulo no requiere una activación de licencia por separado, ya que funciona inmediatamente después de la instalación. Sin embargo, para comenzar el seguimiento, debemos configurar los ajustes básicos.

Primeros pasos tras la instalación:
  1. Vaya a Módulos → Administrador de módulos
  2. Busca el módulo „CC Google Tag Manager”.”
  3. Haga clic en „Configurar”.”
  4. Se nos redirigirá a la página de configuración del módulo.
Consejo
Antes de comenzar la configuración, es recomendable preparar el ID del contenedor GTM (formato: GTM-XXXXXX). Podemos encontrarlo en el panel de Google Tag Manager después de crear un nuevo contenedor para nuestro sitio web.

4. Configuración básica de GTM
La configuración de Google Tag Manager es el primer paso para activar el seguimiento en la tienda.

Creación de un contenedor GTM:
  1. Ir a tagmanager.google.com
  2. Inicie sesión con su cuenta de Google
  3. Haga clic en „Crear cuenta”.”
  4. Introduzca el nombre de la cuenta (por ejemplo, el nombre de la empresa).
  5. Indique el nombre del contenedor (por ejemplo, el nombre de la tienda).
  6. Seleccione „Web” como tipo de contenedor.
  7. Acepta los términos del servicio
  8. Copie el ID del contenedor (GTM-XXXXXX)
Configuración en el módulo:
  1. En la configuración del módulo, busca la sección „Configuración básica”.”
  2. Marca la casilla „Activar Google Tag Manager”.”
  3. Pega el ID del contenedor GTM copiado (por ejemplo, GTM-ABC1234).
  4. Haga clic en „Guardar” en la parte inferior de la página.
Elementos de la configuración básica:
OpciónDescripciónValor
Activar GTMActiva el seguimiento mediante GTMSÍ / NO
Identificación del contenedor GTMContenedor ID GTMGTM-XXXXXX
¿Qué ocurre después de guardar?
  • El código GTM (gtag.js) se añade automáticamente a todas las páginas de la tienda.
  • El script GTM se coloca en la sección
  • El fallback Noscript se añade inmediatamente después de <body>
  • DataLayer comienza a recopilar datos sobre eventos.
  • Todos los eventos se envían automáticamente a GTM.
Éxito
Una vez configurado correctamente, el código GTM será visible en el código fuente de la página. Podemos comprobarlo haciendo clic con el botón derecho del ratón → „Mostrar código fuente” y buscando GTM-XXXXXX. Allí encontraremos tanto el script principal como el dataLayer.

5. Configuración de eventos
El módulo admite 18 eventos diferentes. Cada evento se puede activar o desactivar de forma independiente según las necesidades empresariales.

Lista de eventos disponibles:
EventoDescripción¿Cuándo se activa?
page_viewVisualización de la páginaEn cada página de la tienda
ver_elementoVisualización del productoEn la página del producto
ver_lista_de_artículosVisualización de la lista de productosCategorías, resultados de búsqueda, página principal
select_itemHacer clic en el productoHacer clic en un producto de la lista
Añadir al carritoAñadir a la cestaDespués de añadir el producto a la cesta
eliminar_del_carritoEliminar de la cestaDespués de eliminar el producto de la cesta
ver_carritoMostrar la cestaEn la página del carrito
begin_checkoutInicio del contratoPrimer paso para completar el pedido
add_shipping_infoAñadir información sobre la entregaSelección del método de entrega
añadir_información_de_pagoAñadir información sobre el pagoSelección del método de pago
compraComprarPágina de confirmación del pedido
buscarBuscar enUso del buscador de la tienda
seleccionar_promociónHacer clic en la promociónHacer clic en un banner promocional
inicio de sesiónIniciar sesiónInicio de sesión del cliente
inscribirseInscripciónRegistro de un nuevo cliente
añadir a la lista de deseosAñadir a la lista de deseosAñadir producto a la lista de deseos
compartirCompartirHacer clic en el botón «Compartir en redes sociales»
Activar/desactivar eventos:
  1. En la configuración del módulo, vaya a la sección „Configuración de eventos”.”
  2. Encuentra la lista de los 18 eventos
  3. Marca las casillas junto a los eventos que deseas seguir.
  4. Desmarque las casillas de verificación junto a los eventos que desea desactivar.
  5. Utilice los botones „Seleccionar todo” o „Deseleccionar todo” para una configuración rápida.
  6. Haga clic en „Guardar”.”
Transmisión de la configuración a JavaScript:
// Konfiguracja eventów przekazywana do JS jako: window.ccpsEventConfig = { 'page_view': true, 'view_item': true, 'add_to_cart': true, 'purchase': false, // ... itd. };

// Sprawdzanie czy event jest włączony: function isEventEnabled(eventName) { if (typeof config.eventConfig[eventName] !== 'undefined') { return config.eventConfig[eventName]; } return true; // Domyślnie włączone }
Nota
Los eventos desactivados no se envían a dataLayer, lo que ahorra recursos y evita saturar los datos en Google Analytics. Si un evento está desactivado, en el modo de depuración aparecerá el mensaje „Evento desactivado: nombre_del_evento” en lugar de enviar datos.

6. Capa de datos ampliada
La función de capa de datos mejorada (Enhanced Data) añade información adicional a cada evento, lo que enriquece los análisis en Google Analytics.

¿Qué contiene la capa de datos ampliada?
  • Datos del sitio web – tipo de página, URL, título, idioma, moneda
  • Datos del usuario – estado del cliente (visitante/invitado/cliente), ID de usuario
  • Datos de los productos – categorías completas (hasta 5 niveles), marcas, atributos
  • Datos de los pedidos – métodos de entrega, métodos de pago, cupones
Configuración de la capa de datos ampliada:
  1. En la configuración del módulo, busca la sección „Opciones de datos avanzadas”.”
  2. Marca la casilla „Capa de datos ampliada”.”
  3. Marca la casilla „Datos de la página” para añadir información sobre la página.
  4. Guardar la configuración
Ejemplo de capa de datos ampliada:
dataLayer.push({ 'event': 'page_view', 'page_type': 'product', 'page_url': 'https://example.com/produkt', 'page_title': 'Nombre del producto - Tienda', 'language': 'pl', 'currency': 'PLN', 'customer_status': 'customer', 'user_id': 123 });
Tipos de páginas reconocidas por el módulo:
Tipo de páginaValor de page_type¿Cuándo?
Página de inicioInicioControlador de índice
Página del productoproductoControlador de productos
CategoríacategoríaControlador de categoría
CestacarroControlador de carrito
Ejecución del pedidocheckoutControlador de pedidos
Confirmación de compracompraControlador de confirmación de pedidos
Buscar enbuscarControlador de búsqueda
Página de contenidocontenidoControlador CMS
OtrosotherTodos los demás
Categorías de productos: jerarquía:
  • categoría_del_artículo – categoría principal (con normalización: primera letra mayúscula)
  • item_category2 – subcategoría nivel 2
  • item_category3 – subcategoría nivel 3
  • item_category4 – subcategoría nivel 4
  • item_category5 – subcategoría nivel 5
Consejo
La capa de datos ampliada es especialmente útil para crear segmentos avanzados en Google Analytics. Por ejemplo, podemos analizar la conversión por separado para diferentes tipos de páginas, idiomas o estados de los clientes. Se recomienda encarecidamente activar esta función.

7. Conversiones mejoradas (datos del usuario)
Las conversiones mejoradas son una función de Google Ads que mejora la precisión de la medición de las conversiones mediante el envío de datos hash de los usuarios.

¿Qué son las conversiones mejoradas?
  • Datos personales de los usuarios hash (SHA-256)
  • Correo electrónico, teléfono, nombre, apellidos, ciudad, código postal, país
  • Enviado a Google de forma segura
  • Permiten atribuir mejor las conversiones a las campañas publicitarias.
  • Requieren el consentimiento del usuario (RGPD/GDPR)
Configuración de conversiones mejoradas:
  1. En la configuración del módulo, busca la sección „Opciones de datos avanzadas”.”
  2. Marca la casilla „Datos del usuario (conversiones mejoradas)”.”
  3. Asegúrate de que tienes el consentimiento de los usuarios para el tratamiento de datos (RGPD).
  4. Guardar la configuración
Advertencia
¡El envío de datos de los usuarios requiere el consentimiento del RGPD! Asegurémonos de que nuestra tienda cuenta con una política de privacidad y cookies actualizada y de que los usuarios dan su consentimiento informado para el tratamiento de sus datos. Recomendamos la integración con un módulo de gestión de consentimientos de cookies como CC PrestaShop Cookies.
¿Qué datos se cifran y se transmiten?
DatosFuenteFormato
Correo electrónico$cliente->correo electrónicohash(’sha256′, strtolower(trim($email)))
TeléfonoPrimera dirección del clientehash(’sha256′, solo números)
NombrePrimera dirección del clientehash(’sha256′, strtolower(trim()))
NombrePrimera dirección del clientehash(’sha256′, strtolower(trim()))
CiudadPrimera dirección del clientehash(’sha256′, strtolower(trim()))
Código postalPrimera dirección del clientehash(’sha256′, trim())
PaísPrimera dirección del clienteCódigo del país (sin hash)
Ejemplo de datos en dataLayer:
dataLayer.push({ 'event': 'purchase', 'user_id': 123, 'customer_status': 'customer', 'user_data': { 'email_hash': 'b4c9a289323b21a01c3e807...', 'phone_hash': '8d23cf6c86e834a7aa6edd9...', 'address': { 'first_name': 'a5bfc9e07964f8dddeb95fc...', 'last_name': '5e884898da28047151d0e56...', 'city': '1c383cd30b7c298ab50293a...', 'postal_code': '4e07408562bedb8b60ce05c...', 'country': 'PL' } } });
Estado de los clientes:
  • visitante – usuario no registrado sin cuenta
  • invitado – conectado como invitado (guest checkout)
  • cliente – usuario registrado con cuenta completa
Información
Todos los datos personales se cifran con el algoritmo SHA-256 antes de enviarse a Google, lo que significa que Google no recibe los datos en formato legible. El cifrado es unidireccional, es decir, no es posible recuperar los datos originales a partir del cifrado. Esto cumple con los requisitos del RGPD en materia de minimización de datos.

8. Modo de depuración
El modo de depuración permite realizar un seguimiento detallado de todos los eventos en la consola del navegador, lo que resulta muy útil durante las pruebas y la resolución de problemas.

Activación del modo de depuración:
  1. En la configuración del módulo, busca la sección „Opciones de datos avanzadas”.”
  2. Marca la casilla „Modo de depuración”.”
  3. Guardar la configuración
  4. Abrir la tienda en una nueva pestaña del navegador
  5. Abre la consola de desarrollo (F12 → pestaña Console).
  6. Actualizar la página
¿Qué muestra el modo de depuración?
  • Inicialización del módulo: [CC Google Track] CcpsGoogleTrack v2.0 – inicialización
  • Cada evento enviado: [CC Google Track] Evento: add_to_cart
  • Datos del evento (objeto de comercio electrónico)
  • Eventos desactivados: [CC Google Track] Evento desactivado: compartir
  • Operaciones AJAX (descarga de datos de productos, lista de deseos, etc.)
  • Errores de análisis y gestión de eventos
  • Eventos PrestaShop (updatedCart, updatedProduct)
  • Finalización de la inicialización
Ejemplo de registros en la consola:
[CC Google Track] CcpsGoogleTrack v2.0 - inicialización [CC Google Track] Evento: page_view {page_type: "product", ...} [CC Google Track] Controlador registrado: add_to_cart [CC Google Track] Controlador registrado: remove_from_cart [CC Google Track] Controlador registrado: select_item [CC Google Track] Evento PrestaShop: updatedCart {reason: {...}} [CC Google Track] Evento: add_to_cart {currency: "PLN", value: 99.99, items: [...]} [CC Google Track] CcpsGoogleTrack v2.0 - inicialización completada
Varios mensajes de depuración:
ComunicadoImportancia de
Evento desactivado: nombre_eventoEl evento está desactivado en la configuración.
Descarga de datos de productos mediante AJAX para XEl módulo obtiene los datos del producto del servidor.
Se han obtenido los datos del producto de PHP para X.Los datos del producto se han descargado correctamente.
Error AJAX XSe ha producido un error al descargar los datos.
Error al analizar JSONLa respuesta AJAX no es JSON válido.
Handler registrado: nombreEl servicio del evento ha sido iniciado.
Consejo
El modo de depuración debe activarse SOLO durante las pruebas. En el entorno de producción, debe estar desactivado para no saturar la consola de los visitantes y no ralentizar la página. Recomendamos activar el modo de depuración en el entorno de prueba/staging antes de la implementación en producción.

9. Registro de eventos
La función de registro de eventos guarda todos los eventos en la base de datos de PrestaShop, lo que permite su posterior visualización y análisis.

Habilitar el registro de eventos:
  1. En la configuración del módulo, busca la sección „Opciones de datos avanzadas”.”
  2. Marca la casilla „Registro de eventos”.”
  3. Guardar la configuración
  4. El módulo creará automáticamente una tabla. ps_ccpsgoogletrack_logs en la base de datos
Estructura de la tabla de registros:
ColumnaTipoDescripción
id_logINT AUTO_INCREMENTLlave maestra
nombre_eventoVARCHAR(100)Nombre del evento (por ejemplo, add_to_cart)
capa_de_datosTEXTOCapa de datos completa en formato JSON
date_addFECHA Y HORAFecha y hora de adición
Revisión de registros:
  1. En la configuración del módulo, vaya a la pestaña „Registros”.”
  2. Verás una tabla con los últimos 100 registros.
  3. Columnas: Fecha, Evento, Capa de datos (JSON)
  4. Posibilidad de borrar todos los registros con el botón „Borrar registros”.”
Ejemplo de entrada en el registro:
Evento: add_to_cart Fecha: 2025-12-10 14:30:45 Capa de datos: { "event": "add_to_cart", "ecommerce": { "currency": "PLN", "value": 99.99, "items": [ { "item_id": "123", "item_name": "Producto de prueba", "price": 99.99, "quantity": 1 } ] }, "page_type": "product", "customer_status": "visitor" }
Cuándo se registran los eventos:
  • Eventos del panel de administración (hook displayHeader) – inicio de sesión PHP
  • Eventos enviados por JavaScript: inicio de sesión mediante AJAX
  • Todos los eventos excepto los excluidos en la configuración.
  • El inicio de sesión funciona independientemente del modo de depuración.
Limpieza de registros:
  1. En la pestaña „Registros”, haz clic en el botón „Borrar registros”.”
  2. Confirme la operación en el cuadro de diálogo.
  3. Todos los registros se eliminarán de la base de datos.
  4. Aparecerá un mensaje de confirmación.
Advertencia
El registro de eventos puede generar una gran cantidad de datos en la base de datos, especialmente en tiendas con mucho tráfico. Recomendamos limpiar los registros con regularidad (por ejemplo, cada mes) o activar el registro solo durante las pruebas. En un entorno de producción, normalmente no es necesario realizar un registro permanente.

10. Código de seguimiento propio
La función de código propio permite añadir JavaScript personalizado que se ejecutará en todas las páginas de la tienda.

Usos del código propio:
  • Eventos adicionales de GTM no compatibles con el módulo
  • Seguimiento personalizado de las interacciones de los usuarios
  • Integración con otras herramientas analíticas
  • Modificaciones de dataLayer según tus necesidades
  • Scripts de remarketing Facebook Pixel, TikTok Pixel, etc.
Configuración del código propio:
  1. En la configuración del módulo, busca la sección „Código de seguimiento personalizado”.”
  2. Marca la casilla „Activar código propio”.”
  3. En el cuadro de texto grande, escribe tu código JavaScript.
  4. No utilices etiquetas. – se añaden automáticamente
  5. Guardar la configuración
Ejemplo de código propio:
// Evento propio para dataLayer dataLayer.push({ 'event': 'custom_scroll', 'scroll_depth': '50%' });

// Seguimiento de clics en elementos específicos document.querySelectorAll('.special-button').forEach(function(btn) { btn.addEventListener('click', function() { dataLayer.push({ 'event': 'special_button_click', 'button_text': this.textContent }); }); }); // Facebook Pixel !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', 'YOUR_PIXEL_ID'); fbq('track', 'PageView');
Variables disponibles en el código propio:
  • window.dataLayer – capa de datos principal de GTM
  • window.ccpsGTMDebug – ¿Está activado el modo de depuración?
  • window.ccpsEventConfig – configuración de eventos
  • window.ccpsUserLogged – si el usuario ha iniciado sesión
  • window.ccpsAjaxUrl – URL al controlador AJAX del módulo
  • window.ccpsTranslations – tabla de traducciones
  • prestashop – objeto PrestaShop (si está disponible)
Ejemplo de uso de variables del módulo:
// Comprueba si el usuario está conectado if (window.ccpsUserLogged) { dataLayer.push({ 'event': 'logged_user_pageview' }); } // Utiliza la configuración de eventos if (window.ccpsEventConfig && window.ccpsEventConfig['custom_event']) {
// Enviar solo si el evento está activado dataLayer.push({ 'event': 'custom_event' }); } // Registro de depuración si el modo de depuración está activado if (window.ccpsGTMDebug) { console.log('[Mi código] Inicialización completada'); }
Nota
El código propio se añade al final de la sección HEAD, después del código GTM y después de todos los scripts del módulo. Esto significa que todas las variables y funciones del módulo ya están disponibles. El código se ejecuta en cada página de la tienda, por lo que hay que tener cuidado con el rendimiento.

11. Sistema de traducción
El módulo cuenta con un completo sistema de traducción que admite múltiples idiomas.

Elementos traducidos:
ElementoEjemplo PLEjemplo EN
Nombres de eventosAñadir al carrito (add_to_cart)Añadir al carrito (add_to_cart)
Mensajes de depuraciónEvento desactivado:Evento desactivado:
Mensajes de errorError al descargar los datos del productoError al obtener los datos del producto
EstadosActivoActivo
BotonesGuardarGuardar
Mecanismo de transferencia de traducciones a JavaScript:
// W PHP (ccpsgoogletrack.php): $translations = [ 'eventDisabled' => $this->l('Event wyłączony:'), 'event' => $this->l('Event:'), 'sendingEvent' => $this->l('Wysyłanie'), // ... itd. ]; $output .= '<script>window.ccpsTranslations = ' . json_encode($translations, JSON_UNESCAPED_UNICODE) . ';</script>';

// W JavaScript (ccpsgoogletrack.js):
function t(key, defaultText) {
if (typeof window.ccpsTranslations !== 'undefined'
&& window.ccpsTranslations[key]) {
return window.ccpsTranslations[key];
}
return defaultText || key;
}

// Użycie: debugLog(t('eventDisabled', 'Event wyłączony:') + ' ' + event);
Añadir un nuevo idioma:
  1. Copiar el archivo translations/es.php
  2. Cambia el nombre por el código del idioma, por ejemplo:. traducciones/de.php (alemán)
  3. Abre el archivo en un editor de texto.
  4. Traduce todos los valores a la derecha (después del signo =).
  5. NO cambies las llaves (a la izquierda)
  6. Guarda el archivo con codificación UTF-8.
  7. Borrar la caché de PrestaShop
Ejemplo de archivo de traducción:
<?php global $_MODULE; $_MODULE = array(); $_MODULE['ccpsgoogletrack_eventdisabled'] = 'Evento desactivado:'; $_MODULE['ccpsgoogletrack_event'] = 'Evento:'; $_MODULE['ccpsgoogletrack_sendingevent'] = 'Enviando'; // ... más traducciones
Lista de todas las claves de traducción:
  • eventDisabled – „Evento desactivado:”
  • evento – „Evento:”
  • sendingEvent – „Envío”
  • receivedData – „Se han recibido los datos del producto de PHP para”
  • gettingProductData – „Descarga de datos del producto mediante AJAX para”
  • ajaxError – „Error AJAX”
  • parsingError – „Error al analizar JSON:”
  • dataError: „Error al recuperar los datos del producto”.”
  • handlerRegistered – „Manejador registrado”
  • initialization – „CcpsGoogleTrack v2.0 – inicialización”
  • initComplete – „CcpsGoogleTrack v2.0 – inicialización completada”
  • prestashopEvent – „Evento PrestaShop”
Consejo
Si la tienda es multilingüe, el sistema de traducción seleccionará automáticamente el idioma adecuado en función del idioma actual de PrestaShop. Todos los mensajes de depuración, los nombres de los eventos en la configuración y los mensajes del sistema se mostrarán en el idioma del usuario.

12. Eventos: detalles
Descripción detallada de la implementación de cada uno de los 18 eventos gestionados por el módulo.

page_view – Visualización de la página
  • Cuándo: En cada página de la tienda
  • Gancho: displayHeader
  • Datos: tipo_de_página, url_de_página, título_de_página, idioma, moneda, estado_del_cliente
  • Observaciones: El primer evento enviado en cada página contiene datos contextuales completos.
view_item – Visualización del producto
  • Cuándo: En la página del producto
  • Gancho: displayProductAdditionalInfo
  • Datos: moneda, valor, artículos[] (id_artículo, nombre_artículo, precio, marca_artículo, categoría_artículo, cantidad=1)
  • Fuente: $product = prestashop.page.product o AJAX
view_item_list – Mostrar la lista de productos
  • Cuándo: Categorías, página principal, resultados de búsqueda
  • Gancho: displayFooter (para la categoría)
  • Datos: currency, item_list_id, item_list_name, items[] (todos los productos con índice)
  • Observaciones: Utiliza prestashop.page.page_name para identificar el tipo de lista.
select_item – Hacer clic en el producto
  • Cuándo: Hacer clic en el enlace del producto de la lista.
  • Mecanismo: JavaScript click listener en .product-miniature a
  • Datos: moneda, id_lista_artículos, nombre_lista_artículos, artículos[] (producto seleccionado)
  • Fuente: atributo data-product-gtm o AJAX
add_to_cart – Añadir al carrito
  • Cuándo: Después de añadir el producto a la cesta
  • Mecanismo: Interceptación del evento 'updateCart’ de PrestaShop’
  • Datos: moneda, valor, artículos[] (producto añadido con cantidad)
  • Fuente: prestashop.page.product o AJAX GetProductData
  • Observaciones: Detecta la cantidad de diferentes fuentes (#quantity_wanted, event.reason.qty, event.resp.quantity)
remove_from_cart – Eliminar del carrito
  • Cuándo: Después de eliminar el producto de la cesta
  • Mecanismo: Haga clic en el listener en .eliminar-del-carrito
  • Datos: moneda, valor, artículos[] (producto eliminado)
  • Fuente: Atributos data-id-product, data-price, data-name
view_cart – Mostrar el carrito
  • Cuándo: En la página del carrito
  • Gancho: displayShoppingCart
  • Datos: moneda, valor, artículos[] (todos los productos en la cesta)
  • Fuente: $cart->getProducts()
begin_checkout – Inicio del pedido
  • Cuándo: Primer paso para completar el pedido
  • Mecanismo: JavaScript en la página de pago
  • Datos: moneda, valor, artículos[], cupón (si lo hay)
  • Fuente: window.prestashop.cart
add_shipping_info – Selección de envío
  • Cuándo: Después de seleccionar el método de entrega
  • Gancho: actionCarrierProcess
  • Datos: moneda, valor, artículos[], nivel_de_envío (nombre del transportista)
  • Mecanismo: También el listener JavaScript para el cambio .delivery-option input
add_payment_info – Selección de pago
  • Cuándo: Después de seleccionar el método de pago
  • Mecanismo: Escucha JavaScript en .opción de pago entrada
  • Datos: moneda, valor, artículos[], tipo de pago (nombre del módulo de pago)
purchase – Compra
  • Cuándo: Página de confirmación del pedido
  • Gancho: mostrarConfirmaciónPedido
  • Datos: moneda, id_transacción, valor, impuestos, envío, cupón, artículos[]
  • Fuente: $order = nuevo pedido ($id_order)
  • Observaciones: El evento más importante para la conversión
search – Búsqueda
  • Cuándo: Uso del buscador
  • Gancho: actionSearch
  • Datos: search_term (frase de búsqueda)
  • Recurso alternativo: JavaScript comprueba los parámetros URL (s=, search_query=)
login – Iniciar sesión
  • Cuándo: Después de iniciar sesión
  • Gancho: actionAuthentication
  • Mecanismo: JavaScript también detecta el cambio de ccpsUserLogged en sessionStorage.
  • Datos: método: ’correo electrónico’
sign_up – Registro
  • Cuándo: Después de registrar un nuevo cliente
  • Gancho: acciónAñadirCuentaCliente
  • Mecanismo: Cookie ccps_just_registered transferida a sessionStorage
  • Datos: método: ’correo electrónico’
add_to_wishlist – Lista de deseos
  • Cuándo: Añadir producto a la lista de deseos
  • Mecanismo: Captura de fetch y XMLHttpRequest para blockwishlist
  • Datos: moneda, valor, artículos[] (producto añadido)
  • Fuente: AJAX Obtener datos del producto
  • Observaciones: Funciona con el módulo blockwishlist.
share – Compartir
  • Cuándo: Hacer clic en el botón «Compartir en redes sociales»
  • Mecanismo: Haga clic en el listener en .social-sharing a
  • Datos: método (facebook/twitter/pinterest/linkedin/correo electrónico), tipo de contenido, id del elemento, elementos[]
  • Fuente: prestashop.page.product o AJAX
select_promotion: clic en la promoción
  • Cuándo: Automáticamente si el producto tiene un descuento
  • Gancho: displayProductAdditionalInfo (junto con view_item)
  • Datos: moneda, valor, artículos[], id_promoción, nombre_promoción
  • Observaciones: Utiliza specific_prices para los datos de la promoción.
Éxito
Todos los eventos cumplen con la especificación oficial de Google Analytics 4 Enhanced Ecommerce. La estructura de datos items[] contiene todos los campos obligatorios y recomendados (item_id, item_name, price, quantity, item_brand, item_category). El módulo normaliza automáticamente los nombres de las categorías (primera letra mayúscula) y admite hasta 5 niveles de jerarquía de categorías.

13. Calendario de eventos
A continuación, presentamos un calendario que muestra cuándo y en qué páginas se envían los distintos eventos.

Eventos en diferentes tipos de páginas:
PáginaEventos automáticosEventos interactivos
Página de iniciopage_view, view_item_listselect_item
Categoríapage_view, view_item_listselect_item
Buscar enpage_view, search, view_item_listselect_item
Productopage_view, view_item, select_promotion (si hay descuento)añadir al carrito, añadir a la lista de deseos, compartir
Cestapage_view, view_carteliminar_del_carrito, comenzar_el_proceso_de_pago
Finalizar comprapage_view, begin_checkoutañadir_información_de_envío, añadir_información_de_pago
Confirmaciónpage_view, compra–
Iniciar sesiónpage_view, inicio de sesión–
Inscripciónpage_view, sign_up–
El recorrido del cliente (customer journey) con eventos:
  1. Página de inicio → vista_de_página, vista_de_lista_de_elementos
  2. Hacer clic en el producto → seleccionar elemento
  3. Página del producto → página_vista, vista_elemento, (seleccionar_promoción)
  4. Añadir a la cesta → añadir al carrito
  5. Página del carrito → página_vista, ver_carrito
  6. Inicio del contrato → comenzar_el_proceso_de_pago
  7. Selección de la entrega → añadir_información_de_envío
  8. Selección del pago → añadir_información_de_pago
  9. Confirmación → página_vista, compra
Información
Cada evento automático se envía al cargar la página (Hook PHP), mientras que los eventos interactivos se envían en respuesta a las acciones del usuario (JavaScript). El módulo detecta de forma inteligente los duplicados y no envía el mismo evento dos veces para la misma acción.

14. Prueba del asistente de etiquetas
Google Tag Assistant es la herramienta oficial de Google para probar y depurar la implementación de Google Tag Manager.

Pruebas con Tag Assistant:
  1. Instalar la extensión Tag Assistant Legacy de Google para Chrome
  2. O utilice la nueva herramienta Asistente de etiquetas de Google en Chrome DevTools
  3. Ir a la página de la tienda
  4. Haga clic en el icono Tag Assistant en la barra de herramientas.
  5. Haga clic en „Enable” para comenzar la grabación.
  6. Actualizar la página
  7. Realiza acciones de prueba (añadir al carrito, pasar por caja, etc.).
  8. Revisa el informe del Asistente de etiquetas.
Qué comprobar en Tag Assistant:
  • Etiqueta GTM encontrada – el marcador verde indica una instalación correcta
  • Capa de datos – comprueba si contiene los datos correctos de los eventos
  • Etiquetas eliminadas – lista de etiquetas que se han activado
  • Variables – variables enviadas a GTM
  • Errores – Las marcas rojas indican problemas.
Configuración de etiquetas en GTM (ejemplo GA4):
  1. Inicie sesión en Google Tag Manager.
  2. Vaya a la pestaña „Etiquetas”.”
  3. Haga clic en „Nuevo”.”
  4. Seleccione el tipo de etiqueta: „Google Analytics: evento GA4”
  5. Introduce el ID de medición (G-XXXXXXXXXX de GA4)
  6. Nombre del evento: {{Evento}} (variable incorporada)
  7. Desencadenante: „Evento personalizado” con nombres de eventos (añadir al carrito, compra, etc.)
  8. O un disparador universal para todos los eventos con dataLayer.
  9. Guardar y publicar contenedor
Modo de vista previa de GTM (Preview Mode):
  1. En GTM, haz clic en „Vista previa” en la esquina superior derecha.
  2. Introduce la URL de la tienda
  3. Haga clic en „Conectar”.”
  4. Se abrirá una nueva ventana con el depurador GTM.
  5. Realiza acciones en la tienda
  6. En el depurador se pueden ver todos los eventos dataLayer en tiempo real.
  7. Comprueba qué etiquetas se han activado para cada evento.
Enlace a Tag Assistant:
Consejo
La herramienta oficial de Google para realizar pruebas se encuentra en: tagassistant.google.com

Allí podemos comprobar si todo funciona correctamente, si GTM está instalado y si los eventos se envían correctamente a Google Analytics.

15 Solución de problemas
GTM no se carga en la página web.
  1. Comprueba si GTM está activado en la configuración del módulo.
  2. Verifique la validez del ID del contenedor GTM (formato: GTM-XXXXXX)
  3. Borrar la caché de PrestaShop (Parámetros avanzados → Rendimiento → Borrar caché)
  4. Comprueba si la fuente de la página contiene gtm.js y noscript iframe.
  5. Desactive otros módulos que puedan modificar el encabezado.
  6. Comprueba si hay errores de JavaScript en la consola.
Los eventos no se envían.
  1. Activa el modo de depuración y comprueba la consola del navegador.
  2. Comprueba si los eventos están activados en la configuración del módulo.
  3. Verifique si dataLayer está definido (console.log(window.dataLayer)).
  4. Comprueba que no haya conflictos con otros módulos GTM.
  5. Asegúrate de que el módulo JavaScript se haya cargado (ccpsgoogletrack.js).
  6. Comprueba si hookDisplayHeader se ejecuta por el tema.
add_to_cart no funciona
  1. Activa el modo de depuración y observa los registros en la consola.
  2. Comprueba si se activa el evento 'updateCart’ de PrestaShop.
  3. Verifica si prestashop.on() está disponible.
  4. Comprueba si los productos tienen datos asignados (id_product, precio, nombre).
  5. Asegúrate de que el controlador AJAX funciona (/module/ccpsgoogletrack/ajax).
  6. Comprueba si no hay errores AJAX en la pestaña Red.
purchase no registra conversiones
  1. Comprueba si la compra de eventos está activada.
  2. Verifique que se encuentra en la página order-confirmation.
  3. Asegúrate de que hookDisplayOrderConfirmation se ejecuta.
  4. Comprueba si el pedido se ha cargado correctamente ($order).
  5. Activa el registro de eventos y comprueba si se guarda la compra.
  6. En GTM, comprueba si tienes configurada la etiqueta GA4 para el evento «purchase».
Las traducciones no funcionan.
  1. Comprueba si existe el archivo translations/XX.php para tu idioma.
  2. Verifique el formato del archivo (codificación UTF-8, sintaxis PHP correcta).
  3. Borrar la caché de PrestaShop
  4. Comprueba si window.ccpsTranslations está definido en el código fuente de la página.
  5. Asegúrate de que la función t() está disponible en JavaScript.
El registro de eventos no funciona.
  1. Comprueba si la función está activada en los ajustes
  2. Verifique si la tabla ps_ccpsgoogletrack_logs existe en la base de datos.
  3. Comprobar los permisos de escritura de la base de datos
  4. Asegúrate de que el controlador AJAX acepta solicitudes (action=LogEvent).
  5. Activa WP_DEBUG y comprueba los registros de errores.
  6. Comprueba que no hayas superado el límite de tamaño de la tabla.
El código propio no se ejecuta.
  1. Comprueba si la función está activada en los ajustes
  2. Verifica que el código sea correcto JavaScript (comprueba la consola)
  3. Asegúrate de no utilizar etiquetas en el código.
  4. Comprueba si el código se encuentra en el código fuente de la página (sección HEAD).
  5. Prueba el código poco a poco para encontrar el error.
Error
Si los problemas persisten, activa el modo de depuración en la configuración del módulo y el registro de eventos. Recopila toda la información de la consola del navegador, la pestaña Red y los registros de eventos. Ponte en contacto con el servicio de asistencia de COCOS a través de cocos.codes/soporte adjuntando la información recopilada.

16. FAQ
¿Es el módulo compatible con PrestaShop 9.0?
Sí, el módulo ha sido probado y es totalmente compatible con PrestaShop 1.7.x, 8.x y la última versión 9.0.

¿Puedo utilizar el módulo sin una cuenta de Google Analytics?
Sí, el módulo envía datos a Google Tag Manager. GTM puede transferir datos a muchos sistemas diferentes, no solo a Google Analytics. Podemos enviar datos a Facebook Pixel, TikTok Pixel, nuestros propios sistemas analíticos, etc.

¿El módulo ralentiza la tienda?
No, el módulo está optimizado para el rendimiento. El código GTM se carga de forma asíncrona y todos los scripts están minificados. El impacto en el rendimiento es mínimo (< 0,1 s de tiempo de carga).

¿Puedo desactivar algunos eventos?
Sí, en la configuración del módulo podemos activar o desactivar cada uno de los 18 eventos por separado. Los eventos desactivados no se envían en absoluto a dataLayer.

¿Cómo funciona la detección add_to_cart?
El módulo captura el evento 'updateCart’ de PrestaShop y escucha los clics en los botones «Añadir al carrito». Detecta automáticamente la cantidad de diferentes fuentes y obtiene los datos del producto a través de AJAX si es necesario.

¿El módulo es multilingüe?
Sí, el módulo cuenta con traducciones completas al polaco y al inglés. Podemos añadir fácilmente nuestros propios idiomas copiando y traduciendo los archivos del directorio translations/.

¿Qué son las conversiones mejoradas?
Las conversiones mejoradas son una función de Google Ads que mejora la precisión de la medición de las conversiones mediante el envío de datos hash de los usuarios (correo electrónico, teléfono, dirección). Requiere el consentimiento del RGPD.

¿El módulo es compatible con el RGPD?
El módulo en sí mismo es compatible con el RGPD: hash todos los datos personales con el algoritmo SHA-256. Sin embargo, para ser totalmente compatibles, debemos tener una política de privacidad actualizada y el consentimiento de los usuarios para las cookies. Recomendamos la integración con el módulo de gestión de cookies.

¿Cómo comprobar si el módulo funciona correctamente?
Activa el modo de depuración en la configuración, abre la consola del navegador (F12) y observa los registros. También puedes utilizar Google Tag Assistant o el modo de vista previa de GTM para ver todos los eventos en tiempo real.

¿Puedo añadir mis propios eventos?
Sí, puedes usar la función „Código de seguimiento personalizado” en la configuración para añadir cualquier JavaScript que envíe tus propios eventos a dataLayer.

¿Cuánto tiempo se conservan los registros de eventos?
Los registros se almacenan en la base de datos hasta que se borran manualmente. Recomendamos borrar los registros periódicamente (por ejemplo, cada mes) para no saturar la base de datos.

¿Funciona el módulo con el módulo cookies/GDPR?
Sí, el módulo es compatible con la mayoría de los módulos de gestión del consentimiento de cookies. Podemos integrarlo con Google Consent Mode 2.0 mediante nuestro propio código de seguimiento.

¿Qué ocurre durante la desinstalación?
El módulo elimina todos sus ajustes de la base de datos (opciones, tabla de registros). Sin embargo, no elimina los archivos del módulo, que deben eliminarse manualmente del directorio modules/ccpsgoogletrack/.

¿Puedo exportar los registros de eventos?
Actualmente, el módulo no tiene la función de exportar registros. Sin embargo, podemos consultar directamente la base de datos (tabla ps_ccpsgoogletrack_logs) o añadir nuestra propia función de exportación.

¿Con qué frecuencia se actualizan las traducciones?
Las traducciones se actualizan con cada nueva versión del módulo. Si falta la traducción de algún idioma, podemos añadirla nosotros mismos o solicitarla a COCOS.

Deje su comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Otros artículos

Cerrar

Productos vistos recientemente

Inicio de sesión

Cesta de la compra

Cerrar

Su cesta está vacía.

Empezar a comprar

Barra lateral