En este post te voy a enseñar un método muy sencillo y práctico para auditar el payload de las llamadas utag.view()
y utag.link()
de tu implementación de Tealium iQ. No es ni mucho menos la única manera de hacer esto, pero sí creo que es un método de debugging muy fácil de usar y muy limpio. Además, como verás a continuación, te va a servir para conocer mejor el funcionamiento del objeto utag. Consiste básicamente en añadir una línea de código a estas llamadas para logar su contenido en la consola de tu navegador. Así podrás ver su payload en el momento en que se ejecuten.
utag.view y utag.link: dos métodos del objeto utag de Tealium iQ
utag.js
crea el objeto utag y lo asigna al global namespace. Siendo así, puedes acceder a este objeto escribiendo window.utag
o simplemente utag
. Fíjate: utag.cfg
contiene, por ejemplo, datos relativos a la configuración del profile vigente. Mientras que utag.data
, por otra parte, es un objeto que contiene los valores del objeto utag_data
con otros elementos del site (cookies, elementos de DOM, metaetiquetas, etc.) Los métodos view y link del objeto utag albergan las funciones de tracking de Tealium iQ: utag.view()
y utag.link()
. La primera sirve para notificar a Tealium iQ de una página vista (se ejecuta de forma automática cuando se carga la librería utag.js), mientras que la segunda para notificar de una interacción que tiene lugar en una página (un evento, vaya). Tanto utag.view()
como utag.link()
aceptan tres argumentos:
- Un objeto que contiene el valor de las variables del data layer que se van a informar con la llamada. Este parámetro es obligatorio.
- Una función callback. Se ejecutará cuando la llamada
view()
olink()
termine, a su vez, de ejecutarse. Este parámetro es opcional. - Un array que contenga una colección de id’s de tags. Si se incluye este argumento en la función (es opcional), las etiquetas a las que hagan referencia los id’s se activarán, con independencia de la configuración de sus load rules.
Puedes ver estos argumentos si imprimes los métodos utag.view
y utag.link
en tu consola, o localizando las funciones en la librería utag.js
, fíjate:
Pues bien, yo te propongo un sencillo ejercicio de Javascript que consiste en añadir una línea de código a los métodos utag.view()
y utag.link()
para logar su contenido en la consola de tu navegador cuando se ejecuten. Para ello he desarrollado un simple script que se encargará de:
- Alojar las funciones
utag.view()
yutag.link()
en dos variables añadiendo una línea de código para logar su contenido a la consola de tu navegador. - Asignar cada una de estas funciones como el nuevo valor de los métodos view y link del objeto utag.
El código es el siguiente:
(function () {
let viewLogger = function(a, c, d) {
//Adding this line of code will log argument a to the browser's console
console.table(a);
//Original, unmodified code of utag.view() function
return this.track({
event: 'view',
data: a || {},
cfg: {
cb: c,
uids: d
}
})
};
let linkLogger = function(a, c, d) {
//Adding this line of code will log argument a to the browser's console
console.table(a);
//Original, unmodified code of utag.link()
return this.track({
event: 'link',
data: a || {},
cfg: {
cb: c,
uids: d
}
})
};
utag.view = viewLogger;
utag.link = linkLogger;
})();
Dos apuntes:
- Llamo al método
console.table()
para logar el contenido de las llamadas a la consola de mi navegador en formato tabla. Me gusta el output, me resulta más fácil de leer queconsole.log()
para casos como este. Además, si usará el métodoconsole.log()
tendría que usar el métodoJSON.stringify()
para convertir el objeto a un string. - Ejecuto la función en un IIFE, es decir, en una Immediately Invoked Function Expression. De esta forma el script se ejecute inmediato, no tengo que invocarlo.
El contenido de las llamadas utag.view() y utag.link(), en la consola de tu navegador
utag.view()
sin necesidad de recargar la página, y por lo tanto sin tener que ejecutar el script de nuevo. El contenido de la llamada de tracking, procesado
¿Lo ves? El payload de estas llamadas utag.view()
y utag.link()
se procesa y se fusiona con otras variables que utag.js
incorpora: variables DOM, variables Meta, variables JS, cookies, etc. Así es, de hecho, cómo se constituye el objeto b de Tealium iQ. Esto es especialmente interesante si tienes en cuenta que el objeto utag.data
procesado en la carga de página sigue igual, no ha cambiado. Esto tiene sentido, el site en el que estoy haciendo las pruebas es una SPA, y por lo tanto no hay una recarga real de página. Te explico esto con detalle en el post ‘Cómo procesan las llamadas de tracking el dataLayer de Google Tag Manager (GTM) y la librería utag.js de Tealium iQ’.
Fíjate en el anterior ejemplo. Verás que aún a pesar de haberse lanzado tres llamadas utag.link()
el objeto utag.data
inicial (el procesado en la carga inicial de la página) sigue sin cambiar. El valor de la propiedad ut.event
sigue siendo 'view.
Ojo, esto no es una extensión
Es un sencillo snippet pensado para que lo ejecutes en la consola de tu navegador. Técnicamente podrías desarrollar una extensión en Tealium iQ para logar de alguna forma el contenido de tus llamadas. Pero para eso probablemente tendrías que referenciar al objeto b, una copia local del data layer de Tealium que referenciar desde tus tags y extensions. Pero esa es otra historia. Espero que este script te ayude en tus implementaciones.