0

ユーザーがページの特定の要素をクリックすると、サーバーに情報を送り返すWebページの使用状況追跡システムを設定しています。クロスドメインを追跡するため、従来のajaxではなくビーコンを使用して情報を送信していますが、クリックされた要素がリンクである場合、Chrome/Safariで問題が発生します。

これは、問題を示す私のコードの簡略化されたバージョンです。

<!DOCTYPE html>
<head>
    <title>Tracking Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <div id="link">
        <a href="">link</a>
    </div>
    <div id="nolink">
        <div>nolink</div>
    </div>

    <script type="text/javascript">
    function track(event){
        var beacon = new Image();
        var location = "http://www.mypage.com/tracking?element=";
        if (event.target.parentNode.id =='link'){
            beacon.src = location + '"link"';
        } else if (event.target.parentNode.id == 'nolink'){
            beacon.src = location + '"nolink"';
        }
    }
    window.addEventListener('click', track, true);
    </script>
</body>
</html>

Firefox、Chrome、Safariでは、「nolink」をクリックすると、期待どおりにメッセージがサーバーに返されます。「リンク」をクリックすると、Firefoxではメッセージが送信されますが、ChromeとSafariではメッセージは送信されません。（もちろん、IEでは何も機能しませんが、これはイベントリスナーのせいであると思うので、後で説明します）。

次のページが読み込まれる前にメッセージが送信されるようにするために、他に何かする必要がありますか？

誰かが疑問に思っている場合は、ビーコンの反対側に次のようなdjangoビューがあります。

def listener(request):
    logging.info(request.GET.get("element", "received a message but couldn't find an element"))
    return HttpResponse(status=200)
4

0 に答える 0