HTML defines a ping attribute on anchor elements (links) (#tilPost)

A PR on the MDN compatibility data repository caught my eye today. The pull request’s purpose was to update the ping attribute support for Safari. I’ve never seen this attribute – let’s have a look!


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

A PR on the MDN compatibility data repository caught my eye today. The pull request's purpose was to update the ping attribute support for Safari. I've never seen this attribute – let's have a look!

The ping attribute on anchor elements

The anchor element's ping attribute accepts a space-separated list of URLs. When an anchor defines ping URLs and someone clicks it, the browser sends a POST request to these specified URLs. This functionality can be helpful if you want to track and analyse how users interact with your site.

<a href="https://www.stefanjudis.com/popular-posts/" 
   ping="https://www.stefanjudis.com/tracking/">Read popular posts</a>

To see it in action open your developer tools and click the link below.?

Read popular posts

And indeed, when you open the network panel in the developer tools (enable "preserve log" to see the request after the browser navigated to a new URL), you see a request flying to the defined URL after clicking the "ping link".

Request headers including a "PING" request payload and a "ping-to" header

The POST request's payload is the single word PING. The ping-to request header holds the link's destination, and additional information such as user-agent is available, too. It's fascinating that the content-type is text/ping. ?

To summarize, the ping attribute offers a leightweight way to implement "link click tracking". Does that mean that you can use it today?

The browser support of the ping attribute

When you look at the attribute's browser compatibility table on MDN, you see that browser support is not so bad.

Compatibility table for the ping attribute showing lacking support for Firefox and Safari (Safari is incorrect)

Chromium browsers (Chrome, Edge, etc.) support it. Firefox's support is behind a browser feature flag (browser.send_pings) and Safari... Safari is incorrectly labelled as not supporting.

This incorrect information is where the mentioned pull request updating the Safari support information comes into play. The table will be reasonably green with the next release of the MDN compatibility data!

Why's no one using ping?

I'm a big fan of native HTML solutions. The question is why no one uses the ping attribute (or do you know a site that uses it?)?

I can only speculate here, but one reason could be that user analytics are mainly driven by 3rd party providers such as Google Analytics.

To use these as a web developer, all you have to do is embed a single script into your site. The JavaScript will track all the user behaviour, and there's no infrastructure to set up. It just works.

If you base your tracking on the ping attribute, then you have to adjust all the links on your site. This process includes more maintenance and development work. That's a strong argument against using the ping attribute.

Nevertheless, it's good to know that it exists. If you use ping, I'd love to learn more about what you do with it!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2021-03-19T23:00:00+00:00) HTML defines a ping attribute on anchor elements (links) (#tilPost). Retrieved from https://www.scien.cx/2021/03/19/html-defines-a-ping-attribute-on-anchor-elements-links-tilpost/

MLA
" » HTML defines a ping attribute on anchor elements (links) (#tilPost)." Stefan Judis | Sciencx - Friday March 19, 2021, https://www.scien.cx/2021/03/19/html-defines-a-ping-attribute-on-anchor-elements-links-tilpost/
HARVARD
Stefan Judis | Sciencx Friday March 19, 2021 » HTML defines a ping attribute on anchor elements (links) (#tilPost)., viewed ,<https://www.scien.cx/2021/03/19/html-defines-a-ping-attribute-on-anchor-elements-links-tilpost/>
VANCOUVER
Stefan Judis | Sciencx - » HTML defines a ping attribute on anchor elements (links) (#tilPost). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/19/html-defines-a-ping-attribute-on-anchor-elements-links-tilpost/
CHICAGO
" » HTML defines a ping attribute on anchor elements (links) (#tilPost)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2021/03/19/html-defines-a-ping-attribute-on-anchor-elements-links-tilpost/
IEEE
" » HTML defines a ping attribute on anchor elements (links) (#tilPost)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/03/19/html-defines-a-ping-attribute-on-anchor-elements-links-tilpost/. [Accessed: ]
rf:citation
» HTML defines a ping attribute on anchor elements (links) (#tilPost) | Stefan Judis | Sciencx | https://www.scien.cx/2021/03/19/html-defines-a-ping-attribute-on-anchor-elements-links-tilpost/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.