Usar los datos de comercio electrónico estándar de GA en Facebook Pixel con GTM

En 2023, Simo Ahava ha publicado una guía sobre cómo reutilizar los datos de Google Analytics Enhanced Ecommerce en Facebook Pixel. Mientras que Enhanced Ecommerce es definitivamente una solución recomendada para rastrear las ventas con GA, todavía hay bastantes proyectos que utilizan su primitivo predecesor, Standard Ecommerce.

En caso de que no lo supieras, Standard Ecommerce está construido para rastrear sólo las ventas y los productos que fueron comprados. Eso es todo. Enhanced Ecommerce, por otro lado, está construido para rastrear todo el viaje – desde la impresión del producto para agregar al carro de compras, etc.

Dado que Simo ya ha proporcionado una solución para reutilizar los datos de Enhanced Ecommerce (de hecho, su Facebook Pixel Custom Tag Template puede hacer eso automáticamente), decidí ayudar a los que están usando el Ecommerce estándar en Google Analytics.

En esta guía, aprenderá a utilizar los datos de comercio electrónico estándar de Google Analytics en Facebook Pixel a través de Google Tag Manager.

Contenido

El requisito

Tengan en cuenta que la solución que describiré en esta entrada del blog funciona SOLAMENTE con el Comercio Electrónico Estándar ya configurado en su sitio web. Por lo tanto, si aún no lo ha hecho, lea esta guía primero y pídale a los desarrolladores que lo ayuden con eso. Su objetivo final – un desarrollador (o un plugin) debe empujar los datos de la transacción con el formato adecuado a la capa de datos.

Aquí tienes un ejemplo del resultado final que ya debes ver en la página de confirmación de pedido de tu sitio web (obviamente, los valores serán diferentes).

No todos estos puntos de datos son requeridos por Google. Pero ten en cuenta que Google requiere estrictamente que sigas su convención de nombres y su estructura de datos.

Algunas personas han implementado el Píxel de Facebook a través de HTML personalizado, mientras que otros están usando la plantilla de etiquetas personalizadas del Píxel de Facebook de Simo Ahava. En esta guía, ofreceré soluciones para ambos.

El proceso

Este es el proceso que tendremos que seguir:

• Crear una variable JavaScript personalizada que compruebe la capa de datos. Si contiene los datos del GA Standard Ecommerce, lo toma y produce una versión transformada de los datos (soportada por Facebook Pixel). No te preocupes, la capa de datos de comercio electrónico estándar de GA existente no se verá afectada.
• Esa variable se insertará en la etiqueta del Pixel de Facebook que es responsable de enviar los datos de compra

El Código

Primero, echemos un vistazo al código.

function() { var ecproducts = {{dlv - transactionProducts}}; if (Array.isArray(ecproducts)) { var productIds = ecproducts.map(function(products){ return !!products.sku && products.sku.toString(); }); var productTotalValue = ecproducts.reduce(function(total, current){ return !!precio.actual && !!cantidad.actual ? total + (precio.actual * cantidad.actual) : total; },0); var productQuantity = ecproducts.reduce(function(total, current){ return !!cantidad.actual ? total + parseInt(current.cantidad) : total; },0); var contenidoArr = ecproducts.map(function(products){ return { id: !!productos.sku ? productos.sku.toString() : undefined, item_price: !!productos.precio ? parseFloat(productos.precio) : undefined, quantity: !!productos.cantidad ? parseInt(products.quantity) : undefined }; }); return { content_ids : productIds, value : productTotalValue, num_items : productQuantity, contents : contentsArr, content_type : 'product' }; };}

Si no te importa la explicación de cómo funciona este código, sólo tienes que copiar este código, crear una variable Custom JavaScript en GTM(Variables > New > Custom JavaScript), pegar el código, añadir cualquier nombre a la variable y pasar al siguiente capítulo.

Si estás interesado en saber lo que hay debajo del capó, continúa leyendo.

Para crear este código, usé la solución de Simo como una gran inspiración.

Ya que estamos usando una variable de JavaScript personalizada aquí, tenemos que empezar con una función anónima que devolverá un objeto final para el FacebookPixel. Al principio, defino una variable ecproducts que tomará el arreglo de transacciónProducts de la Capa de Datos (explicaré más acerca de esta variable en el próximo capítulo de esta entrada de blog).

function() { var ecproducts = {{dlv - transactionProducts}}; if (Array.isArray(ecproducts)) {

Por lo tanto, si la transacciónProductos existe y su tipo es un arreglo, la variable Custom JavaScript en GTM comenzará a construir la salida amigable para Facebook.

Ahí es donde ocurre la magia principal. En primer lugar, toma el sku de cada producto en la matriz y lo convierte en una cadena (si es que existe el sku ). Todos estos skus se almacenarán en una matriz.

    var productIds = ecproducts.map(function(products){ return !!products.sku && products.sku.toString(); });

Esto es necesario porque Facebook Pixel esperará un parámetro llamado content_ids que contiene el array de todos los ids de productos comprados. Para entender mejor cómo funciona esta parte del código, deberías aprender el método del mapa de arreglos.

Luego el código prepara un parámetro que devolverá el valor total de todos los productos que fueron comprados. Esta parte comprobará todos los productos de la matriz TransactionProducts. Si un objeto de producto contiene claves de precio y cantidad, entonces calculará el valor total de ese producto en particular que fue comprado (por ejemplo, 4 productos x $12) devolverá 48:

    var productValorTotal = ecproducts.reduce(function(total, current){ return !!precio.actual && !!cantidad.actual ? total + (precio.actual * cantidad.actual) : total; },0);

Hablando del código productoValorTotal arriba, hay dos cosas útiles que debes aprender: el método de reducción de arreglos y el operador ternario.

El siguiente paso es tomar la clave de cantidad de cada producto y calcular la cantidad total. Si existe una clave de cantidad , entonces se convierte en un número entero (en caso de que el tipo de esa clave fuera diferente) y luego se añade a una suma total:

var productQuantity = ecproducts.reduce(function(total, current){ return !!current.quantity ? total + parseInt(current.quantity) : total; },0);

Entonces el código construirá un conjunto de todos los productos en el DataLayer.push estándar de Ecommerce y lo hará más amigable a los pixeles FB. Utiliza el método del mapa de arreglos y toma 3 claves de cada producto: esquí, precio, cantidad. Luego construye un nuevo arreglo donde cada producto contendrá 3 claves: id, item_price, quantity. Si una determinada clave de un producto no sale, se devolverá indefinida.

var contentsArr = ecproducts.map(function(products){ return { id: !!products.sku ? products.sku.toString() : undefined, item_price: !!products.price ? parseFloat(products.price) : undefined, quantity: !!products.quantity ? parseInt(products.quantity) : undefined }; });

Y finalmente, construyamos la salida final de todos los puntos de datos que fueron procesados. Esta declaración final de devolución devolverá un objeto, donde todos los ids de producto se almacenarán en una matriz content_ids, el valor total será devuelto como la clave de valor , el número total de productos será devuelto como la clave num_items y la clave de contenido será una matriz que contiene todos los detalles del producto (id, precio, cantidad).

return { content_ids : productIds, value : productTotalValue, num_items : productQuantity, contents : contentsArr, content_type : 'product' }

En el capítulo de requisitos de esta entrada de blog, he compartido un ejemplo del empuje de la capa de datos de comercio electrónico estándar. Si usamos la variable Custom JavaScript que acabo de describir, su resultado sería:

{ content_ids: ['DD44', 'AA1243544'], valor: 31.97, num_items: 3, contenido: [ {id: 'DD44', item_price: 11.99, quantity: 1}, {id: 'AA1243544', precio: 9.99, cantidad: 2} ]}

Variable de la capa de datos

Para que el código personalizado (del capítulo anterior) funcione, es necesario crear una Variable de la Capa de Datos que devuelva la clave de la transacciónProductos de la Capa de Datos.

Nómbrela exactamente dlv – transactionProducts. Si quieres usar un nombre diferente, entonces edita la 2ª línea de mi código.

function() { var ecproducts = {{dlv - transactionProducts}};

En lugar de «dlv – transactionProduct», introduce el nombre de tu Variable de la Capa de Datos.

Pixel Tag de Facebook (implementado a través de Tag Template)

Primero, empezaré con la plantilla de etiquetas personalizadas. Si aún no has creado una etiqueta de compra, ve a Tags > New > Facebook Pixel e introduce la siguiente configuración:

• Pixel de Facebook ID
• Nombre del evento > Estándar > Compra

Si tiene una configuración adicional usada en otras etiquetas de Pixel FB (por ejemplo, la configuración de GDPR), configúrelas aquí también.

Si no tienes idea de cómo trabajar con esa plantilla, descarga mi Facebook Pixel Cheat Sheet (en el formulario de arriba de este capítulo).

Luego ve a Propiedades del objeto > C argar propiedades de la variable y selecciona la variable de JavaScript personalizada que has creado anteriormente en esta entrada del blog.

El Pixel de Facebook también requiere pasar el Código de la Moneda junto con los datos de la Compra. Si tu sitio web siempre funciona con una sola moneda, puedes añadirla manualmente de esta manera (por supuesto, introduce el código de la moneda que estás usando):

Alternativamente, si el código de moneda se almacena en la Capa de datos, puede crear una Variable de la Capa de datos y usarla en la configuración (aquí hay un ejemplo – puede que necesite adaptarla a su caso):

Etiqueta de píxeles de Facebook (implementado a través de la etiqueta HTML personalizada)

Reemplaza cjs – ga ecommerce transaction to f b pixel con el nombre de tu variable JavaScript personalizada. Adicionalmente, deberías hacer una pequeña actualización en el código de esa variable JS personalizada.

En la declaración final de devolución, añada una moneda clave adicional y luego introduzca el código de la moneda que utiliza su tienda (si opera con una sola moneda). Además, agregue una coma después de contentsArr.

    return { content_ids : productIds, value : productTotalValue, num_items : productQuantity, contents : contentsArr, content_type : 'product', currency : 'USD' }

Este código siempre devolverá el USD. Si tienes el código de la moneda dinámicamente empujado a la Capa de Datos, podrías crear una variable de la Capa de Datos y usarla en su lugar:

    return { content_ids : productIds, value : productTotalValue, num_items : productQuantity, contents : contentsArr, content_type : 'product', currency : {{dlv - currencyCode}} }

Cuando hayas actualizado/creado una etiqueta, puedes usar el mismo disparador que usaste en la etiqueta GA Standard Ecommerce. Si quieres, también puedes disparar la etiqueta de compra de Píxeles de Facebook en algún momento posterior (por ejemplo, cuando todos los demás scripts se hayan cargado). Pero asegúrese de no disparar la etiqueta de Pixel de FB ANTES de que los datos de comercio electrónico estándar sean empujados a la capa de datos.

Después de que agregue/actualice el disparador, guarde la etiqueta.

Probemos

Ahora, el tiempo tiene un código para probar su configuración. Después de hacer todos los cambios en el contenedor, refresca el modo de vista previa y depuración del GTM.

Además, necesitarás instalar la extensión del navegador Facebook Pixel Helper. Cuando lo hayas hecho, haz una compra en tu sitio web. Cuando lo hagas, deberías ver que el icono del Ayudante de Pixeles de Facebook ha cambiado de color a azul. Haz clic en él.

Entre varios eventos que fueron rastreados, también deberías ver el evento de Compra. Haz clic en él para ver qué tipo de parámetros personalizados se enviaron. Esos parámetros deben coincidir con los datos de comercio electrónico que se ven en la pestaña de la capa de datos del modo de vista previa del GTM.

Si no puede ver el evento de compra, compruebe si la etiqueta de compra de píxeles de FB se disparó. En mi caso, el dataLayer.push está usando una transacción de valor de evento. Por lo tanto, hice clic en ella y comprobé si la etiqueta se disparó.

El siguiente lugar donde puede comprobarlo es business.facebook.com. Ingresa a esa cuenta, ve al Administrador de eventos y abre el píxel al que estás enviando los datos de la compra.

Luego ve a Eventos de prueba y comprueba si ves los eventos de compra (se te pedirá que introduzcas la URL de tu sitio web).

Una vez que veas el evento, haz clic en él para comprobar qué tipo de datos se enviaron.

Si no utiliza anuncios dinámicos, no dude en ignorar la siguiente advertencia:

• Píxel y catálogo no emparejados

¡Y eso es todo!

Cómo reutilizar los datos de comercio electrónico de GA Standard en Facebook Pixel: Palabras finales

Esta entrada del blog es una de esas situaciones en las que puedes sentir el poder del Google Tag Manager. En lugar de pedirle a un desarrollador que empuje los datos compatibles con los píxeles de FB a la capa de datos, puedes reutilizar los datos que ya están presentes.

Por supuesto, esta opción requiere algunos conocimientos de codificación, pero créeme, ser capaz de lograr algo así es muy gratificante 🙂

¿Tienes alguna pregunta? Siéntase libre de publicar un comentario a continuación.