Collecting browser statistics data

For those who would like to tinker with collecting user-agent data I share my code to read the technical information from the visitor’s browsers. That data is very helpful in creating user-friendly, optimal websites, websites that look good and deliver important content on all the modern devices. I urge you to add this code (or an improved one) on your website and share the results in the comments below.

You can see the results of a research, I’ve done on one of the websites I am developing, in my earlier blog post A bunch of fresh user device statistics.

Collecting this kind of data from different websites might also be useful in marketing as it will help to get an idea about visitor’s preferences in various industries.

The whole code is very simple: consists of 2 tiny scripts and one MySQL database table. It runs asynchronously to the website and uses a separate database so shouldn’t have any impact on speed.

Storage for the data

Create a new MySQL database and then paste the code below in the SQL field and click Go. That should create a table with 8 columns.

CREATE TABLE IF NOT EXISTS `hitdata` (
`index` mediumint(9) NOT NULL AUTO_INCREMENT,
`time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`address_ip` text CHARACTER SET ascii NOT NULL,
`client` text CHARACTER SET ascii NOT NULL,
`width` smallint(6) NOT NULL,
`height` smallint(6) NOT NULL,
`resolution` float NOT NULL,
`wp_post_id` bigint(20) NOT NULL,
KEY `index` (`index`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=39612 ;

In my research I haven’t made much use of the ‘time’, ‘wp_post_id’ and ‘adress_ip’ (apart from filtering my own visits) columns yet, but I may do in the future in order to get more detailed stats about visitors with particular devices staying longer on the website etc.

Storing the data

Below is my php script to store the collected data in previously created database.
(I am not sure if this is completely bug-free as I accidentally deleted the latest, tested version)


Collecting the data

Copy the code below and paste it within the of the page that you would like to collect the data from.

function ajaxFunction(){
var ajaxRequest;

try{ ajaxRequest = new XMLHttpRequest();
}catch (e){ try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){ return false; }
}
}

var queryString = "?";
queryString += "w=" + Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
queryString += "&h=" + Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
queryString += "&r=" + window.devicePixelRatio;
queryString += "&c=" + navigator.userAgent;
queryString += "&p=";

ajaxRequest.open("GET", "/dbquery.php" + queryString, true);
ajaxRequest.send(null);

}
window.onload = function(){ ajaxFunction(); }

Known issues

Some devices do not return a correct from data from window.devicePixelRatio.
On a frequently visited websites the stats database might quickly grow very large. As we do not need to collect the data from periods longer than couple of weeks/months maximum I might add a script that deletes the oldest entries.

Summary

Collecting a raw data is quite easy, making a sense of it is not. Luckily there are brilliant Google Charts that do half of the hard work for us – data visualisation.

In the next episode I am going to share the code I used to display most important information collected in created earlier database. You can view the results of my research in my earlier post.