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

81

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.

Viliam
quelle

Antworten:

70

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";
Yahel
quelle
12
Diese weniger bekannten HTTP-Statuscodes (203, 204, 205) sind wirklich Gold. Sie sollten mehr Nutzen sehen als derzeit.
Sie
1
nette - Info, die ich tatsächlich verwenden kann. +1 von mir.
Doug
1
Lassen Sie mich sehen, ob ich zusammenfassen kann - der HTTP-Antwortcode-Ansatz beinhaltet dieselbe Client-Anfrage; Der einzige Unterschied besteht darin, dass der Server, anstatt das 1x1-GIF (und eine 200, nehme ich an) zurückzugeben, eine 204 an den Client zurückgibt.
Doug
2
Wie würden Sie das Ding anfordern, das jedoch einen 204-Antwortcode zurückgibt?
Jürgen Paul
3
Ich verstehe nicht warum Bild. Warum nicht eine leere Zeichenfolge zurückgeben?
Weishi Zeng
65

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

Doug
quelle
3
@ Doug Fabelhafte Antwort. Ich wünschte, ich hätte es geschrieben :) Es könnte sich lohnen, eine Notiz darüber zu verfassen, ob es möglicherweise HTTP Status Code 204für eine Antwort verwendet werden kann. Siehe dies: code.google.com/speed/page-speed/docs/rtt.html Ich habe es noch nie versucht, aber theoretisch sollte es dem gleichen Zweck dienen, ohne dass das GIF selbst übertragen werden muss. var i=new Image(); i.src = "http://sharedcount.com/test/beacon.gif";ist ein Beispiel, aber ich bin nicht sicher, ob es irgendwelche Browserprobleme geben würde.
Yahel
9
Dies ist keine schlechteste Antwort, weil es keine Antwort ist :) Ich habe gefragt, warum das GIF-Bild überhaupt bereitgestellt werden soll, da die erforderlichen Daten bereits mit der Anforderung gesendet wurden.
Viliam
2
Ich möchte nicht zu negativ sein, sorry. Dies ist eine schöne Erklärung für den Webfehler. Aber warum sollten die GIF-Daten zurückgesendet werden?
Viliam
@yahelc: das ist toll. Betrachten Sie es als Antwort für andere hinzuzufügen. Als Kommentar ist es fast unsichtbar.
Viliam
@ Vincent sicher, gerade hinzugefügt.
Yahel
14

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.

Ulrich Dangel
quelle
1
Der Grund, warum Analytics-Apps (z. B. Google Analytics, Yahoo Analytics, Omniture usw.) ein 1x1-Pixel-GIF-Bild auf der Webseite platzieren, hat absolut nichts mit dem "Debuggen" der App zu tun.
Doug
3
@doug - Ich denke, der Punkt, den mru dort macht, ist, dass Sie, wenn Sie absichtlich Fehlercodes zurückgeben, zwischen "wahren" Fehlercodes und Fehlercodes unterscheiden müssen, die Sie zurückgeben wollten. Die Moral der Geschichte lautet also: Geben Sie niemals einen Fehlercode zurück, wenn dieses Ergebnis beabsichtigt ist.
Moo
3
Ich bezweifle, dass die Fehlerantwort größer als das GIF-Bild ist. Beachten Sie, dass 200 OK auch eine Antwort ist, die mit dem GIF-Bild gesendet wird.
Viliam
2
@Villiam Die meisten Umgebungen geben nicht nur den Fehlercode zurück, sondern auch eine gut gestaltete HTML-Seite, die den Fehler beschreibt / weitere Informationen bereitstellt.
Ulrich Dangel
8

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.

thkala
quelle
1
Ihre Antwort sagt nichts über den Zweck der Bereitstellung der Ressource aus - dh warum muss eine Ressource überhaupt bereitgestellt werden? Ihre Antwort richtet sich auf die Frage "Warum ein 1x1-GIF anstelle einer anderen Art von Bildformat bereitstellen? Dies ist eine triviale Frage mit einer trivialen Antwort (dh das GIF-Format ist pixelweise kleiner als JPEG, PNG) , tiff, etc.)
Doug
Sie können das Laden von GIFs mit dem Javascript Image-Objekt aufrufen. Es werden keine Fehler an den Benutzer zurückgemeldet.
Viliam
@Villiam Wenn Sie das Bild wirklich zurückgeben, können Sie auch Browser ohne aktiviertes Javascript verfolgen. Fügen Sie einfach das Bild-Tag ein <noscript>und es wird funktionieren. Und Sie müssen auf der Serverseite nichts tun, um zwischen Anforderungen über js (Rückgabe eines Fehlers) und Anforderungen direkt über Elemente im DOM (Rückgabe eines Bildes) zu unterscheiden
Ulrich Dangel
4

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.

Harmeet
quelle
2

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.

Maciej Perliński
quelle
0

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.

Fauverismus
quelle
0

@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
Elad Yosifon
quelle