Sí, ha llegado, y viene para quedarse

Estamos en el punto de madurez del mercado en el que ya muy pocas compañías faltan por subir al tren de la transformación digital, que comentábamos en publicaciones anteriores. Por suerte es un tren que pasa todos los días y no solo una vez.

Un marco habitual en un proyecto digital suele implicar el trabajo conjunto de un equipo de online marketing, ventas, business, análisis de datos, implementación técnica…, como vemos, bastante complejo. Esta vez vamos a tratar de dar visibilidad y protagonismo a un topic muy habitual y recurrente entre los equipos de marketing (especialmente de campañas), pero que no siempre goza de la profundidad de comprensión necesaria, sobre todo desde un punto de vista técnico. Hablamos del archiutilizado «píxel» que tantas posibilidades nos ofrece para entender el customer journey en el negocio de nuestros usuarios en combinación con la analítica.

Probablemente hayas oído hablar de estos “píxeles” o incluso los estás utilizando en el canal digital de tu negocio, por lo que vamos a tratar de proporcionar algo más de visibilidad sobre lo que es realmente un píxel y el detalle de su funcionamiento.

El tracking pixel es una imagen de tamaño 1×1 (de hecho su nombre procede de que ocupa un píxel en la resolución de aspecto de la pantalla del monitor) que viene referenciada por un script HTML o JS incrustado en la página web y es transparente para el usuario. Su finalidad es hacer un seguimiento de acciones específicas del mismo, en dicha web. Algunos ejemplos típicos de su formato pueden ser los siguientes:
formatosPixel

En resumen, cuando el usuario navega y le «salta un píxel», lo que ocurre es que junto con la carga de la página está ejecutando ese script que carga una imagen de 1×1 píxeles en su pantalla. Dicha imagen es un recurso externo a la página, no embebido en ella, por lo que esa «carga» consiste en el envío de una petición al servidor donde está alojada, para recibirla y poder mostrársela al usuario. Ese servidor es generalmente un ad-server (advertisement server) gestionado por una agencia de publicidad. En un futuro post haremos hincapié en el flujo de todo este proceso y lo veremos en detalle.

Siempre que el navegador soporte la tecnología Javascript (así en casi todos los casos), se puede recopilar y añadir información sobre las características del tipo de usuario y enviarlas como parámetros en la URL del píxel. Esto comprende datos sobre, por ejemplo, resolución de pantalla, plugins utilizados, el modelo de coche que ha elegido en el primer paso del formulario, el precio del seguro que ha elegido y quiere contratar, etc.

Debe insertarse en la estructura de código de la página de forma que se active en el momento que el usuario ejecute una acción clave.

 

¿PARA QUÉ LOS NECESITO?

Mediante la utilización de píxeles somos capaces de trackear las impresiones o clicks en anuncios con los que estamos impactando al usuario. De esta forma, podemos tener el seguimiento necesario del performance de una campaña online de banners, cuyo lanzamiento hagamos en diferentes plataformas o webs. Además, nos ayuda a contabilizar los beneficios de dicha campaña y a generar más insights sobre el comportamiento y necesidades de los usuarios tras consumir ese anuncio, de cara al decision-making. Ya sean nuestros anuncios de formato display, o bien campañas rich media, o quizás posts patrocinados, sin duda conviene utilizarlos.

Los eventos de seguimiento habituales son la visualización de la página de un producto, o en el caso de la existencia de transacciones comerciales, el click en el botón de compra y los pasos de navegación previos a la thank-you page.

foto de dinero

En el área de la publicidad digital, donde las campañas son uno de los primeros pilares del cálculo del ROI en las acciones online, serán un pequeño (concretamente de 1×1) pero crucial aliado.

 

IMPLEMENTACIÓN TÉCNICA

Esta fase está muy lejos de ser un aspecto trivial en la creación y desarrollo de cualquier campaña que incluya inserción de píxeles. Desde un punto de vista de marketing o negocio, tenemos que hablar antes con los encargados de realizar el desarrollo técnico para conocer sus consideraciones, ya que siempre pondrán sobre la mesa (o deberían) aspectos que quizás no hayamos tenido en cuenta. Implementar un solo píxel puede tardar desde 10 minutos hasta una jornada completa de trabajo. Esto dependerá de múltiples factores: nivel de expertise del equipo técnico, tecnología y estructura de la página, la necesidad o no de recoger parámetros dinámicos en el píxel, el formato del propio píxel…

Aquí comentamos algunas consideraciones muy importantes a tener en cuenta a la hora de evaluar la implementación.

 

SEGURIDAD Y FORMATO

Debe tenerse muy en cuenta el formato que estamos utilizando para implementar nuestro píxel. Ya sea que se realice la implementación vía «hardcoding» incrustando en el HTML de la web o bien a través de un Tag Manager, no deberíamos aceptar nunca que nos pasasen códigos de píxel que sean de tipo script (Javascript), sino única y exclusivamente de tipo imagen. Cargar una imagen externa en nuestro site no tiene implicaciones de seguridad, pero cargar un código externo y desconocido que se vaya a ejecutar en nuestro site debería ser siempre evitable, por mucha confianza que tengamos en el proveedor. Y especialmente ahora de cara a tener el control de todas las cookies y datos recogidos debido a la estricta GDPR.

Ejemplo de carga de píxel tipo script.

Además, se recomienda siempre realizar una implementación asíncrona del píxel para no entorpecer la descarga del resto de contenido aún no cargado de la página.
Por último, aconsejamos también dejar la URL fuente del píxel sin protocolo (http/https) como podemos ver en la imagen previa, porque de esta forma heredará el protocolo de la página donde se está lanzando.

 

MÉTODO DE IMPLEMENTACIÓN

Ya «bajando al barro» y desde un punto de vista puramente técnico (pero ¡¡ojo!!, con un riesgo de posible impacto funcional en nuestra página) existen varias formas de implementar los scripts para los píxeles:

– document.write(pixel code): obsoleto, nunca se debe utilizar. Puede eliminar todo el contenido de la página si se ejecuta una vez la carga de la página sea completada. Prueba a copiar y pegar este código en la consola de desarrollo de tu navegador y mira su resultado:

document.write("Hello World!");

– Realizar un «append» al «<body>»: no es el método óptimo que recomendamos, pero utilizado con cierto cuidado puede servir. Si por ejemplo incluimos un carácter extra, sin querer, al copiar y pegar la URL del píxel en nuestra plantilla, estamos incrustando en el body un elemento que el DOM no será capaz de resolver correctamente, por lo que tendrá un impacto visual impredecible. Un ejemplo de plantilla hecho con Javascript es la imagen de la sección anterior.

– Crear un objeto de tipo imagen: es la forma que más recomendamos. Se crea al vuelo un objeto de tipo imagen en la página, por lo que no estamos alterando la estructura inicial de la misma de ninguna forma. Además, en cuanto se setea el atributo «src» en la línea de código, la imagen comienza a descargarse automáticamente de forma asíncrona.

(new Image()).src = “//subdomain.domain.com/pixel.gif”

 

Con esto, esperamos haber clarificado algunos aspectos técnicos acerca de los encargados de ayudar en nuestras campañas. En próximos posts profundizaremos sobre cómo funciona la lógica de un adserver y como validar que nuestros píxeles están saltando correctamente.

Esperamos tus comentarios 🙂