How do Google and Yahoo replace the URL in the browser status bar?

Question

On the Google and Yahoo search pages, the URLs of the 10 search result links actually point to google.com or yahoo.com. The URLs have extra arguments that allow google.com or yahoo.com to redirect to the actual search result when the link is clicked. When the user mouses over the link, the search result URL (and not the google.com or yahoo.com URL) is displayed in the browser's status bar.

I'm wondering how they do that.

Many years ago, this would have been accomplished by having some javascript that sets window.status, but that doesn't seem to work anymore, as is explained by Reliable cross browser way of setting Status bar text

I have a link that looks like this: <a href="http://somedomain.com/ReallyLongURLThatShouldNotBeSeenInTheStatusBar" onmouseover="window.status='http://niceShourtUrl.com/'" onmouseout="window.status=''">Click Me</a>

This link tried to use the window.status strategy, but it doesn't work. How do I fix this link so that it acts like the links on Google's and Yahoo's search result pages? In this example, I want "http://niceShourtUrl.com/" to be displayed in the status bar when the user mouses over the link.

Answer 1

It's hard to read the source, but you will see that in fact the URLs (in the <a> tags) are the correct destination URLs, which is why the browser's status bar shows the correct URL (instead of the tracking link that it redirects you through when you actually click). There is then some onclick JavaScript that can then intercept the clicks before the browser's default action (following the link) can take place.

Answer 2

Google has onMouseDown handlers on every link that change the link from the original source pointing towards Google redirect. So onmousedown replaces the link and when onClick appears (shortly after the onmousedown) the link is pointing already to somewhere else than the original direction.

Step 1. User clicks on a link (mouse button is down)

Step 2. onMouseDown event triggers

Step 3. link target (a href value) is altered

Step 4. Mouse button comes up

Step 5. onClick event triggers

Step 6. Browser sees that a link was clicked and forwards the user to the desired destination (set by an already altered href value)

Step 7. Browser opens a Google redirect page and this forwards the user to the original destination

Updated: Google used to track clicks on an onmousedown event only and didn't alter the link destination. When a mouse button was pressed on a link an image loading request was made towards google servers which counted the click (onmousedown => new Image("coogle.counter.server.com/link=www.pressed.com")) but I guess it was misused or it wasn't reliable enough that they decided to use the current link altering technique.

Answer 3

I think they actually have the full link in the href of the link. BUT they use javascript to catch the onclick and then when you click the link, it routes through their site.

Answer 4

For example the link to StackOverflow looks actually like this:

<a onmousedown="return clk(this.href,'','','res','1','','0CBwQFjAA')" class="l" href="http://stackoverflow.com/"><em>Stack Overflow</em></a>

Now the click function is somewhere inside that minimized source code. Here you have the code with some additional whitespace:

window.clk = function ( e, f, g, k, l, b, m )
{
    if ( document.images )
    {
        var a = encodeURIComponent || escape,
            c = new Image,
            h = window.google.cri++;

        window.google.crm[h] = c;
        c.onerror = c.onload = c.onabort = function()
        {
            delete window.google.crm[h]
        };

        var d, i, j;

        if ( google.v6 )
        {
            d = google.v6.src;
            i = google.v6.complete || google.v6s ? 2 : 1;
            j = (new Date).getTime() - google.v6t; delete google.v6
        }

        if ( b != "" && b.substring( 0, 6 ) != "&sig2=" )
            b = "&sig2=" + b;

        c.src = [
                "/url?sa=T",
                "&source=" + google.sn,
                f ? "&oi=" + a(f) : "",
                g ? "&cad=" + a(g) : "",
                "&ct=",
                a( k || "res" ),
                "&cd=",
                a( l ),
                "&ved=",
                a( m ),
                e ? "&url=" + a( e.replace( /#.*/, "" ) ).replace( /\+/g, "%2B" ) : "",
                "&ei=",
                google.kEI,
                d ? "&v6u=" + a( d ) + "&v6s=" + i + "&v6t=" + j : "",
                b ].join( "" )
    }
    return true
 };

Without really looking at it in detail, the important idea about it is that it calculates some google url, and sets this.href (= the link's link target!) to that new url when you click the link. After that the link is then evaluated and the browser sends you to that changed url despite showing the original link url before.

Answer 5

It's a multipart process. For a given <a> tag, the href attribute in the HTML will point to the actual page. This allows browsers without JavaScript to go to the right place.

Next, there is a mousedown event handler on the link. The mousedown event fires when you depress a mouse button while hovering over the link. This event fires even if the right or middle mouse button is pressed. The handler replaces the href with the redirecting script in the search engine's domain.

That way they still display the correct URL up to the last possible moment, but they still use the redirecting hit logger, even when you open the link in a new tab.

Answer 6

It appears they do the direct opposite of what you have in your example. They have the href="the link" and the onclick event as the tracking function.