По-перше, я не погоджуюсь з двома попередніми відповідями - жодне не стосується питання.
Зображення в один піксель вирішує внутрішню проблему веб-програм для аналітики (наприклад, Google Analytics) при роботі в протоколі HTTP - як перенести дані (веб-метрики) з клієнта на сервер .
Найпростіший із методів, описаних Протоколом, найпростіший (принаймні найпростіший метод, що включає тіло запиту) - це запит GET . Відповідно до цього методу протоколу, клієнти ініціюють запити до серверів на ресурси; сервери обробляють ці запити та повертають відповідні відповіді.
Для веб-додатків аналітики, таких як GA, ця односпрямована схема є поганою новиною, оскільки, схоже, вона не дозволяє серверу отримувати дані від клієнта на вимогу - знову ж таки, все, що можуть зробити сервери - це постачати ресурси, а не запитувати їх.
Отже, яке рішення проблеми отримання даних від клієнта назад до сервера? У контексті HTTP існують інші методи протоколу, крім GET (наприклад, POST), але це обмежений варіант з багатьох причин (про що свідчить його рідкісне та спеціалізоване використання, наприклад, подання даних форми).
Якщо ви подивитесь на запит GET із браузера, то побачите, що він складається з URL-адреси запиту та заголовків запитів (наприклад, Referer та User-Agent), останній містить інформацію про клієнта - наприклад, тип браузера та версія, мова браузера, операційна система тощо.
Знову ж таки, це частина запиту, який клієнт надсилає на сервер. Тож ідея, яка мотивує gif-піксель, полягає в тому, щоб клієнт надсилав дані веб-метрик на сервер, загорнувшись у заголовку запиту.
Але як тоді змусити клієнта запитувати ресурс, щоб його можна було "обдурити" надсиланням даних метрик? І як змусити клієнта надіслати фактичні дані, які хоче сервер?
Хорошим прикладом є Google Analytics: файл ga.js (великий файл, завантаження якого до клієнта ініціюється невеликим сценарієм на веб-сторінці) містить кілька рядків коду, який спрямовує клієнта запитувати певний ресурс від певного сервера (сервер GA) та надсилати певні дані, загорнуті в заголовок запиту.
Але оскільки метою цього запиту є не фактично отримати ресурс, а надіслати дані на сервер, цей ресурс повинен бути якомога меншим і він не повинен бути видимим при отриманні на веб-сторінці - отже, 1 x 1 піксель прозорий gif. Розмір - це найменший можливий розмір, а формат (gif) - найменший серед форматів зображень.
Точніше, усі дані GA - кожен окремий елемент - збираються та упаковуються у рядок запиту URL-адреси запиту (все після знака „?“). Але для того, щоб ці дані надходили з клієнта (де вони створені) на сервер GA (де вони реєструються та агрегуються), має бути HTTP-запит, тому ga.js (скрипт Google Analytics, який завантажується, якщо він не кешований клієнтом, як результат функції, що викликається при завантаженні сторінки) вказує клієнту збирати всі аналітичні дані - наприклад, файли cookie, рядок розташування, заголовки запитів тощо - об'єднувати їх в один рядок та додайте його як рядок запиту до URL-адреси ( * http: //www.google-analytics.com/__utm.gif* ?), і це стає URL-адресою запиту .
Це легко довести за допомогою будь-якого веб-браузера, який має перегляд HTTP-запиту для веб-сторінки, що відображається у вашому браузері (наприклад, веб-інспектор Safari , Firefox / Chrome Firebug тощо).
Наприклад, я набрав дійсну URL-адресу корпоративної домашньої сторінки в рядок місцезнаходження мого браузера, який повернув цю домашню сторінку та відобразив її у моєму браузері (я міг би вибрати будь-який веб-сайт / сторінку, що використовує одну з основних програм аналітики, GA , Omniture, Coremetrics тощо)
Браузером, яким я користувався, був Safari, тому я натиснув кнопку Розробити в рядку меню, а потім Показати Інспектор Інтернету . У верхньому рядку Веб-інспектора натисніть Ресурси , знайдіть і клацніть ресурс utm.gif зі списку ресурсів, що відображається в лівій колонці, а потім натисніть вкладку Заголовки . Це покаже вам щось подібне:
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
Ключові моменти, на які слід звернути увагу:
Запит фактично був запитом на utm.gif, про що свідчить перший рядок вище: * URL-адреса запиту: http: //www.google-analytics.com/__utm.gif*.
Параметри Google Analytics чітко видно у рядку запиту , доданому до URL-адреси запиту : наприклад,
utmsr - це назва змінної GA для посилання на роздільну здатність екрана клієнта, для мене показує значення 1280x800; utmfl - ім'я змінної для флеш-версії, яке має значення 10,3 тощо.
Тема відповіді називається
Content-Type (відправлений сервер назад клієнт) також підтверджує , що ресурс , запитуваний і повертається був 1x1 пікселі GIF:
Content-Type: зображення / GIF
Ця загальна схема передачі даних між клієнтом і сервером існує вічно; цілком може бути кращий спосіб зробити це, але це єдиний спосіб, про який я знаю (який задовольняє обмеження, накладені розміщеною службою аналітики).