How to capture user interaction with a website?

Question

How can I capture user interaction on a website? How many links a user has clicked. From where user has come. I want to create my own logic. I don't want to use any statistics tool. How can I accomplish this?

Thanks in advance

Answer 1

Place where user come from you can get by referer (document.referrer).
And if you have some kind of session or mark user(by cookies), than you can check what links are clicked by capturing onclick event. But do not put onclick on every link, just use event capturing technique. In jQuery this will be:

$('a') 
    .livequery('click', function(event) { 
        alert('clicked'); 
        return false; 
    }); 

If you want to capture what link was clicked when goes away - you should place onunload event which will send data about clicked link to your server.

Answer 2

There are 2 ways that I know of:

1. make a service, and call it using a GET method on each event you want to track.
   this is something like this:

    service.php?event=pageview&time=127862936&userId=70&registered=true

   this way your service can work with the data.

2. second way that I know of, which I myself use, is calling to some dummy Image on my server, chaining GET query to it, and then analyze the request to the image at the server side. each request is anylized and logged, then I build reports.

again, you need to know what events you want to grab, they are pre-defined, and need to catch and send them as they happen. you client can put a 1-script js file, but this script need to add events listeners. lets say you want to know when the use has quit the page. add an event listener to the onbeforeunload event, like this:

window.onbeforeunload = function(){
   sendStats({event:'onbeforeunload'});
}

then sendStats function breaks down the JSON and builds a query to be sent to server like this:

function sendStats(statsJSON){
    var url = [];
    for (var key in statsJSON) {
        // make sure that the key is an actual property of an object, and doesn't come from the prototype
        if( statsJSON.hasOwnProperty(key) ){  
            var sign = (!url[0]) ? '?' : '&';
            url.push(sign);
            url.push(key + '=');
            url.push( encodeURI(statsJSON[key]) );
        }
    }
    var time = new Date().getTime();
    url.push('&time=');
    url.push(time);

    var stat = new Image();
    stat.src = clientHost + 'stats.gif' + url.join('');
}

Answer 3

Start with web server log files, dig into it's format, try some simple stats. Then you may want to read through the code of statistic tools like awstats to enhance your vision on that.

Answer 4

I am a asp .net developer. But i think this technique will work all the time. If you want to find out from where user has come to your site, you can user some sort of tracking querystring variable www.mysite.com?IMFrom=something. So you when you post your link on some third party website for eg say Google. Post link as www.mysite.com?google=traficfromgoogle. You might have trafic comming from different otherwebsite. Have different querystring variable for each. You can also use some kind of unique id for all website which is sending trafic to you. Now create the tracking function which will track this querystring variable. Use this function where it will get called during each request. And you can now put some customized logic for each request having such querystring.

Answer 5

I don't think you'll need to capture this, as it is most likely already captured in web server logs by the web server itself. You just need to find the software that can analyze the logs and give you some nice metrics. There's lots of packages out there for that.

Answer 6

I know its not creating your own logic but if you decide you don't want to parse your server logs you could try a new service that is trying to one up google analytics: http://mixpanel.com/ . It's real time analysis and they have a free limited account so you can try it before you upgrade.

I haven't tried their api to get stuff out yet but I imagine that you could let them collect the data from your site and do some fun stuff with it after you get it back out.

Answer 7

Use Google analytics and hook up site elements using their API.

Answer 8

record and replay the web https://www.rrweb.io/

This can be useful for: - recording user interaction/events in the browser - sending recordings to your backend only when an error