¿Qué es un Código de Seguimiento o Píxel? (para no desarrolladores)

Posted by Lucía Marín on Ago 3, 2017

Hoy vamos a tratar de desgranar mejor el concepto de “código” o “píxel” “de seguimiento”. Sí, ese que ya tanto he mencionado en este :P. Pero veo que a menudo genera confusión en el curso de GTM el concepto de Etiqueta de Imagen, y como viene de este concepto, pues me apetece aclararlo más y mejor :)

Lo cierto es que yo misma tampoco lo entiendo todo al 100% respecto a los píxeles/códigos de seguimiento, porque en el lado de la programación, la parte de las “tripas”, del código en sí mismo, no es mi especialidad. Solo sé que cada píxel o tag de seguimiento necesita conectarse con una herramienta externa que a su vez también tiene un código, un lugar o URL a la que “llamamos” o “invocamos” mediante la inserción de esta URL dentro del píxel. Parece un trabalenguas pero un poco más abajo vemos un esquema de a qué me refiero.

Para mí, no entender todo es lógico y aceptable, es programación, código puro y duro, y no lo he hecho yo. Y tampoco lo debo aspirar a entender, ni quiero. Es imposible conocer a fondo la programación de todos los sitios, de todos los códigos, de todos los portales web, quien lo conoce es quien/es lo han hecho (y a veces, les cuesta recordar al tiempo, estoy segura!!:P). Lo bueno, es que para nuestro trabajo de gestión de códigos de seguimiento, NO es necesario entender esa parte 😉. Para eso están ell@s, los que crean el código jejej, ya sabéis, cada uno su parte, cada loco con su tema ja ja. Hace poco he escrito en cursos.com sobre este tema, cómo aprender analítica web y tag management sin que nos “desborde” la información, sin querer saberlo todo todo… Siempre hay algún punto donde debemos cortar.

Para aprender a aprender, debemos aprender a parar. ¡Toma frase!

Lo que sí necesitamos tener clarísimo es que el funcionamiento de un código de seguimiento, a  groso modo y simplificando muchísimo, siempre es el mismo.

Con el código o píxel se llama/invoca/ejecuta un archivo externo, que está alojado en otro servidor -que pertenece a la herramienta en cuestión con la que queremos conectar- y que contiene una programación dada. Pues bien: nuestro código de seguimiento más el otro archivo es lo que se encarga de mandar datos a herramientas analíticas o publicitarias para que podamos verlo de una forma sencilla.

Es decir:

Cómo funcionan los códigos o píxeles de segumiento

Sea como sea el código de seguimiento, el funcionamiento básico es el anterior. Podemos encontrar distintos tipos de código pero todos harán lo mismo: llamar a un archivo externo para que procese y envíe la información a otro sitio. Así, actualmente, conozco/he visto al menos estos 3 tipos de código usados para envío de datos:

  • Código de Seguimiento con etiqueta HTML de tipo IMAGEN
  • Código de Seguimiento con etiqueta HTML de tipo IFRAME
  • Código de Seguimiento de tipo JAVASCRIPT

Mirad, hace unos añitos… como por 2010, se veían mucho más los píxeles de seguimiento del tipo más sencillo, con solo una etiqueta de HTML de tipo IMG. La etiqueta IMG es una forma diferente de enviar la información de este tipo, y también se usa como contenido alternativo en ciertos códigos para los casos atípicos donde no se puede leer código JavaScript. Por ej. el propio código de seguimiento de Google AdWords tiene una parte Script con JavaScript y otra No Script que incluye una Imagen de HTML:

<script type="text/javascript">
   /* <![CDATA[ */
   var google_conversion_id = 123456789;
   var google_conversion_language = "en";
   var google_conversion_format = "2";
   var google_conversion_color = "ffffff";
   var google_conversion_label = "AAAAAAAAAAAAAAAAAAA";
   var google_remarketing_only = false;
   /* ]]> */
   </script>
   <script type="text/javascript" 
  src="//www.googleadservices.com/pagead/conversion.js">
   /script>
   <noscript>
   <div style="display:inline;">
   <img height="1" width="1" style="border-style:none;" alt="" 
  src="//www.googleadservices.com/pagead/conversion/123456789/
  ?label=AAAAAAAAAAAAAAAAAAA&amp;guid=ON&amp;script=0"/>
   </div>
   </noscript>

*En verde vemos la URL donde se llama para poder mandar los datos a Google Adwords. En naranja vemos el contenido alternativo del píxel para navegadores sin JavaScript habilitado. Código extraído de: https://support.google.com/adwords/answer/1722021?hl=es.

Recordemos de nuevo que el contenido de un código o píxel de seguimiento, no es más que una llamada a un archivo con programación, en el cual se realizan los envíos de datos, normalmente también con código JS, ok?

La llamada al sitio externo se puede realizar por diversas vías, siempre mediante código. Una de las más comunes es hacerlo con código JavaScript (<scrip>), estos son los más extendidos.

Otra forma de hacer la llamada es con etiquetas ‘img’ de HTML. Con estas etiquetas también hacemos una llamada a otra página, solo que el código es mucho más sencillo. Por ej. lo equivalente en píxel de IMG al píxel script de Google Analytics, sería un píxel generado mediante el protocolo de medición. Más adelante en este post veremos un ejemplo, pues se trata de un uso del protocolo de medición súper interesante.

Eso sí, hay una diferencia clave entre mandar con JavaScript los datos o mandarlos con Imagen, y es que con solo el enlace que va en el src=”” de la imagen o RUTA donde apunta, ya estamos llamando al servicio que sea. Y además, con los parámetros e incluso con partes del link (en el ej. de arriba /123456789/?label=…), le pasamos los valores a configurables con los que indicamos que los datos vayan a nuestra cuenta de Adwords y no a otra. Sin embargo, en el código JavaScript, por un lado va la llamada al archivo, y por otro las personalizaciones o valores que deseamos “traspasar” (en el ej. de arriba: google_conversion_id,google_conversion_label…). Solo debemos entender en este punto hasta aquí jejej.

Vamos a seguir viendo ejemplos para asentar las ideas mejor :)

 

Ejemplo de código de seguimiento de tipo IMG (Píxel Image 1×1)

Veamos el código de conversión de Twitter, en una de sus variantes de tipo imagen:

<img height="1" width="1" style="display:none;" alt=" " 
src="https://analytics.twitter.com/i/adsct? 
txn_id=l4vsO&p_id=Twitter&tw_sale_amount=AMOUNT_HERE
&tw_order_quantity=QUANTITY_HERE" / >

Está extraído de aquí: https://business.twitter.com/es/advertising/campaign-types/increase-website-traffic/advanced-conversion-tracking.html

Si nos fijamos en el principio del código, donde pone height=”1″ width=”1″, de ahí viene el nombre de “píxel”, del concepto de una imagen cuadrada de 1px por 1 px, que se usaba para conectar con servicios publicitarios y analíticos, aprovechando que dicha imagen no se veía. Dicha imagen, todavía, es utilizada en ocasiones para llamar a un archivo externo donde se procesa la información recopilada, para poder ser enviada posteriormente a la herramienta que corresponda. Para ello utilizamos una etiqueta IMG de HTML. Es decir, del tipo:

<img src="...">

En otras ocasiones dicha llamada se realiza desde un código JavaScript. Y en otras, desde una etiqueta iframe. Lo queramos o no, en nuestra labor de analistas o tag managers, nos iremos familiarizando con todos estos conceptos, de ahí la idea de publicar este artículo :D

Este tipo de códigos de seguimiento que solo contienen una imagen HTML (cuando no tienen su propia plantilla de etiqueta), en Google Tag Manager podríamos generarlos mediante la propia etiqueta de imagen personalizada, rellenando solo el atributo SRC que contiene la misma :)

 

 

Ejemplo de código de seguimiento de tipo JavaScript

Vamos a verlo sobre el ejemplo de Analytics, por tratarse de la herramienta que más menciono en este blog en que estamos :)

Ahora vamos a ir desgranando más las diferentes partes del código de seguimiento:

“ANATOMÍA” DEL CÓDIGO DE GOOGLE ANALYTICS

(Tal como lo entiende una dummy de la programación jajaj :P)

<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-88888888-1', 'auto');
ga('send', 'pageview');

</script>

Al grano, lo que nos importa a nosotr@s, taggeadores y taggeadoras del mundo:

– El archivo al que llamamos o referenciamos, el que ejecutamos desde aquí es: https://www.google-analytics.com/analytics.js. En la parte final de la ruta, como sabéis, está el nombre del archivo JS concreto que hace “cosas” para mandar los datos a GA: analytics.js. Por cierto, distinguimos que la versión de seguimiento es “Universal” de paso (GA Classic era otro archivo: ga.js).

– La otra parte relevante, ahora digo para l@s analist@s web, es esta:
ga(‘create’, ‘UA-88888888-1’, ‘auto’);
ga(‘send’, ‘pageview’);

Con la primera línea decimos que se cree el “objeto” (término de JS) de seguimiento. También decimos: que dicho “objeto” mande los datos a la propiedad con UA-XXXXXXXX-X, es aquí donde se define el ID de GA. Y por último, con ‘auto’, se hace mención al cookieDomain o dominio de las cookies (que, en resumen, sirve para el tracking correcto de subdominios).

Con la segunda línea decimos que se envíe el dato o hit básico que obtenemos por defecto en GA: la página vista o pageview (por ello con una instalación “estándar” solo tenemos pageviews y no events ni transactions ni nada…).

Y esto lo anterior se ejecuta en todas las cargas de página en el navegador (o mejor dicho, cada vez que aparezca el código, ya que también lo podemos incluir en contenido “dinámico” como pop ups, ajax, etc.).

Además, Google Analytics admite muchas más personalizaciones de código por ej. para el envío de datos adicionales asociados al hit (dimensiones personalizadas, grupos de contenido, user id…), personalizaciones sobre el tipo de tracking (anonimyze ip…). Podemos ver un listado y explicación de todas ellas aquí:

https://developers.google.com/analytics/devguides/collection/analyticsjs/?hl=es-419

Todas estas personalizaciones, aunque no sepamos hacerlas si no sabemos programar, podremos hacerlas fácilmente mediante el uso de la herramienta Google Tag Manager. O preciso un poco más: las haremos más fácilmente y, encima, con menor probabilidad de error por escribir mal algo de código. ¿Os he contado que imparto un curso online e in company de tag manager donde explico todas ellas? jaja

Este tipo de códigos de seguimiento que contienen código JavaScript (y que no tienen su propia plantilla de etiqueta), en Google Tag Manager podríamos generarlos mediante la propia etiqueta de HTML personalizada, incluyendo el código <script> tal cual, por ej:

 

Cómo pasar del código JS de Google Analytics a un código de tipo imagen con protocolo de medición

Como dije arriba, ahora vamos a ver la correspondencia entre el píxel anterior estándar de Google Analytics, y el mismo, pero construido mediante el Protocolo de Medición. Este año, en Congreso Web de Zaragoza, expliqué dicho protocolo junto a mi colega y amigo Edu Sánchez, aquí os dejo las diapositivas, porque vienen al pelo para poder ver después la correspondencia:

Y aquí está el tablero de “recortes” que he probado a crearme en slideshare como chuleta-resumen :D

RESUMEN protocolo de medición para crear un píxel de Google Analytics

Para crear el píxel correspondiente al código de ejemplo anterior, configuraré así en Hit Builder, con la misma UA-, con tipo de hit “pageview” y con un clientId aleatorio que se genera en la propia herramienta:

Protocolo de medición Google Analytics

Si te animas a probarlo, como nota, recuerda que si usas una dimensión antispam en tu Google Analytics y GTM, deberás añadir dicha dimensión también en estos hits, pues de otro modo, no se recopilarán.

Mi píxel sencillo de Analytics de tipo Imagen quedaría así:

<img src="https://www.google-analytics.com/collect?v=1&t=pageview
&tid=UA-88888888-1&cid=4c31a299-27bb-40e5-940c-b651a09e255e" 
width="1" height="1" style="display:none"/>

Como se dice en la presentación, recuerda mandar los valores que quieras para fuente / medio, para landing page, etc. si quieres que la información en GA quede establecida de una forma coherente y que no te llene los informes de (not set). Y hasta aquí, paro con la parte compleja de este post que iba a ser muyyy sencillo :D

La principal ventaja que encontraríamos en generar un código de GA de este modo, es poder insertarlo en entornos que no admitan JavaScript. Como por ej. en emailings, en gestores de contenido o CMS muy básicos que no admiten JS, etc.

 

Ejemplo de código de seguimiento de tipo Iframe

El Iframe es la alternativa a la Imagen en muchos componentes No Script de ciertos códigos de seguimiento creados con JavaScript. Por ejemplo, en la parte <noscript> de Google Tag Manager, encontramos un Iframe.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?
id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MMMMMM');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?
id=GTM-MMMMMM" height="0" width="0" 
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

 

Pero además, para ciertos servicios, aún se usa en solitario como código para medir accesos a páginas o conversiones. Por ejemplo, para DoubleClick Floodlight:

<iframe src="http://1234567.fls.doubleclick.net/activityi;
src=1234567;type=abcde123;cat=fghij456;
u1=[friendlyname1];u2=[friendlyname2];ord=[Random Number]?" 
width="1" height="1" 
frameborder="0" style="display:none"></iframe>

Ejemplo de floodlight sacado de: https://support.google.com/dfa/partner/answer/154049?hl=en

Y para terminar con el post: Este tipo de códigos de seguimiento que contienen un código Iframe (y que no tienen su propia plantilla de etiqueta), en Google Tag Manager podríamos generarlos mediante la propia etiqueta de HTML personalizada, incluyendo el código <iframe> tal cual, por ej:

Etiqueta HTML personalizada Google Tag Manager usada para insertar un iframe

Imaginemos por un momento todas las posibilidades que nos ofrece el poder insertar de forma tan fácil código en nuestras páginas… Y no solo se puede insertar código de seguimiento!! sino que lo visto en el post, sirve para cualquier código del mismo tipo aunque tenga distintas funciones :)) en el anterior post, una alumna de mi curso de Tag Manager, Eva Torres, nos contó por ej. cómo insertar el webchat Zopim. Y en un post mío, bastante anterior, hablo de algunos ejemplos de usos creativos y diferentes de Google Tag Manager para insertar código en un sitio web.

¡¡¡Espero que os sea muy útil!!! Si os gustó compartid please, y gracias por leer :)

About the author

Comparte tu opinión