Primero, no estoy de acuerdo con las dos respuestas anteriores, ninguna de las cuales aborda la pregunta.
La imagen de un píxel resuelve un problema intrínseco para las aplicaciones de análisis basadas en la web (como Google Analytics) cuando se trabaja en el protocolo HTTP: cómo transferir datos (métricas web) del cliente al servidor .
El más simple de los métodos descritos por el Protocolo, el más simple (al menos el método más simple que incluye un cuerpo de solicitud) es la solicitud GET . De acuerdo con este método de protocolo, los clientes inician solicitudes de recursos a los servidores; Los servidores procesan esas solicitudes y devuelven las respuestas adecuadas.
Para una aplicación de análisis basada en web, como GA, este esquema unidireccional es una mala noticia, porque no parece permitir que un servidor recupere datos de un cliente a pedido; nuevamente, todo lo que los servidores pueden hacer es suministrar recursos, no solicítelos.
Entonces, ¿cuál es la solución al problema de devolver los datos del cliente al servidor? Dentro del contexto HTTP, existen otros métodos de protocolo además de GET (por ejemplo, POST), pero esa es una opción limitada por muchas razones (como lo demuestra su uso poco frecuente y especializado, como enviar datos de formularios).
Si observa una solicitud GET desde un navegador, verá que está compuesta por una URL de solicitud y encabezados de solicitud (por ejemplo, encabezados de Referer y User-Agent), este último contiene información sobre el cliente, por ejemplo, tipo de navegador y versión, idioma del navegador, sistema operativo, etc.
Nuevamente, esto es parte de la Solicitud que el cliente envía al servidor. Entonces, la idea que motiva el gif de un píxel es que el cliente envíe los datos de métricas web al servidor, dentro de un encabezado de solicitud.
Pero entonces, ¿cómo hacer que el cliente solicite un recurso para que pueda ser "engañado" para que envíe los datos de las métricas? ¿Y cómo conseguir que el cliente envíe los datos reales que desea el servidor?
Google Analytics es un buen ejemplo: el archivo ga.js (el archivo grande cuya descarga en el cliente se activa mediante un pequeño script en la página web) incluye algunas líneas de código que dirigen al cliente a solicitar un recurso en particular de un servidor (el servidor GA) y enviar ciertos datos incluidos en el encabezado de solicitud.
Pero dado que el propósito de esta solicitud no es realmente obtener un recurso sino enviar datos al servidor, este recurso debe ser lo más pequeño posible y no debe ser visible cuando se representa en la página web, por lo tanto, el 1 x 1 gif transparente de píxeles. El tamaño es el más pequeño posible y el formato (gif) es el más pequeño entre los formatos de imagen.
Más precisamente, todos los datos de GA, cada elemento individual, se ensamblan y empaquetan en la cadena de consulta de la URL de solicitud (todo lo que sigue a "?"). Pero para que esos datos vayan del cliente (donde se crea) al servidor GA (donde se registra y se agrega) debe haber una solicitud HTTP, por lo que el ga.js (script de Google Analytics que se descarga, a menos que sea almacenado en caché, por el cliente, como resultado de una función llamada cuando se carga la página) indica al cliente que reúna todos los datos analíticos, por ejemplo, cookies, barra de ubicación, encabezados de solicitud, etc., que los concatene en una sola cadena y agregarlo como una cadena de consulta a una URL ( * http: //www.google-analytics.com/__utm.gif* ?) y esa se convierte en la URL de solicitud .
Es fácil probar esto usando cualquier navegador web que le permita ver la solicitud HTTP para la página web que se muestra en su navegador (por ejemplo, el inspector web de Safari , Firefox / Chrome Firebug , etc.).
Por ejemplo, escribí una URL válida para una página de inicio corporativa en la barra de ubicación de mi navegador, que devolvió esa página de inicio y la mostró en mi navegador (podría haber elegido cualquier sitio web / página que use una de las principales aplicaciones de análisis, GA , Omniture, Coremetrics, etc.)
El navegador que usé fue Safari, así que hice clic en Desarrollar en la barra de menú y luego en Mostrar Inspector web . En la fila superior del Inspector web, haga clic en Recursos , busque y haga clic en el recurso utm.gif de la lista de recursos que se muestra en la columna de la izquierda, luego haga clic en la pestaña Encabezados . Eso te mostrará algo como esto:
Request URL:http:
utmwv=1&utmn=1520570865&
utmcs=UTF-8&
utmsr=1280x800&
utmsc=24-bit&
utmul=enus&
utmje=1&
utmfl=10.3%20r181&
Request Method:GET
Status Code:200 OK
Request Headers
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; en-us) AppleWebKit/533.21.1
(KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Response Headers
Cache-Control:private, no-cache, no-cache=Set-Cookie, proxy-revalidate
Content-Length:35
Content-Type:image/gif
Date:Wed, 06 Jul 2011 21:31:28 GMT
Los puntos clave a tener en cuenta son:
De hecho, la Solicitud era una solicitud para utm.gif, como lo demuestra la primera línea anterior: * URL de solicitud: http: //www.google-analytics.com/__utm.gif*.
Los parámetros de Google Analytics son claramente visibles en la cadena de consulta adjunta a la URL de la solicitud : por ejemplo,
utmsr es el nombre de la variable de GA para referirse a la resolución de pantalla del cliente, para mí, muestra un valor de 1280x800; utmfl es el nombre de la variable para la versión flash, que tiene un valor de 10,3, etc.
El encabezado de respuesta llamado
Content-Type (enviado por el servidor al cliente) también confirma que el recurso solicitado y devuelto era un gif de 1x1 píxeles:
Content-Type: image / gif
Este esquema general para transferir datos entre un cliente y un servidor ha existido desde siempre; Bien podría haber una mejor manera de hacer esto, pero es la única forma que conozco (que satisface las limitaciones impuestas por un servicio de análisis alojado).