Webvizor своими руками

Задача: сбор статистики о том, что делает пользователь

В первом варианте будем собирать данные о том, как, сколько и где в окне браузера пользователь водил мышкой. На сайте используется JQuery поэтому на его основе пишем следующий простой код


var mouse_pos = []
var  current_pos = ''
setInterval(function(){ mouse_pos.push(current_pos)  }, 2000 )
jQuery(document).ready(function(){
	   $(document).mousemove(function(e){
		    current_pos =  e.pageX +','+ e.pageY;
	    }); 
 
 
	$(window).unload(function(){
		saveLog()
	}) 
 
	setInterval(function(){
		saveLog()
		},10000)
 
})
 
function saveLog(){
$.get('/stats/', {l: JSON.stringify(mouse_pos)}, function(){ 
			mouse_pos = []; 
			 }
		)	
}


Код выполняет сбор координат мыши каждые две секунды и раз в 10 секунд посылает их на сервер. что бы не потерять данные между интервалами в момент закрытия окна или перехода по ссылки вешаем сброс данных на событие unload для для объекта $(window).

Запросы с данными координат мы скидываем на адрес домeна /stats/. В качестве фронтенда мы используем nginx как быстрый и легкий сервер умеющий проксировать запросы.
Что бы меньше грузить сервер запросами решено запросы логировать, а уже потом обрабатывать периодически скриптом. Для этого настраиваем обработку всех урлов начинающихся с /stats/ nginx добавляем в конфиг nginx


 location /stats/ { 
       set  $id  'nocookie'; 
        if ($http_cookie ~* "agentid=([^;]+)(?:;|$)" ) { 
          set  $id  $1; 
        } 
 
     log_format  stats  '$host $id [$time_local] "$request"  "$http_referer"';  
     access_log logs/stats.log stats; 
     return 200; 
}   




В результате все запросы попадают в лог по заданному формату и в ответ получают статус 200 < /p>

ЗЫ Вот таким не хитрым и кустарным способом мы начали сбор статистики о движение мыши пользователя. Следующая задача отобразить визуально собранные данные. Попробуем решить ее в следующей заметке

Вам может понравиться