En este post te voy a hablar de dos plantillas personalizadas (custom templates) de variables que he desarrollado para Google Tag Manager. Las he llamado Ecommerce array generator y GTM server-side ecommerce array generator y su cometido es el de devolver un array que contenga todos los valores de una propiedad determinada de todos los ítems en una implementación de Enhanced Ecommerce de GA4 con Google Tag Manager. La primera de las variables está desarrollada para contenedores de GTM client-side, mientras que la segunda está concebida para contenedores de GTM server-side. Su objetivo es el de facilitar tu trabajo si tienes que extraer estos valores del dataLayer u event data object para enviarlos en este formato a un end-point que así lo requiera, como Meta o EventStream, por ejemplo.
El dataLayer de Google Tag Manager genera una estructura anidada de items
view_item_list y está inspirado en la documentación oficial de Google al respecto: ‘Guía de comercio electrónico (Google Analytics 4) para desarrolladores’, Google Tag Manager. // Measure product views / impressions
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "view_item_list",
ecommerce: {
items: [
{
item_name: "Triblend Android T-Shirt", // Name or ID is required.
item_id: "12345",
price: 15.25,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Mens",
item_category3: "Shirts",
item_category4: "Tshirts",
item_variant: "Gray",
item_list_name: "Search Results",
item_list_id: "SR123",
index: 1,
quantity: 1
},
{
item_name: "Donut Friday Scented T-Shirt",
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Mens",
item_category3: "Shirts",
item_category4: "Tshirts",
item_variant: "Black",
item_list_name: "Search Results",
item_list_id: "SR123",
index: 2,
quantity: 1
},
{
item_name: "Blue and white T-Shirt",
item_id: "87127",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Womens",
item_category3: "Shirts",
item_category4: "Tshirts",
item_variant: "Blue",
item_list_name: "Search Results",
item_list_id: "SR123",
index: 2,
quantity: 1
}]
}
});Si estás trabajando en una implementación de GTM server-side, sucede lo mismo con el event data object si el evento procesado contiene un payload de Enhanced Ecommerce de GA4: se crea un array items que contiene un número determinado de objetos, cada uno con sus propiedades.
Las propiedades de tus items de Enhanced Ecommerce, agrupadas en un array
Supón que estás trabajando con un vendor que está esperando recibir determinadas propiedades de los items que tienes en tu dataLayer en un array (este es el caso, por ejemplo, del parámetro content_ids de Meta). Tendrías que de alguna manera exponer esta clave en el dataLayer o desarrollar una lógica desde GTM para que una variable devolviera ese array. Y este es precisamente el caso de uso que he querido cubrir con los dos custom variable templates y que te cuento en este post.
Si te has topado con casos de uso como el anterior, puedes aprovechar estas dos variables para generar un array que contenga una determinada propiedad de todos tus items expuestos en el dataLayer o en el event data object. Podrías, por ejemplo, generar un array que contuviese todos los parámetros item_name, otro con los item_id y otro con los parámetros price. Después sólo tendrías que añadir cada una de estas variables al mapping point correspondiente en la etiqueta del vendor con el que estás trabajando, Facebook Conversions API, por ejemplo.
Es muy fácil usar estas variables personalizadas, y verás que también es muy sencillo integrarlas en tu contenedor de Google Tag Manager, ya sea client-side o server-side. Lo primero que tienes que hacer es descargar el archivo .tpl del template que necesites para tu implementación de su respectivo repositorio de GitHub:
- GTM variable templates: ecommerce arrays generator
- GTM server-side variable templates: ecommerce array generator
Una vez descargado el archivo .tpl, impórtalo a tu galería de plantillas de variables y listo, ya podrás usar este template para crear una nueva variable personalizada.
A partir de aquí ya sólo tienes que configurar la propia variable cuando la crees. Para ello debes indicar el item property del cual quieres generar el array: item_brand o quantity, por ejemplo. Nada más, es así de fácil. El procedimiento es el mismo tanto si estás usando el custom variable template para contenedores de GTM server-side como si estás usando la variable para GTM server-side.
Desde un punto de vista técnico, el desarrollo de estos templates es muy sencillo. Básicamente lo que hago es acceder a cada uno de los objetos contenidos en el array items del dataLayer o del event data object con el método .forEach() Una vez dentro, recorro cada objeto con un for…of loop. Si el objeto en cuestión contiene la propiedad que he indicado al configurar el custom template variable, lo empujo a un array vacío que previamente he creado con el método .push(). Este será el array que devuelva la variable. El código está comentado, por si te pica la curiosidad.
El GTM custom template variable, en acción
A continuación te voy a mostrar una de estas variables en acción. Usaré como ejemplo la variable desarrollada para GTM server-side, pero recuerda que el funcionamiento es el mismo en la variable para contenedores GTM client-side.
Una vez importado el template a mi contenedor GTM server-side, configuro seis variables para generar un array con cada una de ellas para las propiedades item_category, item_id, index, item_list_name, item_name y price.
Mi GA4 client intercepta un request entrante con payload de Enhanced Ecommerce a mi tagging-server y genera un event data object con el mismo.
Cada una de las variables configuradas accede a la propiedad correspondiente dentro de cada uno de los itmes contenidos dentro del array items y genera un array con estos valores. Voilá!
Reflexiones finales
Hay muchas maneras de enfrentar y solucionar un caso de uso como éste. Como te decía al principio de este post, puedes optar por exponer en tu dataLayer una clave que ya contenga un array con los valores de Enhanced Ecommerce que necesitas. Si sigues esta senda, puedes lanzar la solicitud a tu equipo de desarrollo o hacer el ejercicio tú mismo desde Google Tag Manager (te explico cómo en el post ‘Cómo aprovechar los Javascript closures en Google Tag Manager (GTM)’)
Pero yo creo que en este caso es más sencillo y limpio trabajar con una variable que procese el contenido del dataLayer o del event data object y devuelva el array. En estos casos, es cierto que las Custom Javascript Variables (variables de Javascript personalizado) de Google Tag Manager son el recurso al que acudir. Al fin y al cabo permiten trabajar con Javascript de una manera súper fácil para devolver un valor. Pero lo cierto es que si haces desarrollos en Javascript desde GTM lo correcto es usar, en la medida de lo posible, los GTM custom templates. Esto es así por el sandboxed Javascript que usan estas plantillas, que reduce al máximo cualquier tipo de riesgo asociado con el uso de Javascript desde GTM.