What methods do Google and Yahoo use to update the URL displayed in the browser's status bar?

Question

What methods do Google and Yahoo use to update the URL displayed in the browser's status bar?

Have you ever noticed that on Google and Yahoo search pages, the URLs of the search result links actually point to google.com or yahoo.com? It's a clever trick they use by adding extra arguments to the URLs that allow for redirection to the actual search result when clicked. This way, the user sees the search result URL in their browser's status bar instead of the google.com or yahoo.com URL.

I've always been curious about how they achieve this.

In the past, setting the window.status property with JavaScript would have been the solution, but unfortunately, that method doesn't seem to work anymore as explained in Reliable cross browser way of setting Status bar text

For example, I tried using a link like this:

<a href="http://somedomain.com/ReallyLongURLThatShouldNotBeSeenInTheStatusBar"  onmouseover="window.status='http://niceShourtUrl.com/'" onmouseout="window.status=''">Click Me</a>

However, the window.status strategy does not work for achieving the same effect as seen on Google's and Yahoo's search results pages. What can be done to fix this link so that it behaves like those links? Ideally, when a user hovers over the link, "" should be displayed in the status bar.

javascript url yahoo statusbar

Answer 1

Answer №1

Deciphering the content may be a challenge, but upon closer examination, you'll notice that the URLs within the <a> tags are indeed the accurate destination URLs. This explains why the browser's status bar reflects the correct URL instead of the tracking link it redirects you through after clicking. Additionally, there exists a piece of onclick JavaScript code designed to intercept clicks before the default action of the browser (following the link) occurs.

Answer 2

Deciphering the content may be a challenge, but upon closer examination, you'll notice that the URLs within the <a> tags are indeed the accurate destination URLs. This explains why the browser's status bar reflects the correct URL instead of the tracking link it redirects you through after clicking. Additionally, there exists a piece of onclick JavaScript code designed to intercept clicks before the default action of the browser (following the link) occurs.

Answer 3

Answer №2

Google has implemented a clever method to track user clicks by changing the destination of links using onMouseDown handlers. This means that when a user clicks on a link, the link is initially directed towards Google before being redirected elsewhere after an onClick event.

Here's how it works:

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

Step 2. onMouseDown event triggers

Step 3. Link target (href value) is altered

Step 4. Mouse button is released

Step 5. onClick event triggers

Step 6. Browser recognizes the click and redirects the user to the modified destination

Step 7. The browser opens a Google redirect page, sending the user to the original intended destination

In the past, Google tracked clicks using only the onMouseDown event without altering the link destination. However, this method was not as reliable, leading Google to adopt the current technique of link alteration for more accurate tracking.

Answer 4

Google has implemented a clever method to track user clicks by changing the destination of links using onMouseDown handlers. This means that when a user clicks on a link, the link is initially directed towards Google before being redirected elsewhere after an onClick event.

Here's how it works:

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

Step 2. onMouseDown event triggers

Step 3. Link target (href value) is altered

Step 4. Mouse button is released

Step 5. onClick event triggers

Step 6. Browser recognizes the click and redirects the user to the modified destination

Step 7. The browser opens a Google redirect page, sending the user to the original intended destination

In the past, Google tracked clicks using only the onMouseDown event without altering the link destination. However, this method was not as reliable, leading Google to adopt the current technique of link alteration for more accurate tracking.

Answer 5

Answer №3

From what I have observed, it seems that the complete link is embedded within the 'href' attribute of the displayed link. However, they employ a JavaScript function to intercept the 'onclick' event, which subsequently directs you through their website upon clicking the link.

Answer 6

From what I have observed, it seems that the complete link is embedded within the 'href' attribute of the displayed link. However, they employ a JavaScript function to intercept the 'onclick' event, which subsequently directs you through their website upon clicking the link.

Answer 7

Answer №4

As an illustration, the link to StackOverflow appears as follows:

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

The click function is embedded within the compressed source code. Here is the code with some added spaces for readability:

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 delving too deeply into it, the key concept here is that it generates a Google URL and assigns it to this.href (the link's target) when you click the link. Subsequently, the altered URL is processed by the browser, redirecting you to the modified destination while displaying the initial link address.

Answer 8

As an illustration, the link to StackOverflow appears as follows:

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

The click function is embedded within the compressed source code. Here is the code with some added spaces for readability:

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 delving too deeply into it, the key concept here is that it generates a Google URL and assigns it to this.href (the link's target) when you click the link. Subsequently, the altered URL is processed by the browser, redirecting you to the modified destination while displaying the initial link address.

Answer 9

Answer №5

The process consists of multiple steps. When dealing with an <a> tag, the href attribute in the HTML points to the actual page, ensuring that browsers without JavaScript can navigate to the intended destination.

Additionally, a mousedown event handler is attached to the link. This event triggers when a mouse button is pressed while hovering over the link, regardless of which mouse button is used. The handler replaces the href with a redirecting script within the search engine's domain.

By implementing this method, the correct URL is displayed until the last moment before redirection, allowing for the use of a redirecting hit logger even when opening the link in a new tab.

Answer 10

The process consists of multiple steps. When dealing with an <a> tag, the href attribute in the HTML points to the actual page, ensuring that browsers without JavaScript can navigate to the intended destination.

Additionally, a mousedown event handler is attached to the link. This event triggers when a mouse button is pressed while hovering over the link, regardless of which mouse button is used. The handler replaces the href with a redirecting script within the search engine's domain.

By implementing this method, the correct URL is displayed until the last moment before redirection, allowing for the use of a redirecting hit logger even when opening the link in a new tab.

Answer 11

Answer №6

Instead of following your example, it seems like they're doing the complete opposite. They've included the href attribute with "the link" and are using the onclick event for tracking purposes.

Answer 12

Instead of following your example, it seems like they're doing the complete opposite. They've included the href attribute with "the link" and are using the onclick event for tracking purposes.

What methods do Google and Yahoo use to update the URL displayed in the browser's status bar?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

When a row is clicked, retrieve the data specific to that row

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

Enhancing React Native experience by dynamically editing array elements

Just encountered an issue stating "PrismaClient cannot run in the browser" while working with [Next.js]

What is the proper method for terminating an Express app.all?

What is the reason behind allowing JavaScript to perform mathematical operations with a string type number?

Tips for retrieving multiple data outputs from an ajax success function

Guide to importing Bootstrap 5 bundle js using npm

URLs not being gathered by the web scraping tool

Modify content or display picture within accordion panel based on its identifier

What is the process of transforming a string into an angular binding?

Retrieve JSON object by matching another JSON property

Enhancing Functional Components with Idle Timeout using React Hooks

Removing an element from an array in a Laravel database using AngularJS

Is there a way to invoke an Angular2 function from within a Google Map infowindow?

Converting Buffers to Binary with JavaScript Node.js

When using promises in Vue, you can expect to receive an observer object

Is there a way to ensure a function is only executed once whenever the page is refreshed?

What is the best way to scale down my entire webpage to 65%?

Setting the state based on Promise values within a loop