Facebook Conversions API + Tealium EventStream

¿Hay algo más emocionante ahora mismo en el mundo de la implementación que la parte Server-Side? Si estoy escribiendo este artículo está claro que voy a decir que no. Pero es que realmente pienso que lo es. Gracias a este proceso somos capaces de cosas que hasta que entró este agente en la ecuación eran impensables a través de una herramienta de implementación, cómo por ejemplo enriquecer tu información analítica con APIs de terceros o unificar todas la carga de etiquetas que hasta ahora estaban en la web en un sólo envío de información.

EventStream es el módulo de trabajo Server-side de Tealium que nos permite recoger la información que se lanza de la web (eventos) en un servidor propio. Esto nos va a hacer posible manipularla y enriquecerla del modo en el que queramos, para más tarde enviarla a la plataforma que necesitemos. En este caso vamos a ver un caso de uso muy prototípico: cómo configurar el conector con la Conversions API de Facebook. Este método nos ofrece la ventaja adicional de no perder información por medios externos, como pueden ser los bloqueadores de anuncios o los navegadores más estrictos con la privacidad (Brave, Safari, Firefox…).

Para poder realizar la configuración de EventStream necesitamos varios puntos que veremos a lo largo de este artículo. Para empezar, asumimos que tenemos el módulo IQ activado dentro de nuestra cuenta de Tealium y que hay un utag_data definido en la web (aunque veremos como poder realizar una configuración «manual» también). Una vez tenemos esto claro, vamos al primer paso de la configuración.

Etiqueta Tealium Collect

Debemos entender que, tal y cómo explica Lukas Oldenburg (de la mano de Jim Gordon) en este excelente artículo, lo que ahora mismo estamos entendiendo como configuración Server-Side consiste en realidad en una configuración Client-to-Server-to-Vendor. Esto quiere decir que recogemos los datos del cliente, los cargamos en nuestro servidor y los lanzamos a la plataforma de terceros desde este último. La configuración siempre va a ser algo similar a esta imagen:

Teniendo esto claro, ya habremos imaginado que lo primero que debemos configurar es la herramienta que recogerá toda la info que existe en la parte del cliente y la enviará a nuestro servidor. En este caso, esto lo va a realizar la etiqueta Collect Tag en nuestro módulo IQ. Como se puede observar en la imagen, lo importante de esta etiqueta son dos cosas: que el load rule sea “All Pages” y que definamos el Data Source Key de manera correcta.

Para obtener este Key lo que tendremos que hacer es irnos a nuestro módulo EventStream y clicar en el apartado de Sources. Una vez dentro, pulsaremos el botón de Add New Source y nos aparecerá un pop-up. En este pop-up, escogeremos lo siguiente:

Por supuesto, en test deberá ir el sitio web que vayamos a configurar.

Si tenemos claras las event specs, las podemos seleccionar en este punto, pero vamos a saltarnos esto de momento para ser más didácticos:

Aquí, como vemos, obtenemos el data source key que necesitamos para nuestra etiqueta Collect. Clicamos en Save & Continue y nuestra fuente de datos estaría creada. Ahora sí, volvemos a nuestra etiqueta Collect y añadimos el key que nos ha proporcionado la nueva fuente. Publicamos cambios en ambos entornos (eventstream y IQ).

Si todo ha salido correctamente, nos iríamos a la parte de EventStream/Live Events y deberíamos empezar a ver algo como esto al cabo de unos segundos (aunque la primera vez sólo veremos barras en azul):

Esto querrá decir que ya estamos recibiendo los eventos que ocurren en la web en nuestro servidor, y a partir de este momento podemos transformar, enriquecer u opacar los datos que queramos enviar a otra plataforma.

Event Specs

Antes incluso de que definamos el conector a través del cual van a ir enviados los datos, debemos definir los event specs. Los event specs nos van a ayudar a filtrar los eventos que necesitamos con la información necesaria para enviarla de manera correcta a la plataforma de tercero mediante el servidor. ¿Cómo lo hacen? Pues básicamente se trata de un mecanismo a través del cual vamos a recoger sólo los eventos que nos interesan, con la información relevante para ellos. Por ejemplo:

Aquí vemos 4 puntos importantes: event name, attribute, data type y required. El primero, event name, es el más importante de todos: es el que filtra sólo los eventos que tienen este nombre. Esto lo conseguimos a través del tealium_event que se debe lanzar en la página. Si la configuración del utag_data y de los eventos (ya sean utag.links o utag.views) es correcta, no deberemos configurar nada de forma manual. Este no es nuestro caso aquí, así que ahora lo veremos más adelante. 

Por otro lado, tenemos los atributos, que vienen determinados también por esa configuración de utag_data. Todo lo que esté dentro de utag_data se recogerá automáticamente aquí. El type determina el formato del dato que estamos recogiendo y es importante que esté bien categorizado. Si, en algún caso, es necesario que algún atributo sea obligatorio para que se recoja el spec, así lo marcaremos en el campo habilitado para ello.

Básicamente con esta configuración en EventStream lo que estamos diciendo es que queremos recoger todos los eventos que se llamen “search_server” y, a su vez, recoger todos los atributos seleccionados que estén populados en el momento del lanzamiento del evento. Como ya comentamos, esto es “sencillo” de realizar si la configuración del utag data y los eventos está bien definida en la web. Si no es así podemos lanzar el evento de forma manual (técnica no recomendada, pero que puede ser útil en momento de necesidad), por ejemplo con las extensiones del módulo de IQ. En el siguiente ejemplo, vamos a lanzar un utag.link con el evento determinado que necesitamos (‘search_server`) cuando ocurra una acción en concreto (el usuario ha llegado a un tipo de página «vista», que nos indica que está viendo resultados de búsqueda). Esto nos servirá para alimentar el evento «search» predeterminado de FB con la información relevante recogida en el servidor:

var event_search_generator = (function(){
    if(b["page_type"] === 'vista'){
        return function(){
            utag.link({
                'tealium_event': 'search_server',
                'product_impression_name': b["product_impression_name"],
                'product_impression_brand': b["product_impression_brand"],
                'product_impression_id': b["product_impression_id"],
                'product_impression_price': b['product_impression_price'],
                'product_impression_category': b['product_impression_category'],
                'contenido': b['contenido'],
                'content_type': 'product_group',
                'busqueda_ciudad': b['busqueda_ciudad'],
            })
        }
    }
})();

event_search_generator()

Este código dependerá en gran medida de lo que exista en nuestra utag_data, porque vamos a extraer información de este datalayer. Por supuesto, también podríamos generar nuestras propias variables e introducirlas en el mismo, pero aquí la mejor práctica sería hablar con desarrollo e introducir esto desde el propio código de la web para trabajar de la forma más robusta.

Event Connector

Algo como esto debería aparecer al final de la configuración de Facebook con EventStream. Para ello, debemos configurar cada conector con una acción diferenciada, esto es: si queremos lanzar el evento a FB de page_view así como el de search, deberemos generar dos conectores, uno para cada una de estas acciones. Vamos a ir paso a paso a través de la configuración del más complejo de estos eventos, el purchase (que en este caso actúa como conversión).

En el primer punto de la configuración, debemos elegir la fuente de datos y de dónde se va a alimentar. Nuestra Data source siempre será el All data sources, ya que aquí sólo tenemos esto configurado a través de la collect tag. Si tuviéramos otros tipos de fuente, deberíamos seleccionar entonces la adecuada. Una vez tenemos esto, seleccionamos también nuestro feed, que en este caso va a estar representado por el event spec “lead_server”. Sólo queremos los eventos que tienen este nombre, por lo que de esta manera nos aseguramos que así sea.

El siguiente paso es configurar el conector. Para ello, lo primero que debemos hacer es autorizar a Tealium como partner nuestro en la cuenta de Facebook. Deberemos seguir estos pasos. Una vez lo tengamos, cogemos nuestro identificador de pixel de FB, lo colocamos en su casilla y testeamos la conexión. Si todo va bien, debería aparecer el Connected!

Ahora viene la parte más complicada, el enriquecimiento de los eventos que lanzamos a facebook:

Lanzaremos un evento que siga las directrices de nomenclatura marcadas por facebook y comenzaremos a popular valores para los atributos requeridos y para los que van a aportar valor a nuestra captura:

Una vez termines la configuración puedes publicar tus cambios y esperar a que comiencen a entrar eventos. Si todo va bien, algo como esto debería aparecer:

Por otro lado, en FB existe un score sobre la calidad de matcheo que pueden realizar con sus usuarios, algo que se puede comprobar dentro de Insights. Cuánta más información se proporcione sobre el usuario concreto, más alta será la nota. Podremos ver algo como esto:

Conclusiones

He escogido mostrar el caso que hemos observado aquí por dos razones: no es habitual encontrar información sobre las configuraciones en Tealium (y ahora que he podido profundizar más en ella me parece una de las opciones más avanzadas del mercado) y, a la vez, la CAPI de Facebook es una de las implementaciones más estándares que nos podemos encontrar en materia Server-Side.

Pero el haber visto este caso no nos debe hacer caer en la tentación de pensar que este desarrollo está pensado exclusivamente para conseguir tener más información sobre las conversiones en una web. Las soluciones Server-Side Tracking nos ofrecen una capacidad y un poder sobre nuestra recolección de datos que hasta ahora no teníamos y, para mí, se van a convertir en la opción preferente en esta nueva era digital que nos aguarda.