Po pierwsze, nie zgadzam się z dwiema poprzednimi odpowiedziami - żadna z nich nie angażuje pytania.
Obraz jednopikselowy rozwiązuje nieodłączny problem aplikacji analitycznych opartych na sieci (takich jak Google Analytics) podczas pracy w protokole HTTP - jak przesyłać dane (metryki sieciowe) z klienta na serwer .
Najprostszą z metod opisanych w protokole, najprostszą (przynajmniej najprostszą metodą zawierającą treść żądania) jest żądanie GET . Zgodnie z tym protokołem klienci wysyłają do serwerów żądania zasobów; serwery przetwarzają te żądania i zwracają odpowiednie odpowiedzi.
W przypadku internetowej aplikacji analitycznej, takiej jak GA, ten jednokierunkowy schemat to zła wiadomość, ponieważ nie wydaje się, aby serwer mógł pobierać dane od klienta na żądanie - znowu wszystko, co mogą zrobić serwery, to dostarczać zasoby, a nie poproś ich.
Jakie jest więc rozwiązanie problemu pobierania danych od klienta z powrotem na serwer? W kontekście HTTP istnieją inne metody protokołu inne niż GET (np. POST), ale jest to ograniczona opcja z wielu powodów (o czym świadczy jej rzadkie i wyspecjalizowane użycie, takie jak przesyłanie danych formularza).
Jeśli spojrzysz na żądanie GET z przeglądarki, zobaczysz, że składa się ono z adresu URL żądania i nagłówków żądań (np. Referer i User-Agent Headers), te ostatnie zawierają informacje o kliencie - np. Typ przeglądarki i wersja, język przeglądarki, system operacyjny itp.
Ponownie jest to część żądania, które klient wysyła do serwera. Tak więc idea, która motywuje jednopikselowy gif, polega na tym, że klient wysyła dane metryki sieci Web do serwera, zawarte w nagłówku żądania.
Ale w takim razie, jak skłonić klienta do zażądania zasobu, aby można go było „oszukać” w celu przesłania danych metryk? A jak zmusić klienta do wysłania rzeczywistych danych, których potrzebuje serwer?
Dobrym przykładem jest Google Analytics: plik ga.js (duży plik, którego pobieranie do klienta jest uruchamiane przez mały skrypt na stronie internetowej) zawiera kilka wierszy kodu, które kierują klienta do żądania określonego zasobu z określonego serwer (serwer GA) i wysłać pewne dane zawinięte w nagłówku żądania.
Ale ponieważ celem tego żądania nie jest faktyczne uzyskanie zasobu, ale wysłanie danych do serwera, zasób ten powinien być jak najmniejszy i nie powinien być widoczny podczas renderowania na stronie internetowej - stąd 1 x 1 piksel przezroczysty gif. Rozmiar to najmniejszy możliwy rozmiar, a format (gif) to najmniejszy spośród formatów obrazów.
Dokładniej, wszystkie dane GA - każdy pojedynczy element - są składane i pakowane w ciąg zapytania adresu URL żądania (wszystko po znaku „?”). Ale aby te dane zostały przesłane z klienta (gdzie są tworzone) do serwera GA (gdzie są rejestrowane i agregowane), musi istnieć żądanie HTTP, więc ga.js (skrypt Google Analytics jest pobierany, chyba że jest buforowane przez klienta w wyniku funkcji wywoływanej podczas ładowania strony) kieruje klienta do zebrania wszystkich danych analitycznych - np. plików cookie, paska lokalizacji, nagłówków żądań itp. - połączyć je w jeden ciąg i dołącz go jako ciąg zapytania do adresu URL ( * http: //www.google-analytics.com/__utm.gif* ?), a ten stanie się adresem URL żądania .
Łatwo to udowodnić za pomocą dowolnej przeglądarki internetowej, która umożliwia wyświetlenie żądania HTTP dla strony internetowej wyświetlanej w przeglądarce (np. Inspektor sieci Safari , Firefox / Chrome Firebug itp.).
Na przykład wpisałem prawidłowy adres URL do firmowej strony głównej w pasku adresu przeglądarki, co zwróciło tę stronę główną i wyświetliło ją w przeglądarce (mogłem wybrać dowolną witrynę internetową / stronę, która korzysta z jednej z głównych aplikacji analitycznych, GA , Omniture, Coremetrics itp.)
Przeglądarka, której użyłem, to Safari, więc kliknąłem opcję Rozwiń na pasku menu, a następnie Pokaż inspektora sieci . W górnym wierszu Inspektora sieci kliknij opcję Zasoby , znajdź i kliknij zasób utm.gif z listy zasobów wyświetlonej w lewej kolumnie, a następnie kliknij kartę Nagłówki . To pokaże ci coś takiego:
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
Najważniejsze punkty, na które należy zwrócić uwagę, to:
Żądanie było w rzeczywistości żądaniem utm.gif, o czym świadczy pierwszy wiersz powyżej: * Adres URL żądania: http: //www.google-analytics.com/__utm.gif*.
Parametry Google Analytics są wyraźnie widoczne w ciągu zapytania dołączonym do adresu URL żądania : np.
Utmsr to nazwa zmiennej GA odnosząca się do rozdzielczości ekranu klienta, w moim przypadku ma wartość 1280x800; utmfl to nazwa zmiennej dla wersji Flash, która ma wartość 10,3 itd.
Nagłówek odpowiedzi o nazwie
Content-Type (wysłanej przez plecy serwera do klienta) potwierdza również, że zasób wnioskowane i wrócił był gif piksel 1x1:
Content-Type: image / gif
Ten ogólny schemat przesyłania danych między klientem a serwerem istnieje od zawsze; mógłby istnieć lepszy sposób na zrobienie tego, ale jest to jedyny znany mi sposób (który spełnia ograniczenia narzucone przez hostowaną usługę analityczną).