Warum überhaupt 1x1 Pixel GIF-Daten (Web Bugs) bereitstellen?

Viele Analyse- und Tracking-Tools fordern ein 1x1-GIF-Bild (Web-Bug, für den Benutzer unsichtbar) zum domänenübergreifenden Speichern / Verarbeiten von Ereignissen an.

Warum sollte dieses GIF-Bild überhaupt bereitgestellt werden? Wäre es nicht effizienter , einfach einen Fehlercode wie 503 Service Temporary Unavailable oder eine leere Datei zurückzugeben?

Update: Um es klarer zu machen, frage ich, warum GIF-Bilddaten bereitgestellt werden sollen, wenn alle erforderlichen Informationen bereits in Anforderungsheadern gesendet wurden . Das GIF-Bild selbst gibt keine nützlichen Informationen zurück.

Dougs Antwort ist ziemlich umfassend; Ich dachte, ich würde eine zusätzliche Notiz hinzufügen (auf Anfrage des OP, aus meinem Kommentar heraus)

Die Antwort von Doug erklärt, warum 1x1-Pixel-Beacons für den Zweck verwendet werden, für den sie verwendet werden. Ich dachte, ich würde einen möglichen alternativen Ansatz skizzieren, nämlich den HTTP-Statuscode 204, Kein Inhalt, für eine Antwort zu verwenden und keinen Bildkörper zu senden.

204 Kein Inhalt

Der Server hat die Anforderung erfüllt, muss jedoch keinen Entitätskörper zurückgeben und möchte möglicherweise aktualisierte Metainformationen zurückgeben. Die Antwort kann neue oder aktualisierte Metainformationen in Form von Entity-Headern enthalten, die, falls vorhanden, der angeforderten Variante zugeordnet werden sollten.

Grundsätzlich empfängt der Server die Anforderung und beschließt, keinen Text zu senden (in diesem Fall kein Bild zu senden). Es antwortet jedoch mit einem Code, um den Agenten darüber zu informieren, dass dies eine bewusste Entscheidung war. Im Grunde ist es nur eine kürzere Möglichkeit, positiv zu antworten.

Aus der Page Speed-Dokumentation von Google :

Eine beliebte Methode zum asynchronen Aufzeichnen von Seitenaufrufen besteht darin, ein JavaScript-Snippet am unteren Rand der Zielseite (oder als Onload-Ereignishandler) einzufügen, das einen Protokollierungsserver benachrichtigt, wenn ein Benutzer die Seite lädt. Die häufigste Methode hierfür besteht darin, eine Anforderung an den Server für ein "Beacon" zu erstellen und alle interessierenden Daten als Parameter in der URL für die Beacon-Ressource zu codieren. Um die HTTP-Antwort sehr klein zu halten, ist ein transparentes 1x1-Pixel-Bild ein guter Kandidat für eine Beacon-Anforderung. Ein etwas optimaleres Beacon würde eine HTTP 204-Antwort ("kein Inhalt") verwenden, die geringfügig kleiner als ein 1x1-GIF ist.

Ich habe es noch nie versucht, aber theoretisch sollte es dem gleichen Zweck dienen, ohne dass das GIF selbst übertragen werden muss. Bei Google Analytics sparen Sie 35 Byte. (Im Schema der Dinge sind 35 Bytes wirklich nichts, es sei denn, Sie sind Google Analytics, das viele Billionen Treffer pro Tag liefert.)

Sie können es mit diesem Code testen:

var i = new Image(); 
i.src = "http://httpstat.us/204";

Erstens bin ich mit den beiden vorherigen Antworten nicht einverstanden - beide beschäftigen sich nicht mit der Frage.

Das Ein-Pixel-Bild löst ein intrinsisches Problem für webbasierte Analyse-Apps (wie Google Analytics), wenn Sie im HTTP-Protokoll arbeiten - wie Daten (Web-Metriken) vom Client auf den Server übertragen werden .

Die einfachste der im Protokoll beschriebenen Methoden, die einfachste (zumindest die einfachste Methode, die einen Anforderungshauptteil enthält), ist die GET-Anforderung . Gemäß dieser Protokollmethode initiieren Clients Anforderungen an Server für Ressourcen. Server verarbeiten diese Anforderungen und geben entsprechende Antworten zurück.

Für eine webbasierte Analyse-App wie GA ist dieses unidirektionale Schema eine schlechte Nachricht, da es einem Server anscheinend nicht ermöglicht, Daten bei Bedarf von einem Client abzurufen. Auch hier können Server nur Ressourcen bereitstellen fordere sie an.

Was ist die Lösung für das Problem, Daten vom Client zurück auf den Server zu bringen? Innerhalb des HTTP-Kontexts gibt es andere Protokollmethoden als GET (z. B. POST), aber dies ist aus vielen Gründen eine eingeschränkte Option (wie durch die seltene und spezielle Verwendung wie das Übermitteln von Formulardaten belegt).

Wenn Sie sich eine GET-Anforderung von einem Browser aus ansehen, werden Sie feststellen, dass sie aus einer Anforderungs-URL und Anforderungsheadern (z. B. Referer- und User-Agent-Headern) besteht. Letztere enthält Informationen zum Client - z. B. Browsertyp und Version, Browser-Sprache, Betriebssystem usw.

Dies ist wiederum Teil der Anforderung, die der Client an den Server sendet. So die Idee , dass motiviert der Ein-Pixel - GIF ist für das Client der Web - Metrik - Daten an den Server, in einem Request - Header eingewickelt zu senden.

Aber wie kann man den Client dazu bringen, eine Ressource anzufordern, damit sie zum Senden der Metrikdaten "ausgetrickst" werden kann? Und wie kann man den Client dazu bringen, die tatsächlichen Daten zu senden, die der Server möchte?

Google Analytics ist ein gutes Beispiel: Die Datei ga.js (die große Datei, deren Download auf den Client durch ein kleines Skript auf der Webseite ausgelöst wird) enthält einige Codezeilen, die den Client anweisen, eine bestimmte Ressource von einer bestimmten Ressource anzufordern Server (der GA-Server) und zum Senden bestimmter Daten, die in den Anforderungsheader eingeschlossen sind.

Da der Zweck dieser Anforderung jedoch nicht darin besteht, eine Ressource abzurufen, sondern Daten an den Server zu senden, sollte diese Ressource so klein wie möglich sein und beim Rendern auf der Webseite nicht sichtbar sein - daher 1 x 1 Pixel transparent GIF. Die Größe ist die kleinstmögliche Größe, und das Format (gif) ist das kleinste unter den Bildformaten.

Genauer gesagt werden alle GA-Daten - jedes einzelne Element - zusammengestellt und in die Abfragezeichenfolge der Anforderungs-URL gepackt (alles nach dem '?'). Damit diese Daten vom Client (wo sie erstellt werden) zum GA-Server (wo sie protokolliert und aggregiert werden) übertragen werden können, muss eine HTTP-Anforderung vorhanden sein, also die Datei ga.js (Google Analytics-Skript, das heruntergeladen wird, sofern dies nicht der Fall ist) Vom Client zwischengespeichert als Ergebnis einer Funktion, die beim Laden der Seite aufgerufen wird.) Der Client wird angewiesen, alle Analysedaten - z. B. Cookies, Standortleiste, Anforderungsheader usw. - zu einer einzigen Zeichenfolge zusammenzufassen und hängen Sie es als Abfragezeichenfolge an eine URL an ( * http: //www.google-analytics.com/__utm.gif* ?), und dies wird zur Anforderungs-URL .

Es ist einfach, dies mit jedem Webbrowser zu beweisen, mit dem Sie die HTTP-Anforderung für die in Ihrem Browser angezeigte Webseite anzeigen können (z. B. Safari's Web Inspector , Firefox / Chrome Firebug usw.).

Zum Beispiel habe ich eine gültige URL für eine Unternehmenshomepage in die Standortleiste meines Browsers eingegeben, die diese Homepage zurückgegeben und in meinem Browser angezeigt hat (ich hätte jede Website / Seite auswählen können, die eine der wichtigsten Analyse-Apps, GA, verwendet , Omniture, Coremetrics, etc.)

Der von mir verwendete Browser war Safari, also klickte ich in der Menüleiste auf Entwickeln und dann auf Webinspektor anzeigen . Auf der obersten Zeile des Web Inspector, klicken Sie auf Ressourcen , finden und die utm.gif Ressource aus der Liste der Ressourcen auf der linken Spalte klicken, dann das Klicken Headers Registerkarte. Das zeigt dir so etwas:

Request URL:http://www.google-analytics.com/__utm.gif?
           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

Die wichtigsten Punkte sind:

1. Die Anfrage war in der Tat eine Anfrage für das utm.gif, wie aus der ersten Zeile oben hervorgeht: * URL der Anfrage: http: //www.google-analytics.com/__utm.gif*.

2. Die Google Analytics-Parameter sind in der an die Anforderungs-URL angehängten Abfragezeichenfolge deutlich sichtbar : zB utmsr ist der Variablenname von GA, um auf die Bildschirmauflösung des Clients zu verweisen. Für mich wird ein Wert von 1280 x 800 angezeigt. utmfl ist der Variablenname für die Flash-Version mit einem Wert von 10,3 usw.

3. Der Antwortheader mit dem Namen Content-Type (vom Server an den Client zurückgesendet) bestätigt außerdem, dass die angeforderte und zurückgegebene Ressource ein 1x1-Pixel-GIF war: Content-Type: image / gif

Dieses allgemeine Schema zum Übertragen von Daten zwischen einem Client und einem Server gibt es schon immer. Es könnte durchaus einen besseren Weg geben, dies zu tun, aber es ist der einzige mir bekannte Weg (der die von einem gehosteten Analysedienst auferlegten Einschränkungen erfüllt).

Einige Browser zeigen möglicherweise ein Fehlersymbol an, wenn die Ressource nicht geladen werden konnte. Das Debuggen / Überwachen des Dienstes wird dadurch auch etwas komplizierter. Sie müssen sicherstellen, dass Ihre Überwachungstools den Fehler als gutes Ergebnis behandeln.

OTOH du bekommst nichts. Die vom Server / Framework zurückgegebene Fehlermeldung ist normalerweise größer als das 1x1-Image. Dies bedeutet, dass Sie Ihren Netzwerkverkehr für praktisch nichts erhöhen.

Weil ein solches GIF eine bekannte Darstellung in einem Browser hat - es ist ein einzelner Pixel, Punkt. Bei allem anderen besteht die Gefahr, dass der tatsächliche Inhalt der Seite visuell beeinträchtigt wird.

HTTP-Fehler können als übergroße Frames mit Fehlertext oder sogar als Popup-Fenster angezeigt werden. Einige Browser beschweren sich möglicherweise auch, wenn sie leere Antworten erhalten.

Darüber hinaus sind In-Page-Bilder einer der wenigen Datentypen, die standardmäßig in allen Browsern zulässig sind. Für alles andere muss möglicherweise eine explizite Benutzeraktion heruntergeladen werden.

Dies dient zur Beantwortung der Frage des OP: "Warum werden GIF-Bilddaten bereitgestellt? ..."

Einige Benutzer setzen ein einfaches img- Tag, um Ihren Ereignisprotokollierungsdienst aufzurufen.

<img src="http://www.example.com/logger?event_id=1234">

Wenn Sie in diesem Fall kein Bild bereitstellen, zeigt der Browser ein Platzhaltersymbol an, das hässlich aussieht und den Eindruck erweckt, dass Ihr Dienst fehlerhaft ist!

Suchen Sie nach dem Feld Accept header. Wenn Ihr Skript über ein solches img- Tag aufgerufen wird , wird im Header der Anfrage Folgendes angezeigt:

Accept: image/gif, image/*
Accept-Encoding:gzip,deflate
...

Wenn sich im Feld Accept header "image / " * string befindet, gebe ich das Bild an, andernfalls antworte ich nur mit 204.

Nun, der Hauptgrund ist, das Cookie daran anzuhängen. Wenn Benutzer von einer Seite zur anderen wechseln, haben wir immer noch das gleiche Element, an das das Cookie angehängt werden kann.

Sie müssen kein Image bereitstellen, wenn Sie die Implementierungsmethode der Beacon-API ( https://w3c.github.io/beacon/ ) verwenden.

Ein Fehlercode würde funktionieren, wenn Sie Zugriff auf die Protokolldateien Ihres Servers haben. Der Zweck des Bereitstellens des Bildes besteht darin, mehr Daten über den Benutzer zu erhalten, als Sie normalerweise mit einer Protokolldatei tun würden.

@Maciej Perliński ist grundsätzlich richtig, aber ich denke, eine detaillierte Antwort wird von Vorteil sein.

Warum 1x1 GIF und kein 204 No-ContentStatuscode?

204 No-Content Ermöglicht dem Server, alle Antwortheader (Inhaltstyp, Inhaltslänge, Inhaltscodierung, Cache-Steuerung usw.) wegzulassen und einen leeren Antworttext mit 0 Byte zurückzugeben (und viel nicht benötigte Bandbreite zu sparen).

Browser wissen, dass sie 204 No-ContentAntworten respektieren und nicht auf Antwortheader und Antworttext warten müssen.

Wenn der Server einen Antwortheader festlegen muss (z. B. cache-controloder cookie), kann er diesen nicht verwenden, 204 No-Contentda Browser jeden Antwortheader standardmäßig ignorieren (gemäß der HTTP-Protokollspezifikation).

Warum 1x1 GIF und kein Content-Length: 0Header mit 200 OKStatuscode?

Wahrscheinlich eine Mischung aus mehreren Themen, um nur einige zu nennen:

• Kompatibilität mit älteren Browsern
• MIME-Typprüfung in Browsern, 0 Byte ist kein gültiges Bild.
• 200 OK mit 0 Bytes wird von Zwischenproxyservern und VPNs möglicherweise nicht vollständig unterstützt