Tracking Clicked Links using ping Attribute of <a> Tag

The ping attribute can be included in <a> tag to automatically send a POST request to the provided URL(s) whenever the link is clicked.

<!-- on clicking ping would be sent to https://usefulangle.com/track.php -->
<a href="https://usefulangle.com/post/288/html-output-tag" ping="https://usefulangle.com/track.php">Click here</a>

Multiple ping URLs can also be given in the ping attribute. They need to be separated with a white-space.

<!-- on clicking ping would be sent to https://usefulangle.com/track.php & http://someserver.com/notify -->
<a href="https://usefulangle.com/post/288/html-output-tag" ping="https://usefulangle.com/track.php http://someserver.com/notify">Click here</a>

What is a Ping Here ?

• Ping is basically a HTTP POST request.
• Request body of this POST request just contains the string PING.
• Request does not wait for a response from the server.

Ping vs Sending AJAX Request on Link Click

Using Javascript, an AJAX request can also be sent to the server when a link is clicked. However this would need custom code to be written.

But by using the ping attribute, browser automatically sends a HTTP request upon a click. No custom code is required. The request will be sent even if the user has disabled Javascript.

Getting Clicked URL Information on Server Side

Information related to the clicked link can be fetched by analyzing the request headers, especially ping-from and ping-to.

For example consider the below link :

<a href="https://usefulangle.com/post/288/html-output-tag" ping="https://usefulangle.com/track.php">Click here</a>

If the user clicks this link, a ping would be sent to https://usefulangle.com/track.php.

The value of ping-from request header will be the URL of the page from which the user clicked the link.

And the value of ping-to request header will be the URL the user is navigating to. In this case, https://usefulangle.com/post/288/html-output-tag.

So by reading the request headers on the server side script, information about the clicked link can be determined.

For example, using Node.js :

const http = require('http');

const server = http.createServer((request, response) => {
    if('ping-to' in request.headers) {
        let clicked_link = request.headers['ping-to'];

        // save to database
        // rest of the logic
    }
});

server.listen(3000);

Advantages of the ping Attribute

• Get information about the clicked links without writing custom Javascript code.
• Get information about the clicked links even though Javascript is disabled in browser.
• It brings in transparency, and is a semantic way of tracking. Users / bots can at least know which links are being tracked. This is better than tracking links, but not disclosing it.

ping Attribute & Privacy Concerns

Due to its tracking nature, there is a negative perception about the ping attribute in general.

However even if the ping attribute is not used, it is easy to track links clicked by the user (using custom Javascript code).

Keeping privacy concerns apart, ping attribute offers a clean and efficient way of tracking clicked links.

Browser Compatibility

As of Dec 2019, there is a 90% browser support for the ping attribute.

Latest browser support can be found from Can I Use.