Простой счётчик для сайта на jquery
Возникла задача проследить, на какие ссылки кликает пользователь на сайте. С использованием jquery клиентский скрипт получился очень простым: вешаем событие на всю страницу, если кликнули по ссылке — отправляем аяксом все нужные параметры (ссылка, её координаты на странице, браузер и т.д.)
Чтобы сработало обычное действие ссылки (и события от других счётчиков), функция возвращает true, не дожидаясь успешного ответа от сервера.
//подключаем jquery
var vizit_start = Math.round(new Date().getTime() / 1000);
//запоминаем время захода на страницу (timestamp в секундах)
$('body').click(function(e) {
var a_click=e.target;
//a_click - объект, по которому кликнули
if($(a_click).is('a')) {
//если это ссылка, то отправляем данные
var a_pos=$(a_click).position();
//теперь переменная a_pos хранит координаты объекта
var vizit_sec = Math.round(new Date().getTime() / 1000) - vizit_start;
//время визита = разница во времени
$.ajax({
//отправка данных аяксом
url:"http://site.ru/sledilka.php",
//куда отправляем данные
type:"POST",
//методом POST
data:{
page:location.href,
//адрес текущей страницы
width:$("html").width(),
//ширина страницы (контента)
height:$("html").height(),
//высота страницы (контента)
left:a_pos.left,
//координата ссылки X
top:a_pos.top,
//координата ссылки Y
url:$(a_click).attr('href'),
//куда ведёт ссылка
txt:$(a_click).text(),
//текст ссылки
browser:navigator.userAgent,
//инфа о браузере и ОС
vizit:vizit_sec
//время визита в секундах
},
dataType: "text"
//данные представлены как текст
});
}
return true;
});
Серверная часть принимает данные POST-ом (например, время визита: $_POST["vizit"]) и записывает в базу. Визуализация этих данных выходит за рамки этой заметки. Например, можно нарисовать карту кликов, как в Яндекс.Метрике. Но даже по текстовым таблицам уже можно сделать выводы.
