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 entiendo el lado de la programación, las «tripas», el código 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.

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. 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 los que crean el código cada uno su parte. 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!

Es decir:

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:

<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"/>

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.

<!-- 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) -->

<iframe src="https://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>