#GTMTips: Usa la capa de datos de comercio electrónico mejorada con Fb Pixel

Una pregunta recurrente en el Administrador de etiquetas de Google comunidades (por ejemplo foros de productos) es Cómo utilizar un Ecommerce Mejorado dataLayer objeto con el Código de píxel de FbEs una pregunta común desde que se ejecuta un píxel de conversión de Fb en un sitio que también recopila datos de la tienda en Google Analytics. Comercio electrónico mejorado Los informes son probablemente un escenario muy típico.

Nota al margen: Dado que Google+ está a punto de desaparecer, he creado un archivo de toda la comunidad que puedes explorar y realizar búsquedas de texto.

He compartido un consejo sobre esto. antespero creo que necesito ser aún más específico y dar ejemplos concretos de cómo completar las distintas propiedades del objeto de píxel de Fb.

Para obtener una guía sobre cómo implementar el píxel de Fb, consulte la increíble guía de Yehoshua. Guía de Fb Pixel con Google Tag Supervisor.

X

El boletín informativo de Simmer

Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!

Consejo 95: Utilice el píxel de Fb con una capa de datos de comercio electrónico mejorada

La solución aquí es crear un API a la que puedes pasar tu matriz de productos de comercio electrónico mejorado y te devolverá la matriz reducida y convertida a los distintos formatos requeridos por el píxel de Fb.

Lo primero es lo primero: necesitas… crear la variable de JavaScript personalizada.

1. Crear un nuevo Variable de JavaScript personalizada en la interfaz de usuario de GTM.

2. Nombralo {{EECFB API}} (o algo menos abominable, si lo prefieres).

3. Añade el siguiente código dentro:

operate() {
  return operate(merchandise) {
    if (!Array.isArray(merchandise)) {
      return;
    }
    
    var idList = merchandise.map(operate(prod) {
      return !!prod.id && prod.id.toString();
    });
    
    var totalValue = merchandise.scale back(operate(acc, cur) {
      return !!cur.worth && !!cur.amount ? acc + (cur.worth * cur.amount) : acc;
    }, 0);
    
    var totalQuantity = merchandise.scale back(operate(acc, cur) {
      return !!cur.amount ? acc + parseInt(cur.amount) : acc;
    }, 0);
    
    var contentsArray = merchandise.map(operate(prod) {
      return {
        id: !!prod.id ? prod.id.toString() : undefined,
        item_price: !!prod.worth ? parseFloat(prod.worth) : undefined,
        amount: !!prod.amount ? parseInt(prod.amount) : undefined
      };
    });
    
    return {
      content_ids: idList,
      worth: totalValue,
      num_items: totalQuantity,
      contents: contentsArray
    };
  };
}

Este código en realidad devoluciones una función, por lo que es básicamente un contenedor para una cierreque luego puedes llamar en tus otras etiquetas usando un parámetro.

Cuando invoca esta API en una etiqueta HTML personalizada, por ejemplo, necesita tener una referencia variable a la merchandise matriz a mano para pasar a esta API como parámetro (pronto te mostraré un ejemplo).

La API devuelve un objeto con cuatro propiedades:

Cómo juntarlo todo

Tomemos el Fb Compra evento como ejemplo. Esto es lo que debes hacer.

Primero, digamos que esto es lo que su comercio electrónico mejorado compra El objeto se ve así:

ecommerce: {
  buy: {
    merchandise: {
	  actionField: {...},
	  merchandise: ({
        id: 'shirt1', 
        title: 'T-Shirt', 
        worth: '15.99', 
        amount: 2
      },{
        id: 'pants2', 
        title: 'Pants', 
        worth: '9.99', 
        amount: 3
      })
    }
  }
}

1. Primero, cree una variable de capa de datos para el nombre de la variable ecommerce.buy.merchandise y nómbralo {{ecommerce.buy.merchandise}}. Esta es la referencia a los productos en su objeto de compra de comercio electrónico mejorado.

2. Crea una etiqueta HTML personalizada que se lively después de que se haya inicializado tu píxel de Fb.

3. Así es como podría verse el contenido:

<script>
  (operate() {
    // Get reference to the Enhanced Ecommerce merchandise
	var prods = {{ecommerce.buy.merchandise}};
	
	// Ballot the customized Fb API with this array
	var fbObj = {{EECFB API}}(prods);
	
	// Create the FB pixel name
	if (typeof window.fbq === 'operate') {
	  window.fbq('monitor', 'Buy', {
        worth: fbObj.worth,
        content_ids: fbObj.content_ids,
        contents: fbObj.contents,
        num_items: fbObj.num_items
	  });
	}
  })();
script>

Es una situación imaginaria: normalmente no enviarías el evento de compra de Fb con esa carga útil.

De todos modos, lo que sucede aquí es que primero se obtiene una referencia a la merchandise matriz en el objeto de compra de comercio electrónico mejorado. Luego, llama a la {{EECFB API}} Pasando esa matriz como parámetro, la API devuelve un objeto que se almacena en la fbObj variable native.

Luego, simplemente accede a las propiedades de este objeto (enumeradas en la tabla anterior en este artículo) en el fbq() Llamada. Así es como se crea la llamada de píxel requerida con todos los parámetros necesarios.

Entonces el window.fbq() El método es de hecho llamado con estos valores:

window.fbq('monitor', 'Buy', {
  worth: 61.95,
  content_ids: ('shirt1', 'pants2'),
  contents: ({
    id: 'shirt1', 
    item_price: 15.99, 
    amount: 2
  },{
    id: 'pants2', 
    item_price: 9.99, 
    amount: 3
  }),
  num_items: 5
});

Resumen

Lo que estás creando aquí es un ayudante función que analiza automáticamente tus productos de comercio electrónico mejorado y escupe los valores en un formato requerido por el píxel de Fb.

Puedes ampliar libremente la variable con otras propiedades, y adaptarla a otros formatos de objetos fuente también debería ser bastante sencillo.

En cualquier caso, déjame saber en los comentarios si crees que la API necesita otras propiedades o si necesitas ayuda para ampliarla.