Google Analytics is an excellent service to know users’ behavior on your site. We only have to copy and paste an snippet, and we can know a lot of things . But this service doesn’t tell us how fast/slow our pages are. Performance information is very important as we known.
So, how can we use google analytics as performance monitoring service?
I wrote a tiny script to use eventTrack function of Google Analytics API and track measures of performance. Using this script you can store and analyze the real performance time from your visitors.
Steps
1) Insert this script just after <head> tag
<script>
var _gameasures = [['start',(new Date()).getTime()]];
function addGAMearsure(mark){
_gameasures.push([mark,((new Date()).getTime()-_gameasures[0][1])]);
}
</script>
2) Insert this script just before </body> tag
<script>addMeasure("Perceived Ready Time");function sendGAMeasures(){addMeasure("load");if(_gaq)for(var a=_gameasures.length,b=encodeURI(window.location);a-- >1;)_gameasures.push(["_trackEvent","Performance",b,_gameasures[a][0],_gameasures[a][1]])}if(typeof window.onload=="function"){var prevOnload=window.onload;window.onload=function(){prevOnload();sendGAMeasures()}};</script>
Optional
if you want you can add measures where ever you want. Call addGAMearsure(‘my mark’) Ej:
........
</head>
<body>
<script> addMeasure('Perceived ResponceTime'); </script>
The complete code (feel free to comment):
// mark startTime
var _gameasures = [['start',(new Date()).getTime()]];
//
// Add measure
// @mark string
//
function addMeasure(mark){
_gameasures.push([mark,((new Date()).getTime()-_gameasures[0][1])]);
}
//
// add load event
//
function sendGAMeasures(){
//add final measure
addMeasure('load');
// if _qaq is defined means that google analytics is set ok
if(_gaq){
// set page name
// by default it get the page url, if you want you can change the value of pname
var len = _gameasures.length, pname = encodeURI(window.location);
// send all measures
while(len-- > 1){
_gaq.push(['_trackEvent', 'Performance', pname, _gameasures[len][0], _gameasures[len][1]]);
}
}
}
// set onload event checking if has been set previoully
if (typeof window.onload != 'function') {
_sendGAMeasures;
}else{
var prevOnload = window.onload;
window.onload = function(){
prevOnload();
sendGAMeasures();
};
}
I hope this script help you to monitoring the speed of your site 
Martin
2 Comments
An excellent example of the extensibility of the GA platform and the power within. Found via the comment you made to Joshua Bixby’s blog.
The minimized version of the code to be inserted before </body> is completely broken.
It doesn’t properly set window.onload if there is no existing window.onload and it called _gameasures.push() when it should call _gaq.push to actually add the tracking info.
Here’s what I am using
addMeasure("Load");function sendGAMeasures(){addMeasure("load");if(_gaq)for(var a=_gameasures.length,b=encodeURI(window.location);a-- >1;)_gaq.push(["_trackEvent","Performance",b,_gameasures[a][0],_gameasures[a][1]])}if(typeof window.onload=="function"){var prevOnload=window.onload;window.onload=function(){prevOnload();sendGAMeasures()};}else {window.onload = sendGAMeasures();}One Trackback
[...] (English Version) [...]