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
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.
There are 2 ways that I know of:
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®istered=true
this way your service can work with the data.
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('');
}
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.
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 e.g. 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.
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.
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.
Use Google analytics and hook up site elements using their API.
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
Related
I am using socket.io to create a party game similar to cards against humanity. I am just wondering how I can keep the players name and score etc without having to send all the data to a new page when new games begin. I was thinking to just change the body of the html but stay on the same page so the javascript doesnt reset and I can still access all the players information.
I came across using document.write() however this appears to only accept a string parameter. Is there a way to do something like this document.write(game.html).
Any ideas on how to go about this, maybe a better way to pass information between javascript files without having to post the data each time a new page is loaded? I have tried sending the data with post however it makes it far more difficult to keep everything consistent.
P.S This is the first time I have properly made anything with node.js, socket.io, javascript etc. So I could be asking a stupid question.
Once you get socket.io data from an event listener, you can use querySelector() or any other DOM manipulation method to show the data in the DOM. Something like this?
HTML
<div id="panel"></div>
JS
const socket = io("ws://localhost:3000" )
const panel = document.querySelector("#panel")
// receive a message from the server
socket.on( "hello", (arg) => {
panel.innerText = arg
});
I've just recently discovered slack.com and I fell in love with the way they handle their interface. If you've never used it before it's quite easy:
There is a side navbar and an main container on the right. Everytime you click an item in the side navbar it's content is loaded in the container. The focused item changes, the container's content changes, but the page doesn't reload.
If the data changes in the meantime it is magically updated.
What would it take to achieve something like that?
URL changing, page not reloading
Content always up to date
I've been looking at meteorjs in the past few days but the url part is never mentionned.
Yes. Slack is awesome. We (My team) use it everyday. I use it so regularly, at some point I don't check email but I check slack.
So, up to your question.
URL changing, page not reloading
It can be easily done by javascript [ Tl;dr ]
Code:
window.history.pushState("object or string", "Title", "/new-url");
Content always up to date
Well this can be done in two way,
i. via Ajax and Javascript
ii. via socket
i. via Ajax and Javascript:
in javascript you can make setTimeout function to fire ajax request in some duration. via Ajax it will get newest message from backend and it will be shown.
ii. via socket:
in socket, in your case if you use node.js there is a very popular library named socket.io which will get and update message in real time.
Good luck!
You need Ajax. You can use it in conjunction with a script, probably PHP that checks the state of the databse over a timer interval (a "heartbeat") and if anything has changed you load in the new data. I'd recommend having a specific column for a datetimestamp to compare with to make the smallest possible load on your database from this as a lot of users being on the page at the same time will make a lot of requests.
For the "url changing feature but no reload", I think #Kavan Pancholi answered your question. Another way to achieve that is by using the yield templates feature of iron-router.
You are using meteor, it means that you can do it without too much trouble (forget about Ajax & Sockets).
I don't know Slack (but I'll definitely have a look at it) but from what I understand, all data is preloaded/lazy loaded and they only change the displayed elements. In other terms, you keep ready and loaded all your client subscriptions or you bring them up when your yield template is loaded.
I will have a look at Slack and edit this if I realize I did not understood correctly what you are aiming for.
Edit Ok I tried it. You need to use yield templates with iron-router and they also added some transitions effect you can achieve with _uihooks + a loading template
On top of that, if you use a framework like angular, you'll notice urls like this:
http://localhost:3000/#/chat/room
You've probably seen similar with wikipedia in having urls like this:
https://en.wikipedia.org/wiki/Cat#Cats_and_humans
That little # won't reload the page on the url, so you can use that to make a url routing action without changing the page. You can access it with window.location.hash. So on the wikipedia article, you'd get
> window.location.hash
#Cats_and_humans
Combine that with ajax and event listeners and you can do something similar.
// using jquery
// set a callback when the hash changes
$(window).on('hashchange', function (e) {
e.preventDefault();
var hash = window.location.hash;
// get your container where you want to add data and clear it out
var $container = $('#container');
$container.html('<ul></ul>');
if (hash === '#/movies') {
// request json from an endpoint, and with the data, append it to the dom
$.getJSON('/api/movies', function (data) {
data.each(function (el) {
$container.append('<li>' + el.name + '</li>');
});
});
}
});
I'm having a hard time figuring out the solution to a problem that I thought would be very common or straight-forward to solve, but apparently I was wrong.
I have to re-write some web code (that I didn't write) that's causing a problem. When a user clicks a link, a request is sent to the web server, which in turn fetches or creates a PDF document from somewhere. The PDF data is returned with the Content-Disposition header set to attachment, and the browser shows the save-as dialog.
The reason the save-as dialog appears is because when the user clicks the link, the Javascript sets window.location.href to the server URL (with some parameters).
There's no loading animation other than the one the browser shows in the tab etc. while the request is being processed.
The problem is that if a request hangs or takes a while, users tend to click the link again (possibly multiple times) which means requests for that same resource just keep building up on the server (even accidental double clicks on a link, which are common, cause two requests to be processed).
How can I prevent this from happening? If I do something like this (with window.location.href replaced by window.open:
var REQUEST_PENDING = false;
function getPDF(param1, param2) {
if (REQUEST_PENDING) return;
REQUEST_PENDING = true;
var w = window.open("/GetPdf.servlet?param1="+param1+"¶m2="+param2);
w.onload = function() {
DOC_REQUEST_PENDING = false;
}
}
...then only one request will be processed at any one time, but the onload callback only works if the return content is HTML. When it's an attachment, which is what I have, the DOC_REQUEST_PENDING variable is never set back to false, so no further requests can be made.
I know that the ultimate solution should probably be implemented server-side, but is it not possible to achieve what I'm trying to do client-side? (I can use jQuery).
The question linked to in the comments above by #Cory does seem to be a duplicate of my question, and while I'm sure the accepted answer is perfectly fine, there is a bit involved in it. There's another answer for that question down the list somewhat that provides a link to this jquery plugin:
http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/
...and for me anyway, this is the ultimate solution. Easy to use and works great.
How to add cookie on click in java script? On click I am calling linkedin authentication page..once authenticated I want to return back to the page where I called authentication. I want to store continue url in cookie and pass it..can anyone suggest?
Unless you want to track which pages a user logs in from, I'd suggest using sessionStorage instead of a Cookie. sessionStorage has the added benifit of clearing when the browser is closed, so it is less likely you'll get items left over from previous times you were on the website. To navigate or get the current URL, use window.location.
Say you have your log in link
<a id="foo" href="some_link_that_sends_you_to_login">click</a>
Then you could add an event listener to it such as
document.getElementById('foo').addEventListener(
'click',
function () {
sessionStorage.setItem('last_seen_url', window.location.href);
}
);
Next, on your return page you can get this information back with
var goToURL = sessionStorage.getItem('last_seen_url') || '/';
sessionStorage.removeItem('last_seen_url'); // always clean up after yourself
window.location.href = goToURL;
It would be similar with cookies, using the document.cookie, but JavaScript does not provide a good native interface for this. You'll need to implement something yourself, such as the example on MDN. Remember that all cookie data gets sent to the server with every page request, so you'll be generating more overhead for each thing stored as a cookie.
What is the best way to share data between open tabs in a browser?
For a more modern solution check out https://stackoverflow.com/a/12514384/270274
Quote:
I'm sticking to the shared local data solution mentioned in the question using localStorage. It seems to be the best solution in terms of reliability, efficiency, and browser compatibility.
localStorage is implemented in all modern browsers.
The storage event fires when other tabs makes changes to localStorage. This is quite handy for communication purposes.
Reference:
http://dev.w3.org/html5/webstorage/
http://dev.w3.org/html5/webstorage/#the-storage-event
If the first tab opens the second tab automagically, you can do something like this:
First tab:
//open the first tab
var child_window = window.open( ...params... );
Second tab:
// get reference to first tab
var parent_window = window.opener;
Then, you can call functions and do all sorts of stuff between tabs:
// copy var from child window
var var_from_child = child_window.some_var;
// call function in child window
child_window.do_something( 'with', 'these', 'params' )
// copy var from parent window
var var_from_parent = parent_window.some_var;
// call function in child window
parent_window.do_something( 'with', 'these', 'params' )
The BroadcastChannel standard allows doing this. see MDN BroadcastChannel
// Connection to a broadcast channel
const bc = new BroadcastChannel('test_channel');
// Example of sending of a very simple message
bc.postMessage('This is a test message.');
// A handler that only logs the event to the console:
bc.onmessage = function (ev) { console.log(ev); }
// Disconnect the channel
bc.close();
See also another StackOverflow thread: Javascript communication between browser tabs/windows.
In my opinion there are two good methods. One may suit you better depending on what you need.
If any of these are true...
you can't store information server side,
you can't make many http requests,
you want to store only a little bit of information[1],
you want to be pure javascript / client side,
you only need it to work between tabs/windows in the same browser.
-> Then use cookies (setCookie for sending, getCookie/setTimeout for receiving).
A good library that does this is http://theprivateland.com/bncconnector/index.htm
If any of these are true...
you want to store information server side
you want to store a lot of information or store it in a related matter (i.e. tables or multi-dimensional arrays[2])
you also need it to across different browsers (not just between tabs/windows in the same browser) or even different computers/users.
-> Then use Comet (long-held HTTP request allows a web server to basically push data to a browser) for receiving data. And short POST requests to send data.
Etherpad and Facebook Chat currently use the Comet technique.
[1] When using localStorage more data can be stored obviously, but since you'd fallback on cookies one can't rely on this yet. Unless you application is for modern browsers only in which case this is just fine.
[2] Complicated data can be stored in cookies as well (JSON encoded), but this is not very clean (and needs fallback methods for browsers without JSON.stringify/JSON.parse) and can fail in scenarios involving concurrency. It's not possible to update one property of a JSON cookie value. You have to parse it, change one property and overwrite the value. This means another edit could be undone theoretically. Again, when using localStorage this is less of a problem.
The only way I can think of: constant ajax communication with the server to report any user action on the other tabs.
How about to use a cookie to store data in one tab and poll it in another tab?
i dont know yet if a cookie is shared between tabs but just an idea now ...
I just took a look at how Facebook Chat does it and they keep a request to the server open for a little less then a minute. If data comes back to the server, the server then sends back the message to each open request. If no data comes back in a minute, it re-requests and continues to do this (for how long, I am not sure).
Given that these tabs are open with the same site in them, you might consider building an ajax script that reports user actions to server and couple it with another ajax script that reads that reports and reflects them in current window.
You could use AJAX (as everyone else is suggesting) or cookies if the data is small. See http://www.quirksmode.org/js/cookies.html for fun with cookies.
One way to do this is to not let the chat window be dependent on the tabs. Load the tabs as seperate AJAX components that when reloads doesn't affect the chat component.
Depending on the requirements you can also use cookies/sessions. However, this means the data will only be accessible on the first page load of each tab.
If you already have two tabs open, changing something in one will not change the other unless you use some AJAX.
This can be done using BroadcastChannel API in javascript. Let's say you have opened two different pages in a different tab and want to update the first page when the user changes some values in the second page you can do that like below.
First page
const ticketUpdateChannel = new BroadcastChannel('ticketUpdate');
ticketUpdateChannel.onmessage = function(e) {
console.log('ticket updated')
};
Second page
const ticketUpdateChannel = new BroadcastChannel('ticketUpdate');
ticketUpdateChannel.postMessage();
Now when you can postMessage it will trigger the onmessage on the first page.
Also, you can pass data like the below.
const ticketUpdateChannel = new BroadcastChannel('ticketUpdate');
ticketUpdateChannel.postMessage({message:'Updated'});
const ticketUpdateChannel = new BroadcastChannel('ticketUpdate');
ticketUpdateChannel.onmessage = function(e) {
console.log('ticket updated',e.data)
};