Coding Tips & Tricks


Home>Analytics

Improved tracking with the <a ping> attribute - HTML5

As I sit down at my desk each working morning, the first thing I do is fire up the ever faithful feedly and read through the days' tech news with a cup of coffee. During my usual morning reading, I came across this interesting update from Ilya Grigorik on Google+.

Google use the <a ping> attribute to improve the performance of their mobile search. This is great news for developers that need to track clicks on certain hyperlinks. <a ping> is an HTML5 attribute that allows the click of a hyperlink to be tracked using an asynchronous call, meaning that the user sees one less redirect and a faster overall experience! In order to dive a little deeper into how this works under the hood - I created a simple web page with one hyperlink using the <a ping> attribute.

If we use the above code and take a look at the network traffic under the hood, we can see the ping attribute in action. I've created a simple web page that has a link that points to the ASP.NET website. It also has the ping attribute that makes a request to my website.

a ping attribute HTML5

If we look closer, we can also see HTTP headers that get sent through.

a ping attribute HTML5

This is a useful feature if you need your own custom tracking on your website. The <a ping> attribute is asynchronous and reduces the need for a redirect in certain tracking circumstances. It's also great if you aim to maintain the performance of your web pages. Support is limited at the moment, with only Chrome and Safari currently offering support for this feature. However, it would be great to see more browsers support this feature.








Comments

twitter.com/GMTGONI - 1/4/2014
Thanks a lot! this is very wonderful tip.


Add your comment

300 Characters left


Please fill this in to confirm that you are human