it-swarm.com.de

Warum sollten 1x1-Pixel-GIF-Daten (Web Bugs) überhaupt bereitgestellt werden?

Viele Analyse- und Tracking-Tools fordern 1x1-GIF-Bilder (Web-Bug, für den Benutzer nicht sichtbar) für die domänenübergreifende Speicherung/Verarbeitung von Ereignissen an.

Warum wird dieses GIF-Bild überhaupt geliefert? Wäre es nicht so? effizienter um einfach einen Fehlercode wie 503 Service Temporary Unavailable oder leere Datei zurückzugeben?

Update: Um genauer zu sein, frage ich, warum GIF-Bilddaten bereitgestellt werden sollen, wenn alle Informationen erforderlich sind wurde bereits gesendet in Anforderungskopfzeilen. Das GIF-Bild selbst liefert keine nützlichen Informationen.

72
Viliam

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

Dougs Antwort 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 HTTP Status Code 204, No Content für eine Antwort zu verwenden und keinen Bildkörper zu senden. 

204 Kein Inhalt

Der Server hat die Anforderung erfüllt muss aber kein .__ zurückgeben. Entity-Body und möchte eventuell zurückkehren aktualisierte Metainformation. Die Antwort KANN neues oder aktualisiertes .__ einschließen. Metainformation in Form von Entity-Header, die vorhanden sind SOLLTE mit der .__ verbunden sein. angeforderte Variante.

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

Von Googles Page Speed-Dokumentation :

Eine beliebte Aufnahmeseite Ansichten in einer asynchronen Art und Weise ist Fügen Sie am .__ ein JavaScript-Snippet ein. unten auf der Zielseite (oder als onload-Ereignishandler), die eine Protokollierungsserver, wenn ein Benutzer die .__ lädt. Seite. Die gebräuchlichste Art zu tun. Hiermit erstellen Sie eine Anfrage an die Server für einen "Beacon", und codiere alle die Daten von Interesse als Parameter in die URL für die Beacon-Ressource. Zu halten Sie die HTTP-Antwort sehr klein, a Ein transparentes 1x1-Pixel-Bild ist eine gute Kandidat für eine Beacon-Anfrage. EIN etwas mehr optimale Bake würde verwenden eine HTTP 204-Antwort ("Kein Inhalt") das ist geringfügig kleiner als ein 1x1 GIF.

Ich habe es nie ausprobiert, aber theoretisch sollte es dem gleichen Zweck dienen, ohne dass das GIF selbst übertragen werden muss, was im Fall von Google Analytics 35 Byte einspart. (Grundsätzlich gilt, dass 35 Bytes wirklich nichts sind, es sei denn, Sie verwenden Google Analytics täglich viele Billionen Treffer pro Tag.)

Sie können es mit diesem Code testen:

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

Erstens bin ich mit den beiden vorherigen Antworten nicht einverstanden - weder beschäftigt sich die Frage.

Das Ein-Pixel-Bild löst ein eigentliches Problem für webbasierte Analytics-Apps (wie Google Analytics), wenn im HTTP-Protokoll gearbeitet wird - wie Daten (Webmetriken) vom Client übertragen werden an den Server.

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 für Ressourcen an Server. 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 von einem Client bei Bedarf abzurufen. Auch hier können Server nur Ressourcen bereitstellen, die nicht zur Verfügung stehen fordere sie an.

Was ist die Lösung für das Problem, Daten vom Client zurück zum Server zu bringen? Im HTTP-Kontext gibt es andere Protokollmethoden als GET (z. B. POST), aber dies ist aus vielen Gründen eine eingeschränkte Option (wie durch seine 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 Anforderungsheader besteht (z. B. Referer und Benutzer) -Agent-Header), letzterer enthält Informationen über den Client - z. B. Browsertyp und -version, Browsersprache, Betriebssystem usw.

Dies ist wiederum Teil der Anforderung, die der Client an den Server sendet. Also die Idee, die das Ein-Pixel-GIF motiviert, besteht darin, dass der Client die Webmetrikdaten in einem Anforderungsheader an den Server sendet.

Aber dann wie man den Client dazu bringt, eine Ressource anzufordern, damit sie zum Senden der Metrikdaten "ausgetrickst" werden kann? Und wie man den Client dazu bringt, die tatsächlichen Daten zu senden, die der Server wünscht?

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 Weist den Client an, eine bestimmte Ressource von einem bestimmten Server (dem GA -Server) anzufordern und bestimmte im Anforderungsheader eingeschlossene Daten zu senden.

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 die 1 x 1 pixeltransparent 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 URL anfordern (alles) gepackt nach dem '?'). Damit diese Daten jedoch vom Client (wo sie erstellt werden) zum GA Server (wo sie protokolliert und aggregiert werden) gelangen, muss eine HTTP-Anfrage vorliegen, also die Datei ga.js (google analytics) Skript, das vom Client heruntergeladen wird, sofern es nicht vom Client zwischengespeichert wird (aufgrund einer Funktion, die beim Laden der Seite aufgerufen wird), weist den Client an, alle Analysedaten zusammenzustellen - z. B. Cookies, Adressleiste, Anforderungsheader usw. Verknüpfen Sie es zu einer einzelnen Zeichenfolge und hängen Sie es als Abfragezeichenfolge an eine URL an ( * http: //www.google-analytics.com/__utm.gif* ?) wird zum RL anfordern.

Mit jedem Webbrowser, mit dem Sie die HTTP-Anforderung für die in Ihrem Browser angezeigte Webseite anzeigen können (z. B. Safari Web Inspector, Firefox/Chrome Firebug), lässt sich dies leicht beweisen = usw.).

Ich habe zum Beispiel eine gültige URL zu einer Unternehmenshomepage in die Adressleiste 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 Analytics-Apps, GA, verwendet , Omniture, Coremetrics usw.)

Der von mir verwendete Browser war Safari, also klickte ich in der Menüleiste auf Develop und dann auf Show Web Inspector. Klicken Sie in der oberen Zeile des Webinspektors auf Ressourcen, suchen Sie die Ressource utm.gif in der Liste der in der linken Spalte angezeigten Ressourcen und klicken Sie dann auf Überschriften = tab. Das wird dir so etwas zeigen:

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 zu beachten sind:

  1. Die Anfrage war in der Tat eine Anfrage für 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: Beispiel: tmsr ist für mich der Variablenname von GA, der sich auf die Bildschirmauflösung des Clients bezieht ein Wert von 1280 x 800; tmfl ist der Variablenname für die Flash-Version mit einem Wert von 10,3 usw.

  3. Der Response Header aufgerufen Content-Type (vom Server zurück an den Client gesendet) bestätigt auch, 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 Weg, den ich kenne (der die von einem gehosteten Analysedienst auferlegten Einschränkungen erfüllt).

54
doug

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.

13
Ulrich Dangel

Weil ein solches GIF eine bekannte Darstellung in einem Browser hat - es handelt sich um einen einzelnen Pixel. Alles andere birgt das Risiko, den tatsächlichen Inhalt der Seite visuell zu beeinträchtigen. 

HTTP-Fehler können als übergroße Rahmen des Fehlertextes oder sogar als Popup-Fenster angezeigt werden. Einige Browser können sich auch beschweren, wenn sie leere Antworten erhalten.

In-Page-Bilder sind außerdem einer der wenigen Datentypen, die standardmäßig in allen Browsern zulässig sind. Alles andere erfordert möglicherweise das Herunterladen einer expliziten Benutzeraktion.

8
thkala

Hiermit soll die Frage des OP beantwortet werden: "Warum GIF-Bilddaten bereitstellen ..."

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

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

Wenn Sie kein Bild liefern, zeigt der Browser in diesem Fall ein Platzhaltersymbol an, das unschön aussieht und den Eindruck erweckt, dass Ihr Dienst defekt ist!

Was ich mache ist, suche nach dem AcceptHeader-Feld. Wenn Ihr Skript über ein img -Tag wie dieses aufgerufen wird, sehen Sie in der Kopfzeile der Anforderung Folgendes:

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

Wenn "image/" * Zeichenfolge im AcceptHeader-Feld enthalten ist, gebe ich das Bild an, ansonsten antworte ich einfach mit 204.

4
Harmeet

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

1

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

warum 1x1 GIF und kein _204 No-Content_ Statuscode?

_204 No-Content_ ermöglicht es dem Server, alle Antwortheader (Inhaltstyp, Inhaltslänge, Inhaltscodierung, Cache-Kontrolle usw.) wegzulassen und einen leeren Antworttext mit 0 Byte zurückzugeben (und eine Menge nicht benötigter Daten zu sparen Bandbreite).

Browser wissen, dass sie _204 No-Content_ Antworten respektieren und nicht auf Antwortheader und Antworttext warten müssen.

wenn der Server einen Antwortheader festlegen muss (z. B. _cache-control_ oder cookie), kann er _204 No-Content_ nicht verwenden, da Browser den Antwortheader von Entwurf her ignorieren (gemäß der HTTP-Protokollspezifikation).

warum 1x1 GIF und kein _Content-Length: 0_ -Header mit _200 OK_ -Statuscode?

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

  • kompatibilität mit älteren Browsern
  • MIME-Typüberprüfung in Browsern, 0 Byte ist kein gültiges Image.
  • _200 OK_ mit 0 Bytes wird möglicherweise nicht vollständig von zwischengeschalteten Proxyservern und VPNs unterstützt
0
Elad Yosifon

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

Ein Fehlercode würde funktionieren, wenn Sie auf die Protokolldateien Ihres Servers zugreifen können. Der Zweck der Bereitstellung des Bildes besteht darin, mehr Daten über den Benutzer zu erhalten, als dies bei einer Protokolldatei normalerweise der Fall wäre.

0
fauverism