web-dev-qa-db-ja.com

なぜ1x1ピクセルGIF(ウェブバグ)データを提供するのですか?

多くの分析および追跡ツールは、クロスドメインイベントの保存/処理のために1x1 GIFイメージ(Webバグ、ユーザーには見えない)を要求しています。

なぜこのGIF画像を提供するのですか? そうではないでしょうか もっと効率的 503 Service Temporary Unavailableまたは空のファイルなどのエラーコードを返すだけですか?

更新:より明確にするために、すべての情報が必要なときにGIF画像データを提供する理由を尋ねています すでに送信されています 要求ヘッダー内。 GIFイメージ自体は有用な情報を返しません。

74
Viliam

ダグの答えはかなり包括的です。追加のメモを追加すると思いました(OPのリクエストに応じて、コメントから)

Dougの答えは、1x1ピクセルビーコンが使用目的に使用される理由を説明しています。応答にHTTPステータスコード204、No Contentを使用し、画像本文を送信しないという、代替の潜在的なアプローチの概要を説明すると思いました。

204コンテンツなし

サーバーは要求を満たしましたが、エンティティ本体を返す必要はなく、更新されたメタ情報を返したい場合があります。応答には、エンティティヘッダーの形式で新規または更新されたメタ情報が含まれている場合があります。これは、存在する場合、要求されたバリアントに関連付けられる必要があります。

基本的に、サーバーは要求を受信し、本文を送信しない(この場合は画像を送信しない)ことを決定します。しかし、これはエージェントにこれが意識的な決定であることを知らせるコードで応答します。基本的に、肯定的に応答するより短い方法です。

GoogleのPage Speedドキュメント から:

ページビューを非同期で記録する一般的な方法の1つは、ユーザーがページを読み込むときにログサーバーに通知するJavaScriptスニペットをターゲットページの下部に(またはonloadイベントハンドラーとして)含めることです。これを行う最も一般的な方法は、「ビーコン」に対するサーバーへの要求を作成し、ビーコンリソースのURLのパラメーターとして目的のすべてのデータをエンコードすることです。 HTTP応答を非常に小さく保つために、透明な1x1ピクセルの画像はビーコン要求の良い候補です。少し最適なビーコンでは、1x1 GIFよりもわずかに小さいHTTP 204応答(「コンテンツなし」)を使用します。

試したことは一度もありませんが、理論的には、Googleアナリティクスの場合、GIF自体を送信せずに35バイトを節約して同じ目的を果たす必要があります。 (物事のスキームでは、1日に何兆ものヒットを提供するGoogleアナリティクスでない限り、35バイトは本当に何もありません。)

次のコードでテストできます:

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

まず、私は以前の2つの答えに同意しません。どちらも質問に関与しません。

1ピクセルの画像は、HTTPプロトコルで作業する際のWebベースの分析アプリ(Googleアナリティクスなど)の固有の問題を解決します--データの転送方法(Webメトリック)クライアントからサーバーへ.

プロトコルで記述されている最も単純なメソッド、最も単純な(少なくともリクエスト本体を含む最も単純なメソッド)はGET requestです。このプロトコル方式に従って、クライアントはリソースに対するサーバーへの要求を開始します。サーバーはそれらの要求を処理し、適切な応答を返します。

GAのようなWebベースの分析アプリの場合、この単方向スキームは悪いニュースです。サーバーが要求に応じてクライアントからデータを取得できないように見えるためです。それらを要求します。

では、クライアントからサーバーにデータを戻す問題の解決策は何ですか?HTTPコンテキスト内には、GET以外のプロトコルメソッドがあります(例: 、POST)が、それは多くの理由で制限されたオプションです(フォームデータの送信など、そのまれな特殊な使用によって証明されるように)。

ブラウザからGETリクエストを見ると、リクエストURLとリクエストヘッダーで構成されていることがわかります。 (たとえば、リファラーとユーザーエージェントヘッダー)、後者にはクライアントに関する情報が含まれています。たとえば、ブラウザーのタイプとバージョン、ブラウザーの言語、オペレーティングシステムなどです。

繰り返しますが、これは、クライアントがサーバーに送信するリクエストの一部です。 1ピクセルgifを動機付けるという考えは、クライアントがWebメトリックデータをサーバーに送信し、リクエストヘッダー内にラップすることです。

しかし、クライアントにリソースを要求させる方法は、メトリックデータの送信に「トリック」することができますか?そして、クライアントに送信させる方法サーバーが必要とする実際のデータ?

Googleアナリティクスは良い例です:ga.jsファイル(クライアントへのダウンロードがWebページの小さなスクリプトによってトリガーされる大きなファイル) クライアントに特定のサーバー(GAサーバー)から特定のリソースを要求し、特定のデータを要求ヘッダー

ただし、このリクエストの目的はリソースを実際に取得することではなく、サーバーにデータを送信することであるため、このリソースはできるだけ小さく、Webページでレンダリングされるときに表示されないようにする必要があります。したがって、1 x 1ピクセル透過gif。サイズは可能な最小サイズであり、形式(gif)は画像形式の中で最小です。

より正確には、すべてのGAデータ-単一のアイテムごとに)が組み立てられ、リクエストURLのクエリ文字列(「?」の後のすべて)しかし、そのデータがクライアント(作成された場所)からGAサーバー(場所がある場所)記録および集計)HTTPリクエストが存在する必要があるため、ga.js(ページがロードされるときに呼び出される関数の結果としてクライアントによってキャッシュされない限り、ダウンロードされるGoogleアナリティクススクリプト)は、クライアントにすべての分析データ(Cookie、ロケーションバー、リクエストヘッダーなど)を1つの文字列に連結し、クエリ文字列としてURLに追加します(* http://www.google-analytics .com/__ utm.gif *?)そして、それはリクエストURLになります。

これは、ブラウザに表示されているWebページのHTTPリクエストを表示できるWebブラウザを使用して簡単に証明できます(例:SafariのWeb Inspector 、Firefox/ChromeFirebugなど)。

たとえば、企業のホームページの有効なURLをブラウザーのロケーションバーに入力すると、そのホームページが返されてブラウザーに表示されました(主要な分析アプリの1つであるGAを使用する任意のWebサイト/ページを選択できました) 、Omniture、Coremetricsなど)

使用したブラウザはSafariだったので、メニューバーでDevelopをクリックしてからWeb Inspectorを表示。 Webインスペクターの一番上の行で、Resourcesをクリックし、左側の列に表示されているリソースのリストからutm.gifリソースを見つけてクリックします、[Headers]タブをクリックします。次のようなものが表示されます。

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

注意すべき重要な点は次のとおりです。

  1. 上記の最初の行で証明されているように、リクエストは実際にはutm.gifに対するリクエストでした:*リクエストURL:http://www.google-analytics.com/__utm.gif*。

  2. Googleアナリティクスのパラメーターは、リクエストURLに追加されたクエリ文字列で明確に表示されます:たとえば、utmsrクライアントの画面解像度を参照するGAの変数名です。私にとっては、1280x800の値を示しています。 utmflはフラッシュバージョンの変数名で、10.3などの値を持ちます。

  3. 応答ヘッダーと呼ばれるContent-Type(サーバーから送信されたクライアント)は、リクエストされて返されたリソースが1x1ピクセルgifであることも確認します:Content-Type:image/gif

クライアントとサーバー間でデータを転送するためのこの一般的なスキームは、永遠に続いています。これを行うにはもっと良い方法がありますが、それは私が知っている唯一の方法です(ホストされた分析サービスによって課される制約を満たします)。

54
doug

一部のブラウザでは、リソースをロードできなかった場合にエラーアイコンが表示される場合があります。また、サービスのデバッグ/監視も少し複雑になります。監視ツールがエラーを良い結果として処理することを確認する必要があります。

あなたは何も得られません。サーバー/フレームワークによって返されるエラーメッセージは通常、1x1画像よりも大きくなります。つまり、基本的に何もせずにネットワークトラフィックを増やします。

14
Ulrich Dangel

そのようなGIFはブラウザーで既知のプレゼンテーションを持っているため、単一のピクセル、ピリオドです。それ以外のものは、ページの実際のコンテンツに視覚的に干渉するリスクがあります。

HTTPエラーは、エラーテキストの大きすぎるフレームとして、またはポップアップウィンドウとして表示されることもあります。一部のブラウザは、空の応答を受け取った場合にも文句を言う場合があります。

さらに、ページはめ込み画像は、すべてのブラウザでデフォルトで許可されている数少ないデータ型の1つです。それ以外の場合は、明示的なユーザーアクションをダウンロードする必要があります。

8
thkala

これは、OPの質問-「GIF画像データを提供する理由...」に答えるためです。

一部のユーザーは、イベントロギングサービスを呼び出すためのシンプルなimgタグを配置します-

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

この場合、画像を提供しないと、ブラウザはプレースホルダアイコンを表示しますが、これは見苦しく見え、サービスが壊れているような印象を与えます!

私がしているのは、Acceptヘッダーフィールドを探すことです。このようなimgタグを介してスクリプトが呼び出されると、リクエストのヘッダーに次のようなものが表示されます-

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

"image /" *文字列がAcceptヘッダーフィールドにある場合、画像を提供し、それ以外の場合は、204で返信します。

4
Harmeet

主な理由は、Cookieを添付することです。そのため、ユーザーが一方から他方に移動した場合でも、Cookieを添付するのと同じ要素があります。

2

@MaciejPerlińskiは基本的に正しいですが、詳細な答えが有益だと感じています。

なぜ1x1 GIFであり、204 No-Contentステータスコード?

204 No-Contentは、サーバーがすべての応答ヘッダー(Content-Type、Content-Length、Content-Encoding、Cache-Controlなど)を省略し、0バイトの空の応答本文を返すことを可能にします(不要な帯域幅を大幅に節約します)。

ブラウザは204 No-Content応答。応答ヘッダーと応答本文を期待/待機しない。

サーバーが応答ヘッダーを設定する必要がある場合(例:cache-controlまたはcookie)、彼は204 No-Contentブラウザーは(HTTPプロトコル仕様に従って)設計上、応答ヘッダーを無視するためです。

なぜ1x1 GIFであり、Content-Length: 0ヘッダーと200 OKステータスコード?

いくつか例を挙げると、おそらくいくつかの問題が混在しています。

  • レガシーブラウザの互換性
  • ブラウザでのMIMEタイプのチェック。0バイトは有効な画像ではありません。
  • 200 OK 0バイトの場合、中間プロキシサーバーとVPNで完全にサポートされない場合があります
0
Elad Yosifon

Beacon API( https://w3c.github.io/beacon/ )実装メソッドを使用している場合、画像を提供する必要はありません。

サーバーのログファイルにアクセスできる場合、エラーコードが機能します。イメージを提供する目的は、ログファイルで通常行うよりも多くのユーザーに関するデータを取得することです。

0
fauverism