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

Exploring AngularJS: A Guide to Accessing Millisecond Time

Exploring the Functionality of Bootstrap 5 Collapse Component with VueJS 2

Having trouble retrieving data using a custom URL in Axios with ReactJs

The toggle button for columns is not triggering the callback action

Creating a dynamic anchor scrolling effect within a dropdown select menu

JavaScript code to read a .txt file

The term "Highcharts does not exist"

Error: The function react__WEBPACK_IMPORTED_MODULE_6___default.a.useState is not defined as a function

Troubleshooting issue with Gulp watch on Node v4.6.0

The initial rendering of the NextJs 13 application is experiencing significant sluggishness when deployed on an EC2

Is it possible to include numbers and commas in JQuery Validation?

Can you explain how to convert a 32-bit floating point number from a Buffer to a JSON string in NodeJS while maintaining the original precision?

Is there a way for me to retrieve the value nested within an object within another object from this Api response?

Problem with translating a variable into a selector in JQuery

What is the best way to transfer the "user" object from TopBar.js to App.js in my project?

Convert a string with the characters '"' retrieved from a MySQL database into JSON

Am I on the right track with my service definition in Angular?

The passing of React parent component props to the child component is not functioning as expected

Troubleshooting Typescript compilation using tsc with a locally linked node package

Using jQuery to insert a new string into the .css file