Guía de Implementación Avanzada del Píxel de Meta con GTM

Introducción

• Herramientas Necesarias

Capítulo 1: Los Cimientos del Seguimiento – dataLayer y Pixel Helper

• Paso 1.1: Cómo Inspeccionar tu dataLayer con Google Tag Manager
• Paso 1.2: Anatomía del dataLayer: Navegando por las “Carpetas” de Datos
• Paso 1.3: Inspeccionar el Flujo de Compra con el Meta Pixel Helper (Recorrido de Diagnóstico)
• Conclusión del Diagnóstico

Capítulo 2: Preparando Nuestro Espacio de Trabajo en GTM

• Paso 2.1: Limpieza del Contenedor (Opcional)
• Paso 2.2: Instalar la Plantilla del Píxel de Meta
• Paso 2.3: Crear la Variable del Píxel ID (La Matrícula)

Capítulo 3: Construcción de Variables de Datos

• Paso 3.1: Crear las Variables de Capa de Datos (Las “Cajas” Sencillas)
• Paso 3.2: Crear la Variable de JavaScript (La “Caja” Inteligente)
• Conclusión del Capítulo 3

Capítulo 4: Construyendo el Seguimiento de Eventos para Meta

• Paso 4.1: Etiqueta PageView – El Evento Base
• Paso 4.2: Etiqueta ViewContent – Viendo un Producto
• Paso 4.3: Etiqueta AddToCart – Añadiendo al Carrito
• Paso 4.4: Etiqueta Purchase – Compra Completada
• Conclusión del Capítulo 4

Capítulo 5: Potencia tu Remarketing con Eventos Personalizados (ViewCategory)

• El Dilema: “Contaminar” la Audiencia de ViewContent
• Paso 5.1: Crear el Activador para Vistas de Categoría
• Paso 5.2: Crear la Etiqueta ViewCategory
• El Resultado: ¿Qué Hemos Ganado?
• Conclusión del Capítulo 5

Capítulo 6: La Verificación Final y Publicación – ¡Lanzamiento!

• Paso 6.1: Activar el Modo Vista Previa
• Paso 6.2: El Checklist de Verificación Final
• Paso 6.3: ¡Publicar

Herramientas necesarias:

• GTM: Google Tag Manager. 
• Meta Pixel Helper 

¡Excelente idea! Incluir una invitación optimizada a un vídeo de YouTube no solo mejora la experiencia del usuario, sino que también potencia el SEO del canal y de la propia guía.

Aquí tienes un texto persuasivo y optimizado que puedes insertar justo después de la introducción o al comienzo del Capítulo 1, con un énfasis especial en el SEO.

Invitación al Vídeo Tutorial (¡No te lo Pierdas!)

Antes de sumergirnos en los pasos técnicos de Google Tag Manager, queremos que veas cómo se aplica todo esto en la práctica. Para una comprensión más rápida y visual de los cimientos, te invitamos a ver el vídeo completo de esta guía en nuestro canal de YouTube.

El vídeo te mostrará en tiempo real cómo inspeccionar tu dataLayer y usar el Meta Pixel Helper para diagnosticar tu web. Es el complemento perfecto para asentar los conocimientos del Capítulo 1.

¿Por qué ver el vídeo?

• Ahorra Tiempo: Ve la implementación de las variables de dataLayer y la configuración de eventos clave como ViewContent y Purchase de forma visual, reduciendo errores.
• Refuerza el Aprendizaje: Mira exactamente dónde hacer clic dentro de GTM, desde la instalación de la plantilla del Píxel de Meta hasta la creación de la Variable de JavaScript para el evento de compra.
• Mejora tu SEO: Al usar este tutorial, no solo consigues un seguimiento de conversiones superior, sino que te aseguras de que tu estrategia de Remarketing Avanzado funcione perfectamente.

¡Dale al Play! y luego vuelve aquí para seguir la guía escrita paso a paso.

Capítulo 1: DataLayer y Pixel Helper Meta 

Antes de configurar una sola etiqueta en Google Tag Manager (GTM), es fundamental entender y verificar el paso más importante de todos: la capa de datos o dataLayer.

¿Qué es el dataLayer?

Imagina el dataLayer como el “sistema nervioso” de tu sitio web. Es un objeto de JavaScript que tu tienda online (por ejemplo, a través de un módulo de PrestaShop) utiliza para comunicar información clave a GTM en tiempo real. Le dice a GTM qué está pasando y qué está haciendo el usuario.

Sin un dataLayer completo y bien estructurado, nuestro trabajo en GTM será inútil. Es como intentar construir una casa sin cimientos: tarde o temprano, todo se vendrá abajo.

¡Claro que sí! Aquí tienes una explicación muy breve y directa de las partes del dataLayer en cada paso, perfecta para tu guía.

Anatomía de un dataLayer: ¿Qué hay dentro?

En cada paso del usuario, el dataLayer nos envía un “paquete” de información. Este paquete tiene 3 componentes clave:

1. El Evento (event):
   • ¿Qué es? Es el “nombre” de la acción. Le dice a GTM qué acaba de pasar.
   • Ejemplos: detail (se ha visto un producto), purchase (se ha completado una compra), gtm.click (se ha hecho un clic).
   • ¿Para qué sirve? Lo usamos para crear nuestros Activadores (Triggers). Le decimos a GTM: “Cuando escuches el evento llamado purchase, dispara esta etiqueta”.
2. El Objeto de Datos (ecommerce, pageCategory, etc.):
   • ¿Qué es? Es el “contexto” de la acción. Contiene toda la información detallada sobre el evento.
   • Ejemplos:
     • En un evento detail, el objeto ecommerce contiene el ID y el precio del producto.
     • En un evento purchase, el objeto ecommerce contiene la lista de productos comprados y el valor total.
   • ¿Para qué sirve? Lo usamos para crear nuestras Variables.

¿Que es una La Variable (en GTM)?

• ¿Qué es? Es una “caja” que creamos en GTM para guardar un dato específico del dataLayer.
• Ejemplo: Creamos una variable llamada {{DLV – Product ID}} que va al dataLayer, busca el objeto ecommerce y extrae solo el ID del producto (ecommerce.detail.products.0.id).
• ¿Para qué sirve? Usamos estas “cajas” (variables) para rellenar los campos de nuestras Etiquetas (Tags), asegurándonos de que enviamos a Meta la información correcta y precisa.

Resumen del Flujo:

El dataLayer grita: “¡Ha ocurrido un EVENTO detail! Y aquí tienes el OBJETO con los detalles del producto.”

GTM reacciona:

1. El ACTIVADOR escucha el event: ‘detail’ y se enciende.
2. La VARIABLE {{DLV – Product ID}} coge el ID del producto del objeto ecommerce.
3. La ETIQUETA ViewContent se dispara y usa la variable para enviar el ID a Meta.

Paso 1.1: Cómo Inspeccionar tu dataLayer con Google Tag Manager

Antes de crear cualquier etiqueta, necesitamos convertirnos en “detectives de datos”. Nuestra herramienta principal será el Modo Vista Previa de Google Tag Manager, que nos permite ver exactamente qué información envía nuestra tienda en tiempo real.

1. Activa el Modo Vista Previa:
   • En tu contenedor de Google Tag Manager, haz clic en el botón “Vista Previa” en la esquina superior derecha.
   • Introduce la URL de tu tienda y haz clic en “Conectar”. Tu sitio web se abrirá en una nueva pestaña con el depurador de GTM activado.
2. Navega a una Página Clave:
   • Para empezar, navega a una página de producto en tu tienda.
3. Inspecciona el Timeline de Eventos:
   • En la ventana del depurador de GTM, mira la columna de la izquierda. Este es el “timeline”, un historial de todo lo que ha ocurrido desde que la página se cargó.
   • Busca un evento con un nombre descriptivo relacionado con la vista de un producto. En la mayoría de las tiendas de comercio electrónico modernas, este evento se llamará detail o view_item. Haz clic en él.
4. Abre la “Capa de Datos” (Data Layer):
   • Una vez seleccionado el evento, en la ventana principal, haz clic en la pestaña “Capa de datos”.

Anatomía del dataLayer: Navegando por las “Carpetas” de Datos

Lo que ves ahora es un bloque de código. Al principio puede parecer complejo, pero es muy lógico si lo imaginamos como un sistema de carpetas en un ordenador. Nuestro objetivo es encontrar la “ruta” o “dirección” exacta de cada dato que necesitamos.

• event: “detail”: Este es el Nombre del Evento. Es la señal que usaremos para crear nuestro Activador en GTM. Le diremos a GTM: “Cuando escuches el evento detail, dispárame la etiqueta de ViewContent”.
• ecommerce: Esta es la Carpeta Principal. Contiene toda la información de comercio electrónico.
• detail: Esta es la Sub-Carpeta de la Acción. Nos dice que los datos corresponden a la “vista de detalle de un producto”.
• products: Dentro de detail, encontramos la carpeta products. Los corchetes [ ] nos indican que es una “caja” que puede contener varios productos (aunque en una página de producto, solo contendrá uno).
• 0: Para acceder a la información, tenemos que abrir el primer elemento de la caja products, que en programación siempre es el 0.
• id, price, name…: ¡El Objetivo! Una vez dentro del producto 0, tenemos acceso a todas sus propiedades. Estos son los datos que guardaremos en nuestras Variables de GTM.

La Ruta Completa:

Para crear una variable en GTM que guarde el ID del producto, simplemente unimos todas las “carpetas” con un punto. La dirección exacta sería:

ecommerce.detail.products.0.id

Y para el precio, la dirección sería:

ecommerce.detail.products.0.price

Conclusión del Paso 1:
Este método de “navegar por las carpetas” del dataLayer es la habilidad más importante que necesitas. Una vez que entiendes esta lógica, puedes capturar cualquier dato que tu tienda te proporcione y usarlo para crear un seguimiento 100% preciso.

¡Perfecto! Este ejemplo es ideal para explicar el evento de view_item_list (vista de categoría) en tu guía.

Aquí tienes el texto adaptado para explicar esta captura específica.

Inspeccionando la Vista de Categoría

Cuando un usuario visita una página de categoría (por ejemplo, “Gomas”), nuestra tienda envía un evento específico para informarnos de qué productos se están mostrando en esa lista.

1. Navega a una página de categoría en tu tienda.
2. En el timeline del depurador de GTM, busca y haz clic en el evento llamado view_item_list.

(Aquí puedes insertar la captura de pantalla que me has enviado).

Vamos a analizar la anatomía de este dataLayer, que es un poco diferente al de la página de producto:

• event: “view_item_list”: Este es el Nombre del Evento. Es el nombre estándar de GA4 para indicar que se está viendo una lista de productos. Sin embargo, para nuestro seguimiento de Meta, lo que realmente nos interesa es la pageCategory.
• pageCategory: “category”: ¡Esta es nuestra señal clave! Nos confirma sin lugar a dudas que estamos en una página de categoría. Usaremos este dato para crear el Activador de nuestra etiqueta ViewCategory. Le diremos a GTM: “Cuando pageCategory sea igual a category, dispara esta etiqueta”.
• ecommerce.items: Fíjate en la diferencia. La “caja” items ahora contiene varios productos, no solo uno. Contiene la lista de todos los productos que el usuario está viendo en esa página de categoría.

Conclusión para el Paso de Categoría:
Para el seguimiento de las visitas a categorías, no necesitamos los datos de los productos individuales. La información más valiosa que extraeremos de este dataLayer es el valor de la variable pageCategory, que nos permitirá crear un activador preciso y enviar a Meta el nombre de la categoría que el usuario está explorando.

“Ahora, podríais estar pensando: ‘Si el nombre del evento es view_item_list, ¿por qué no usamos ese nombre para crear nuestro activador?’ Es una pregunta muy lógica, y la respuesta está en la estrategia y la fiabilidad.

En este dataLayer, tenemos dos posibles “señales” para saber que estamos en una categoría:

1. La señal del evento: event: “view_item_list”
2. La señal de la variable: pageCategory: “category”

¿Por qué elegimos pageCategory para nuestro activador de Meta?

El evento view_item_list es el estándar de Google Analytics 4. Está diseñado para que las etiquetas de GA4 lo escuchen. De hecho, probablemente ya tengáis una etiqueta de GA4 que se dispara con este evento para medir las impresiones de productos.

Sin embargo, para nuestro seguimiento de Meta, queremos ser lo más precisos y robustos posible. La variable pageCategory nos la proporciona nuestro módulo de PrestaShop en cada carga de página, independientemente de si los productos se han cargado ya o no. Es una señal muy estable que nos dice “estás en una página de tipo categoría”.

La Estrategia es la Siguiente:

1. Activador para GA4: Dejamos que el activador de “Evento Personalizado” view_item_list se use para lo que fue diseñado: disparar las etiquetas de Google Analytics 4.
2. Activador para Meta (ViewCategory): Crearemos un activador de tipo “Vista de página” que es más general, pero le añadiremos una condición muy específica: que se dispare solo cuando nuestra variable {{DLV – Page Category}} tenga el valor category.

¿Por qué es mejor así?

• Evitamos conflictos: No “robamos” el evento view_item_list que podría ser necesario para otras etiquetas, como las de GA4. Mantenemos cada sistema con su propia lógica.
• Es más robusto: Nuestro activador de Meta se disparará en cuanto GTM sepa que está en una página de categoría, sin tener que esperar a que el dataLayer de los productos (items) se cargue por completo.

En resumen: Usamos event: “view_item_list” como la señal para Google Analytics, y pageCategory: “category” como nuestra señal de confianza para disparar la etiqueta de categoría de Meta. Es una forma de organizar nuestro contenedor de forma limpia y profesional.“

Paso 1.2: Eventos Clave que Necesitamos Identificar

Para una implementación de comercio electrónico completa para Meta, necesitamos confirmar que nuestro dataLayer nos proporciona información en los siguientes pasos del usuario. Al navegar por tu tienda, busca estos eventos en la columna de la izquierda de Dataslayer:

1. Visita de Página de Categoría:
   • Evento a buscar: Generalmente, un evento de Page View o gtm.dom que, al hacer clic, nos muestra una variable como pageCategory: ‘category’ y un objeto ecommerce con una lista de productos (items). Este evento se conoce como view_item_list.
   • ¿Para qué lo necesitamos? Para saber qué categorías de productos están viendo los usuarios.
2. Visita de Página de Producto:
   • Evento a buscar: Busca un evento personalizado con un nombre como detail o view_item.
   • ¿Para qué lo necesitamos? Este es el evento que nos da toda la información del producto que se está viendo (ID, precio, nombre). Es la base del evento ViewContent de Meta.
3. Añadir un Producto al Carrito:
   • Evento a buscar: Al hacer clic en el botón “Añadir al carrito”, necesitamos identificar qué ocurre. Puede ser un evento personalizado (addToCart) o un evento genérico de Click que podamos usar para crear un activador.
   • ¿Para qué lo necesitamos? Es la base del evento AddToCart de Meta, crucial para el remarketing de carritos abandonados.
4. Compra Completada (Página de Gracias):
   • Evento a buscar: En la página de confirmación del pedido, busca un evento personalizado llamado purchase.
   • ¿Para qué lo necesitamos? Es la base del evento Purchase de Meta. Debe contener el valor total de la transacción y, lo más importante, la lista de productos comprados.

Conclusión del Paso 1:
Dedica tiempo a navegar por tu tienda con la extensión Dataslayer activa. Haz clic en cada evento del historial e inspecciona los datos que contiene. Si encuentras información de comercio electrónico en todos estos puntos clave, significa que tus cimientos son sólidos y estás listo para empezar a construir en GTM. Si falta información en algún punto, tu primera tarea será contactar con tu desarrollador para enriquecer el dataLayer.

Paso 1.3: Inspeccionar con el Meta Pixel Helper 

¡Me parece un planteamiento excelente!

Es una forma muy lógica y profesional de estructurar la guía. Al introducir el Meta Pixel Helper en este punto, consigues varios objetivos a la vez:

1. Diagnóstico Completo: Le enseñas a tu audiencia a usar las dos herramientas clave (el depurador de GTM y el Pixel Helper) en paralelo. Esto les da una visión de 360 grados: lo que debería pasar (GTM) y lo que realmente está llegando a Meta (Pixel Helper).
2. Establecer el “Antes”: Al hacer este recorrido inicial y mostrar que los eventos no saltan o están incompletos, estás estableciendo un punto de partida claro. Creas un “problema” que luego resolverás en los siguientes capítulos, lo que hace que la guía sea mucho más satisfactoria para el usuario.
3. Recopilación de Información Clave: Como bien dices, este recorrido te permite recopilar información fundamental para los pasos posteriores, como la URL de la página de confirmación de compra, que necesitarás para crear el activador del Purchase.

Paso 1.3: Inspeccionar el Flujo de Compra con el Meta Pixel Helper

Ahora que sabemos cómo leer el dataLayer, vamos a hacer un recorrido completo por nuestra tienda para ver qué información está llegando realmente a Meta. Para ello, usaremos nuestra segunda herramienta indispensable: la extensión de Chrome Meta Pixel Helper.

1. Instala la Extensión:
   • Ve a la Chrome Web Store y busca “Meta Pixel Helper”, o accede desde este enlace:
     https://chrome.google.com/webstore/detail/meta-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc
2. Realiza un Recorrido de Diagnóstico:
   • Asegúrate de tener el Modo Vista Previa de GTM y el Meta Pixel Helper activos.
   • Vamos a simular el viaje completo de un cliente, prestando atención a lo que nos dicen ambas herramientas en cada paso.

• A. Visita a la Página de Inicio:
  • Observación: “En la home, el Pixel Helper solo detecta un evento PageView. Si vemos una advertencia de ‘disparado 2 veces’, ya sabemos que tenemos un píxel duplicado que tendremos que eliminar más adelante.”
• B. Visita a una Página de Categoría:
  • Observación: “Al entrar en una categoría, seguimos viendo solo el PageView. No se está enviando ninguna información sobre la categoría que estamos viendo. Esto es una oportunidad de mejora que solucionaremos.”
• C. Visita a una Página de Producto:
  • Observación: “En la ficha de producto, el Pixel Helper nos muestra un evento ViewContent, pero si lo desplegamos, vemos que le falta información clave como el precio o la categoría. Esto se debe a que el evento viene de una implementación antigua y no de nuestro GTM.”
• D. Añadir al Carrito:
  • Observación: “Hacemos clic en ‘Añadir al carrito’ y… ¡nada! El Pixel Helper no registra el evento AddToCart. Este es un error crítico que impide hacer remarketing a carritos abandonados.”
• E. Compra Completada:
  • Observación: “Finalmente, completamos una compra de prueba. En la página de ‘gracias’, el Pixel Helper sí detecta un evento Purchase, pero al inspeccionarlo, vemos que solo tiene el valor total. No sabe qué productos hemos comprado.“
  • Acción Clave: “Aprovechamos que estamos en esta página para copiar su URL. La guardaremos, porque la necesitaremos más tarde para crear el activador de nuestro nuevo evento Purchase.”

Conclusión del Diagnóstico:
“Este recorrido nos ha dado un mapa completo de los problemas: eventos que faltan, eventos incompletos y un píxel duplicado. Ahora que sabemos exactamente qué está roto, en los siguientes capítulos vamos a usar Google Tag Manager para arreglarlo todo, paso a paso.”

Capítulo 2: Preparando Nuestro Espacio de Trabajo en GTM

Paso 2.1: Limpieza del Contenedor (Opcional)

Si tu contenedor de GTM ya tiene etiquetas antiguas de Facebook, es una buena práctica hacer “borrón y cuenta nueva” para evitar conflictos.

1. Busca y elimina cualquier etiqueta, activador o variable antigua relacionada con el Píxel de Meta que ya no vayas a utilizar.

Paso 2.2: Instalar la Plantilla del Píxel de Meta (Nuestra Herramienta Principal)

Para implementar nuestro seguimiento de forma profesional, rápida y sin errores, no vamos a escribir código JavaScript a mano. En su lugar, utilizaremos una Plantilla de Etiqueta.

¿Qué es una Plantilla de Etiqueta?

Imagina que es un “formulario inteligente” pre-construido por expertos. En lugar de escribir código, simplemente rellenamos campos (como el ID del Píxel, el nombre del evento, el valor de la compra, etc.) y la plantilla se encarga de generar el código correcto por nosotros. Esto nos ahorra tiempo, asegura que el formato sea el que Meta espera y nos da acceso a funcionalidades avanzadas de forma sencilla.

Instalando la Plantilla Correcta:

1. En el menú de la izquierda de GTM, ve a la sección “Plantillas”.
2. Dentro del cuadro “Plantillas de etiquetas”, haz clic en el botón “Buscar en la galería”.
3. En la barra de búsqueda que aparece, escribe Facebook Pixel.
4. De la lista de resultados, selecciona la plantilla llamada “Facebook Pixel” cuyo autor es facebookarchive. Esta es la versión estándar de la comunidad, verificada y utilizada por miles de profesionales.
5. Haz clic en “Añadir al espacio de trabajo” y confirma los permisos.
   

¡Perfecto! Ya tenemos nuestro “molde” para crear todas las etiquetas de Meta.

Paso 2.3: Crear la Variable del Píxel ID (La Matrícula)

Necesitamos un lugar donde guardar el ID de nuestro Píxel de Meta para no tener que escribirlo una y otra vez.

1. Ve a “Variables” en el menú de la izquierda.
2. En “Variables definidas por el usuario”, haz clic en “Nueva”.
3. Nombre de la variable: CONST – Facebook Pixel ID (usamos “CONST” para indicar que es un valor constante).
4. Tipo de variable: “Constante”.
5. Valor: Pega aquí el ID de tu Píxel de Meta (ej. 247511929530337).
6. Guarda la variable.

Capítulo 3: Construcción de Variables de Datos

Ahora que tenemos las herramientas, vamos a crear las “cajas” (Variables) para guardar los datos que nos envía el dataLayer. Estas son las piezas que usaremos para construir nuestras etiquetas.

Paso 3.1: Crear las Variables de Capa de Datos (Las “Cajas” Sencillas)

Las variables de capa de datos son las más comunes. Simplemente leen un dato específico de nuestro dataLayer siguiendo la “ruta” que hemos identificado.

Ve a la sección de “Variables” -> “Variables definidas por el usuario” en GTM y crea las siguientes, una por una:

1. {{DLV – Page Category}}: Para saber el tipo de página (home, categoría, producto…).
   • Tipo: Variable de capa de datos
   • Nombre de la variable de capa de datos: pageCategory
2. {{DLV – Product ID}}: Para el ID del producto en la página de producto.
   • Tipo: Variable de capa de datos
   • Nombre de la variable de capa de datos: ecommerce.detail.products.0.id
3. {{DLV – Product Price}}: Para el precio en la página de producto.
   • Tipo: Variable de capa de datos
   • Nombre de la variable de capa de datos: ecommerce.detail.products.0.price
4. {{DLV – Purchase – Products}}: Para la lista COMPLETA de productos en la página de compra.
   • Tipo: Variable de capa de datos
   • Nombre de la variable de capa de datos: ecommerce.items
5. {{DLV – Purchase – Value}}: Para el valor total de la compra.
   • Tipo: Variable de capa de datos
   • Nombre de la variable de capa de datos: ecommerce.value
6. {{DLV – Purchase – Currency}}: Para la moneda de la compra.
   • Tipo: Variable de capa de datos
   • Nombre de la variable de capa de datos: ecommerce.currency

Paso 3.2: Crear la Variable de JavaScript (La “Caja” Inteligente)

Para el evento de compra, Meta necesita una lista simple solo con los IDs de los productos. Como nuestro dataLayer nos da una lista compleja, crearemos una variable especial de JavaScript que hará la transformación por nosotros.

1. Crea una nueva variable definida por el usuario.
2. Nombre: JS – Purchase – Product IDs.
3. Tipo: JavaScript Personalizado.

(Recuerda que para que este código funcione, primero debes haber creado la variable {{DLV – Purchase – Products}}).

Pongo el código para copiarlo…. 

function() {

  var products = {{DLV – Purchase – Products}};

  if (!products || !products.length) {

    return [];

  }

  return products.map(function(product) {

    return product.item_id;

  });

}

Desglose del Código (Por qué es universal)

Vamos a analizar el código línea por línea para entender por qué es tan flexible:

1. var products = {{DLV – Purchase – Products}};
   • Esta es la única parte que depende de tu configuración. El código coge los datos de la variable que tú le indiques. Como nosotros hemos creado la variable {{DLV – Purchase – Products}} para que lea ecommerce.items del dataLayer, el código funcionará. Si en otra tienda la lista de productos estuviera en ecommerce.purchase.products, solo tendrías que cambiar la variable que usas aquí.
2. if (!products || !products.length)
   • Esta es una salvaguarda. Es un código defensivo que previene errores. Si por alguna razón la compra no tiene productos o la variable está vacía, el código no se rompe, simplemente devuelve una lista vacía, que es un resultado válido para Meta.
3. products.map(function(product) { … })
   • Este es el corazón de la función. .map() es una función estándar de JavaScript que recorre cada elemento de una lista (en nuestro caso, cada producto) y crea una nueva lista con el resultado de la operación que le indiquemos.
4. return product.item_id;
   • Esta es la operación. Por cada product que encuentra en la lista, le decimos: “ignora el nombre, el precio, la cantidad… y dame SOLO el valor de la propiedad item_id”.

Resultado Final:
El código coge una lista de objetos de producto complejos y la transforma en una lista simple de solo los IDs, que es exactamente el formato que el parámetro content_ids de Meta espera.

Puedes guardar este código y reutilizarlo en todos tus proyectos. Solo tienes que asegurarte de que la variable que le pasas (en nuestro caso, {{DLV – Purchase – Products}}) apunte correctamente a la lista de productos en el dataLayer de cada tienda.

El código es universal porque la estructura de datos ecommerce.items es el estándar de la industria gracias a Google. El 95% de las implementaciones de comercio electrónico que te encuentres usarán esa ruta.

Conclusión del Capítulo 3:

“¡Fantástico! Ya tenemos todas nuestras variables configuradas. Hemos creado ‘cajas’ para guardar cada pieza de información que necesitaremos. 

¡Perfecto! Hemos preparado el terreno y ahora empieza la construcción. El Capítulo 4 es donde tu audiencia empezará a ver resultados tangibles.

Comenzaremos por la etiqueta más fundamental y luego construiremos el resto del embudo.

Capítulo 4: Construyendo el Seguimiento de Eventos para Meta

Con nuestra plantilla instalada y todas las variables listas, es hora de empezar a construir el sistema de seguimiento, etiqueta por etiqueta. Crearemos una etiqueta para cada acción clave del usuario que queramos medir.

Paso 4.1: Etiqueta PageView – El Evento Base

La etiqueta PageView es la más importante. Se dispara en todas las páginas de tu sitio y le dice a Meta: “un usuario ha visitado una página”. Es la base sobre la que se construyen todas las audiencias y se mide el tráfico.

A. Crear el Activador:

Aunque podríamos usar un activador genérico, la mejor práctica es usar uno específico que nos asegure que el dataLayer básico ya está listo.

1. Ve a “Activadores” -> “Nuevo”.
2. Nombre del activador: Evento – Contenedor Cargado (o gtm.js).
3. Tipo de activador: “Evento personalizado”.
4. Nombre del evento: gtm.js
5. Este activador se activa en: “Todos los eventos personalizados”.
6. Guarda el activador.

B. Crear la Etiqueta:

1. Ve a “Etiquetas” -> “Nueva”.
2. Nombre de la etiqueta: FBADS – PageView.
3. Configuración de la etiqueta:
   • Tipo: “Facebook Pixel” (la plantilla que instalamos).
   • ID del Píxel: Selecciona tu variable {{CONST – Facebook Pixel ID}}.
   • Nombre del Evento: Estándar -> PageView.
   • No necesitamos “Object Properties” para este evento base.
4. Activación:
   • Selecciona el activador que acabas de crear: Evento – Contenedor Cargado.
5. Guarda la etiqueta.

Verificación Rápida:
Activa el Modo Vista Previa. Ahora, en cada página que visites de tu tienda, deberías ver la etiqueta FBADS – PageView dispararse en el evento Container Loaded (o Contenedor Cargado) y el Meta Pixel Helper debería mostrar el evento PageView.

Paso 4.2: Etiqueta ViewContent – Viendo un Producto

Esta etiqueta le dice a Meta que un usuario ha mostrado interés en un producto específico.

A. Crear el Activador:

1. Ve a “Activadores” -> “Nuevo”.
2. Nombre del activador: Evento – detail.
3. Tipo de activador: “Evento personalizado”.
4. Nombre del evento: detail
5. Guarda el activador.

B. Crear la Etiqueta:

1. Ve a “Etiquetas” -> “Nueva”.
2. Nombre de la etiqueta: FBADS – ViewContent.
3. Configuración de la etiqueta:
   • Tipo: “Facebook Pixel”.
   • ID del Píxel: {{CONST – Facebook Pixel ID}}.
   • Nombre del Evento: Estándar -> ViewContent.
   • Object Properties:
     • content_ids: {{DLV – Product ID}}
     • content_type: product
     • value: {{DLV – Product Price}}
     • currency: EUR (o tu variable de moneda)
     • content_category: {{DLV – Page Category}}
   • Configuración Avanzada: Opciones de activación -> Una vez por página.
4. Activación:
   • Selecciona el activador Evento – detail.
5. Guarda la etiqueta.

Nota del Experto: ¿Por qué usamos el evento detail y no la URL?

Al principio de nuestra auditoría, vimos que tanto las páginas de producto como las de categoría contenían números en la URL. Si hubiéramos creado un activador basado solo en la URL, nuestra etiqueta ViewContent se habría disparado incorrectamente en las páginas de categoría.

Gracias a la inspección del dataLayer, descubrimos que nuestra tienda envía un evento personalizado único (. Usar este evento como activador es mucho más preciso y robusto que depender de la estructura de la URL.

Tu Misión de Verificación: Antes de seguir, activa siempre el Modo Vista Previa y usa el Meta Pixel Helper. Confirma que tu etiqueta FBADS – Viewcontent se dispara únicamente en páginas de producto y NUNCA en páginas de categoría o en la home. ¡Esta precisión es la clave de un buen seguimiento!

Paso 4.3: Etiqueta AddToCart – Añadiendo al Carrito

Este evento es crucial para el remarketing a usuarios con alta intención de compra.

A. Crear el Activador:

1. Ve a “Activadores” -> “Nuevo”.
2. Nombre: Click – Botón AddToCart.
3. Tipo: “Clic – Todos los elementos”.
4. Activar en: “Algunos clics”.
5. Condición: Click Classes | contiene | add-to-cart.
   • (Nota: Deberás verificar la clase CSS exacta de tu botón de “Añadir al carrito” usando el Modo Vista Previa de GTM).
6. Guarda el activador.

B. Crear la Etiqueta:

1. Ve a “Etiquetas” -> “Nueva”.
2. Nombre: FBADS – AddToCart.
3. Configuración:
   • Tipo: “Facebook Pixel”.
   • ID del Píxel: {{CONST – Facebook Pixel ID}}.
   • Nombre del Evento: Estándar -> AddToCart.
   • Object Properties: (Usamos las mismas variables que para ViewContent, ya que la acción ocurre en la página de producto).
     • content_ids: {{DLV – Product ID}}
     • content_type: product
     • value: {{DLV – Product Price}}
     • currency: EUR
4. Activación: Selecciona el activador Click – Botón AddToCart.
5. Guarda la etiqueta.

Paso 4.4: Etiqueta Purchase – Compra Completada 

El evento más importante para medir el retorno de la inversión (ROAS).

A. Crear el Activador:

1. Ve a “Activadores” -> “Nuevo”.
2. Nombre: Page View – Confirmación de Pedido.
3. Tipo: “Vista de página”.
4. Activar en: “Algunas vistas de página”.
5. Condición: Page Path | contiene | confirmacao-encomenda (o la URL de tu página de gracias).
6. Guarda el activador.

B. Crear la Etiqueta:

1. Ve a “Etiquetas” -> “Nueva”.
2. Nombre: FBADS – Purchase.
3. Configuración:
   • Tipo: “Facebook Pixel”.
   • ID del Píxel: {{CONST – Facebook Pixel ID}}.
   • Nombre del Evento: Estándar -> Purchase.
   • Object Properties: (Usamos las variables específicas de compra que creamos).
     • content_ids: {{JS – Purchase – Product IDs}}
     • content_type: product
     • contents: {{DLV – Purchase – Products}}
     • value: {{DLV – Purchase – Value}}
     • currency: {{DLV – Purchase – Currency}}
4. Activación: Selecciona el activador Page View – Confirmación de Pedido.
5. Guarda la etiqueta.

Conclusión del Capítulo 4:
“¡Lo hemos logrado! Hemos construido un sistema de seguimiento completo para Meta, cubriendo todo el embudo de compra. Con estas etiquetas, no solo medimos el tráfico, sino que entendemos qué productos interesan, cuáles se añaden al carrito y, lo más importante, qué compras se realizan, con todo lujo de detalles. En el próximo capítulo, veremos cómo optimizar aún más nuestro seguimiento con eventos de categoría y la limpieza final.”

¡Excelente! Dedicar un capítulo entero a los eventos personalizados es una idea fantástica. Es lo que separa una guía básica de una guía profesional, y resuelve un problema estratégico muy importante que tú mismo detectaste.

Aquí tienes la redacción para el Capítulo 5.

Capítulo 5: Potencia tu Remarketing con Eventos Personalizados (ViewCategory)

En el capítulo anterior, configuramos los eventos estándar de Meta: PageView, ViewContent, AddToCart y Purchase. Estos son los pilares de cualquier seguimiento de comercio electrónico. Pero, ¿qué pasa si queremos medir una acción importante que Meta no tiene en su lista predefinida?

Aquí es donde entran en juego los eventos personalizados.

El Dilema: ¿”Contaminar” la Audiencia de ViewContent?

Cuando un usuario visita una página de categoría (como “Vestidos de niña”), está mostrando un interés claro. Podríamos, técnicamente, enviar otro evento ViewContent. Pero esto sería un error estratégico.

Si lo hiciéramos, nuestra audiencia de “Personas que hicieron ViewContent” se mezclaría con dos tipos de usuarios muy diferentes:

1. Usuarios de ALTA intención: Los que han visto un producto específico.
2. Usuarios de MEDIA intención: Los que han ojeado una lista de productos en una categoría.

Mezclar estos grupos “diluiría” nuestra audiencia más valiosa, la de los que han visto productos, y haría nuestro remarketing dinámico menos preciso.

La Solución Profesional: Mantendremos el evento ViewContent puro para las visitas a productos y crearemos nuestro propio evento personalizado para medir las visitas a categorías.

Paso 5.1: Crear el Activador para Vistas de Categoría

Primero, necesitamos un “interruptor” que se encienda únicamente cuando un usuario esté en una página de categoría. Ya tenemos la variable perfecta para esto: {{DLV – Page Category}}.

1. En GTM, ve a “Activadores” y haz clic en “Nuevo”.
2. Nombre del activador: Page View – Páginas de Categoría.
3. Configuración del activador:
   • Tipo: “Vista de página”.
   • Activar en: “Algunas vistas de página”.
   • Condición: DLV – Page Category | es igual a | category.
4. Guarda el activador.

Paso 5.2: Crear la Etiqueta ViewCategory

Ahora crearemos la etiqueta que enviará nuestro evento personalizado a Meta.

1. Ve a “Etiquetas” y haz clic en “Nueva”.
2. Nombre de la etiqueta: FBADS – Evento – ViewCategory.
3. Configuración de la etiqueta:
   • Tipo: “Facebook Pixel” (nuestra plantilla).
   • ID del Píxel: {{CONST – Facebook Pixel ID}}.
   • Event Name: Selecciona la opción “Custom” (Personalizado).
   • En el campo de texto que aparece, escribe el nombre que quieras para tu evento. Usaremos: ViewCategory.
     • (No necesitas registrar este nombre en ningún sitio antes. Al enviarlo por primera vez, se creará automáticamente en tu Administrador de Eventos de Meta).
   • Object Properties: Aunque es un evento personalizado, podemos enriquecerlo con parámetros para hacerlo más útil.
     • content_type: product_group (Le damos una pista a Meta de que se trata de un grupo de productos).
     • content_category: {{DLV – Page Category}} (Enviamos el nombre de la categoría, aunque parezca redundante, es una buena práctica).
4. Activación:
   • Selecciona el activador que acabas de crear: Page View – Páginas de Categoría.
5. Guarda la etiqueta.

El Resultado: ¿Qué Hemos Ganado?

Al implementar esta estrategia, hemos logrado tres cosas muy importantes:

1. Audiencia ViewContent Pura: Nuestra audiencia de ViewContent ahora solo contiene usuarios de alta intención que han visto productos específicos, haciéndola perfecta para el remarketing dinámico.
2. Nuevas Audiencias de Remarketing: Ahora podemos crear en Meta audiencias personalizadas súper potentes, como “Personas que realizaron el evento ViewCategory en los últimos 14 días”.
3. Segmentación Avanzada: Podemos refinar aún más esa audiencia. Por ejemplo, podemos crear una campaña de oferta de “Chocolates” y dirigirla solo a los usuarios que han visitado la categoría de chocolates, filtrando por el parámetro content_category.

Conclusión del Capítulo 5:
Has aprendido a ir más allá de los eventos estándar, creando un seguimiento a medida que te da un control total sobre tus audiencias y una ventaja estratégica sobre tus competidores. En el capítulo final, haremos las últimas verificaciones y la limpieza definitiva para dejar nuestro sistema listo para funcionar.

¡Exacto! Después del Capítulo 5, has completado toda la fase de construcción. Ya tienes todas las piezas del motor montadas.

El último capítulo debe ser la verificación final y el lanzamiento. Es el paso donde te aseguras de que todo el trabajo que has hecho funciona como un reloj suizo antes de aplicarlo a tu web en vivo.

Aquí tienes la redacción para ese capítulo final.

Capítulo 6: La Verificación Final y Publicación – ¡Lanzamiento!

¡Felicidades! Has llegado al último paso. Hemos construido un sistema de seguimiento completo, robusto y profesional. Antes de publicarlo para que empiece a recoger datos de todos tus usuarios, vamos a realizar una última verificación exhaustiva para asegurarnos de que todo funciona a la perfección.

Este paso es el más importante para garantizar la calidad de nuestros datos.

Paso 6.1: Activar el Modo Vista Previa

1. En tu espacio de trabajo de GTM, asegúrate de que no tienes ninguna etiqueta o activador abierto.
2. Haz clic en el botón “Vista Previa” en la esquina superior derecha para cargar todos tus cambios en el modo de depuración.

Paso 6.2: El Checklist de Verificación Final

Ahora, vamos a realizar un recorrido completo por la tienda, simulando ser un cliente. En cada paso, verificaremos dos cosas: el Depurador de GTM y el Meta Pixel Helper.

• Visita la Página de Inicio:
  • GTM: ¿Se activa la etiqueta FBADS – PageView?
  • Pixel Helper: ¿Ves el evento PageView (y solo ese)?
• Visita una Página de Categoría:
  • GTM: ¿Se activan FBADS – PageView y FBADS – ViewCategory?
  • Pixel Helper: ¿Ves los eventos PageView y el evento personalizado ViewCategory?
  • Verificación extra: ¿La etiqueta FBADS – Viewcontent NO se ha activado?
• Visita una Página de Producto:
  • GTM: ¿Se activan FBADS – PageView y FBADS – Viewcontent?
  • Pixel Helper: ¿Ves los eventos PageView y ViewContent con todos sus parámetros (content_ids, value, etc.)?
  • Verificación extra: ¿La etiqueta FBADS – ViewCategory NO se ha activado?
• Añadir un Producto al Carrito:
  • GTM: Al hacer clic en el botón, ¿se activa la etiqueta FBADS – AddToCart?
  • Pixel Helper: ¿Aparece el evento AddToCart con los datos del producto?
• Realizar una Compra de Prueba:
  • Navega por el checkout y completa un pedido.
  • En la página de “Gracias” / “Confirmación de Pedido”:
    • GTM: ¿Se activa la etiqueta FBADS – Purchase?
    • Pixel Helper: ¿Aparece el evento Purchase con todos los parámetros, incluyendo la lista de productos (content_ids, contents)?

Paso 6.3: ¡Publicar!

Si has marcado todas las casillas de nuestro checklist, significa que tu configuración es perfecta.

1. Vuelve a la ventana principal de GTM.
2. Haz clic en el botón azul “Enviar” en la esquina superior derecha.
3. Añade un “Nombre de la versión” descriptivo. Esto es muy importante para tu historial. Por ejemplo: Implementación Completa del Píxel de Meta v1.0.
4. Añade una “Descripción” detallada de los cambios: Configuración de eventos PageView, ViewContent, AddToCart, Purchase y ViewCategory. Creación de variables de DataLayer y limpieza de etiquetas antiguas.
5. Haz clic en “Publicar”.

¡Y ya está! Has completado con éxito la implementación. En las próximas horas, empezarás a ver todos estos eventos nuevos y enriquecidos fluyendo hacia tu Administrador de Eventos de Meta, listos para potenciar tus campañas.

¡Felicidades! El Lanzamiento es Solo el Comienzo

Has completado la implementación avanzada del Píxel de Meta con GTM. Con este sistema, no solo estás midiendo datos, sino que has construido los cimientos de oro para cualquier estrategia publicitaria seria. Tu seguimiento es ahora robusto, preciso y profesional.

Pero, ¿de qué sirve tener los mejores datos si no tienes la mejor estrategia para utilizarlos?

La información de conversiones, carritos abandonados y vistas de productos (ViewContent) que acabas de configurar es el combustible de alto octanaje para tus campañas de Facebook e Instagram Ads. Es la pieza que te permite reducir tu coste por adquisición (CPA) y aumentar el retorno de la inversión publicitaria (ROAS).

Si estás listo para ir más allá de la implementación y quieres un experto que traduzca estos datos en campañas de publicidad digital rentables y escalables…