如何记录超链接点击？

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

Alternatively, you could do what Google Reader does, and put a "from url" in each link:

<script>
$("a:href").each(function(){
    this.attr("href", this.attr("href") + "?from=" + encodeURIComponent(window.location));
    // (note: this exact code won't handle links which already have GET vars…)
});
</script>

Then use some middleware to log the "from" in inbound requests.

This has the disadvantage that it won't be able to log clicks going to another domain… But that might be alright.

Answer 3

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>

Answer 4

我见过许多网站使用的方法，包括谷歌，都有一个“重定向”页面，所以所有链接都通过该页面/控制器，你记录它，然后从那里你可以重定向它们

Answer 5

How 'bout an optional "log" parm on each page that is included as part of the links so you don't have to have any Javascript at all? Granted, each page could be logging something from the referrer page, but it shouldn't care, since you could have it just pass off whatever's in the log parm to the logging infra and go on.