2011-02-09 16 views
1

基本的なhtmlページには、別のサイトを指すリンクがあります。私がしたいことは、クリックを追跡することです。 Clickイベントでfalseを返さずに、リンクのClickイベントで0ピクセルの画像呼び出しを送信することで、そうしています。リンククリックトラッキングはSafariブラウザでは機能しません

Safari(Windows OS)以外のすべてのブラウザで同じように問題なく動作します。

JavaScriptを使用してリンクをクリックしたときリダイレクトを遅らせ、画像リクエストをサーバーに送信し、サーバー側でクリックを記録します。私は遅延を増やそうとしましたが、成功しませんでした...トラッカーは、Safariを除くすべてのブラウザでgr8を動作させ、要求を一切送信しませんでした。

私はなぜ知っているが、おそらくその要求を行う前に、全体のjsた後に実行される完全なJSのためのサファリの待機が実行されていること、それがリダイレクトされますいけない....

=======

==========================================

<html> 
    <head> 
    <script type="text/javascript"> 
     function logEvent(){ 
    image = new Image(1,1); 
    image.onLoad=function(){alert("Loaded");}; 
    image.onLoad=function(){alert("Error");}; 
    image.src='http://#path_to_logger_php#/log.php?'+Math.random(0, 1000) + '=' + Math.random(0, 1000);    
    pauseRedirect(500); 
     } 

     function pauseRedirect(millis){ 
    var date = new Date(); 
    var curDate = null; 
    do {curDate = new Date();} 
    while(curDate-date < millis); 
     } 
    </script> 
    </head> 
    <body>   
    <a href="http://www.google.com" onclick="logEvent(); return true;">Site 1</a><br/> 
    <a href="http://www.yahoo.com" onclick="logEvent(); return true;">Site 2</a><br/> 
    </body> 
</html> 

=========================================== ==============

コードは、chrome、firefox、すなわちOperaで動作します。 Safariでしか動作しません.....手がかり....

+0

イメージが読み込まれたり、 'setTimeout()'のようなことをするのを待っていますか?いくつかのコードを見ることができますか? – alex

+0

ユーザーのブラウザを500ミリ秒間フリーズしてくれてありがとう。 JSで睡眠をエミュレートする...コメントはありません。 PS:サファリはJSがリクエストを行う前にJSが終了するまで待つとも思っています。あなたは、イメージthingadongの代わりに(つまり、あなたのカウンタが同じサーバ上にある場合)コードを非同期AJAXリクエストに変更する必要があります。 –

+0

コードが追加されました::)私のカウンターPHPは別のサーバーにあり、そこに保管する必要があります。**任意の他の提案.... –

答えて

0

すべてのWebKitブラウザで同じ問題が発生しました。それ以外の場合は、新しいImage()。src = "url"を実行するだけで済みます。ブラウザは新しいページに移動してもリクエストを送信します。 WebKitは、直後に新しいページに移動したときに送信される前に要求を停止します。ドキュメントにイメージを注入するいくつかのハックを試してみてください。さらにforce a re-paintをimg.clientHeightで試してみました。私は実際には、target.preventDefaultを使用したくありません。なぜなら、リンクがtarget = "_ blank"、form submitなどのとき頭痛の原因になるからです。Cross Origin Resource Sharingをサポートするブラウザ用の同期XmlHttpRequestを使用して終了しました。レスポンスを読まなくてもサーバーにリクエストしてください。同期要求には、応答を待つ間にUIスレッドをロックするという不幸な副作用があります。したがって、サーバーが遅い場合は、応答を受信するまでページ/ブラウザがロックされます。

var supportsCrossOriginResourceSharing = (typeof XMLHttpRequest != "undefined" && "withCredentials" in new XMLHttpRequest()); 
function logEvent() { 
    var trackUrl = 'http://#path_to_logger_php#/log.php?'+Math.random(0, 1000) + '=' + Math.random(0, 1000); 
    if(supportsCrossOriginResourceSharing) { 
     xhrTrack(trackUrl); 
    } else { 
     imgTrack(trackUrl); 
    } 
} 

function xhrTrack(trackUrl) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", trackUrl, false); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState >= this.OPENED) xhr.abort(); 
    } 
    try { xhr.send() } catch(e) {} 
} 

function imgTrack(trackUrl) { 
    var trackImg = new Image(1,1); 
    trackImg.src = trackUrl; 
}