HTML5 ping 属性

HTML5 では <a> タグに ping という属性が定義されており、 リンクが押された際にリンク先とは別にログ用の URL にリクエストを投げることがです。

<a href="<target_url>" ping="<logging_url>"></a>

このように指定すると、ユーザがリンクをクリックした際に <target_url>にナビゲートされるだけでなく 同時に <logging_url> に POST リクエストが飛ぶようになります (MIME type に text/ping)。 この機能は検索エンジンやまとめサイトのようにユーザを外部のサイトへナビゲートすることが多く、その際にどのリンクが押されたのかをログしたい場合に非常に便利です。

<a ping> ができるまでは外部サイトへのリンクがクリックされたことをログする方法は大きく分けると以下の 2 つがありました

• まずログ用の URL にユーザをナビゲートし、そこからユーザを目的の外部サイトへリダイレクトする
• リンクが押された際にログ用の URL を src 属性に指定した <img> タグに動的に作成したり、XMLHttpRequest などで非同期リクエストをログ用の URL に投げる

しかし前者の方法には、URL リダイレクタにユーザを一度飛ばすため 1 ページロード分ユーザが目的のページに着くのが遅くなってしまうという問題があります。 一方後者の方法では、<img> や XMLHttpRequestで指定した URL がロードされるよりも前にページ遷移によって現在のページがアンロードされてしまい、ログ用の URL へのリクエストが行われない可能性があり問題があります。

しかし<a ping>を使うと URL リダイレクタを挟む必要が無いのでユーザに余計な時間を使わせることもなく、 <img>を使った非同期的な方法と違い現在のページがアンロードされてもログ用 URL へのリクエストはブラウザが行ってくれるのでより確実にログを取ることができるようになります。 実際、Google は 2013/10 から対応ブラウザでは "a ping"を使っていて、それによって 1 クリックにつき 200〜400 [ms]ユーザの時間を節約できています。