How can I log a hyperlink click?

Question

I have a hyperlink which I need to log when it's clicked.

I created a small prototype, and the problem is repeatable by creating a new MVC 2 Web app project.

Add

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

to the Site.Master file.

And

public ActionResult LogSomething()
{
    string doNothing = DateTime.Now.ToString();
    return new EmptyResult();
}

to the HomeController.cs file

And

<p>
    <a id="lnkTestPost" href="/home/about">Test Post</a>

    <script type="text/javascript">
        $("#lnkTestPost").click(function() {
            $.post("/home/LogSomething");
        });
    </script>
</p>

in Home/Index.aspx

Put a break point in the LogSomething() action method in the HomeController.

But when I run it, sometimes the breakpoint is hit, other times it isn't.

I'm assuming it's not being hit due to the actual link sending the browser to another page, but shouldn't the post be made before the link is fired?

Is there anyway I can ensure the logging code is fired?

Please note; adding the logging functionality in the link target is not an option.

EDIT: The original hyperlink is actually to a custom protocol for an app installed on the user PC. So the link is to something like "myapp:myArgs". I didn't mention that in order to keep things simple, unfortunately, since none of the answers really apply to me, I now think it's necessary to mention.

Answer 1

If I were doing it, I would probably do what, eg, Google does and setup a URL which logs then redirects. For example:

<a href="/home/about">stuff</a>
<script>
    $("a:href").each(function(){
        this.attr("href", "/log?url=" + encodeURIComponent(this.attr("href")));
    });
</script>

Then /log handler would do something like:

def log(request):
    target_url = request.GET["url"]
    log_link(target_url)
    return HttpRedirect(target_url)

You'd need to put some thought into dealing with external links (eg, how you want to handle http://example.com/log?url=http://evil.com/)… But that's a solvable problem.

Also, for bonus points, you could swap the URL as the link is clicked (this is what Google does in their search results), so the mouse-over link-preview looks correct.

Answer 2

I think the browser could easily navigate to the URL before logging the click. How about:

<p>
    <a id="lnkTestPost" href="#">Test Post</a>

    <script type="text/javascript">
        $("#lnkTestPost").click(function() {
            $.post("/home/LogSomething", function(data) {
              // only tell the browse to navigate away once its logged
              window.location = '/home/about';
            });
        });
    </script>
</p>