I want to measure the time spent by a user on web pages. It's doesn't include the time when a user navigates away from the browser.
I found few open source libraries like Timejs library which can measure the time spent by a user on a web page, but when a user is watching a Youtube video on the page, these libraries don't measure that time.
.
Is there a way to handle this case or any other library which handles this case?
Actually, these libraries fail to calculate the time spent by the user inside an iFrame.What is the best way to know when a user is active in an IFrame?
How does Google/AppNexus/Motomo calculate interaction time? Is there a common design/architecture that they follow?
PS: I am trying to integrate the library with my react App. If there exists any similar method to solve this problem in React. Please let me know in comments/answers.
Thanks in advance
HTML5 Page Visibility API is the answer of your question.
You need to just listen an event as per the browser and it will be triggered every time when user will jump to another tab.
Look to Page Visibility API
There is a good and security way to do it but you need webSocket implementation.
Make special socket client and server for this feature.
When you client is disconnected you can count that your user is not anymore on page. Implement timer's for time log on server part.
Page Visibility API look like solution for local calculation(unprotected). If you work with money or some kind of value's better use server for validation.
p.s.
If you have a buggy situation with timer ( on inactive tab ) then use HackerTimer library (combination with web workers).
Just start a timer when the user enters the page (lots of ways to do this) To pause and continue the timer, try using the onunload() and unload() events (they may not work exactly as you want it to, but it is the best thing I could find. Take a look at this to help you https://www.w3schools.com/jsref/event_onunload.aspHope this helps!
Related
I am trying to realize booking system on my site. I want to allow user to book terminal entity for 10 minutes. Entirely, flow is enough big and goes over several pages.
While user navigate on this flow he should see how many time he has to complete operation.
Please advice me how to realize cross page timer.
I think the most straightforward way would be to create a cookie or an item in the user's localStorage which contains the start time of the transaction. Upon loading the page, you check for the existence of this value and compare it to the current time, if it exists.
You can use setTimeout or setInterval to run timers in the browser. However, a browser window is not guaranteed to continue to execute when it is not active. If the user hides the browser or goes to another application, the application cannot be sure that the timer is still running.
There is a newer specification for threading called web workers, which may help to alleviate the setTimeout problem.
https://developer.mozilla.org/en-US/docs/Web/API/Worker
As an alternative, I would suggest to store the start time on the server and continuously check the current time against it with polling HTTP requests. Or maybe just check it before they submit.
Or as stated by #sholanozie, store it in a browser cookie and just keep checking that.
Some background, the environment I am working in is PHP on the server side and Javascript on the client side. To track a user session, I make a JS PUT request to a server every 5 seconds. Through this I get the amount of time they were on the site, scroll depth, click events, etc.
With tools such as MixPanel or Google Anaylytis, they have the same metrics being measured, yet there isn't constant js calls being made. So my question is how are they tracking the user without javascript?
Your question seems to be... "how does google analytics know how long a user spends on a site without sending constant updates"? Well, short answer is that it doesn't (but it can, read on...!)
In the simplest setup, it will create a session when the first page is opened. Then it will track the time until the second page is opened, then the third. But it doesn't know when the third page was closed, so the total time for the session will only be "time page 3 was opened" minus "time page 1 was opened". And that's what you'll see on the analytics page. This is how most analytics systems work and yes, it's innaccurate. But that's how it is.
HOWEVER! There is a way around this, and it's called an "engagement hit" - essentially just tracking when a user does something on your page, e.g. playing a video or clicking a banner. In fact, you can track all sorts of events with Google Analytics and this will all help towards accurately reporting time-spent. This will involve more JS calls being made than just the typical onload event, but they certainly will not be constant (unless you set up some crazy events).
There's some good information about this on the GA docs site. It might be worth having a look and trying to implement something similar.
I Want to make an app with ruby on rails and Jquery that will allow multiple users to have the same page open at the same time, and if any of them makes a change to the page, adds a post, or deletes a post it will show all other users that change without having to reload the page.
Here in stack-overflow, whenever another user comes and gives me a point or removes a point on the post, it will show me without having to refresh the page.
Same with the comments, if someone posts, I will see it without having to refresh.
Can anyone tell me here to get started with this?
I would rather not have to have the page reload every 30 seconds.
Any help would be appreciated.
Thank you in advance.
There are a few ways to go about this:
Websockets
Server Sent Events via ActionController::Live (Rails 4+)
Long Polling (outdated method at this point)
Between websockets and SSE I would go with the former. Higher browser compatibility and the more mature technology of the two. If you're willing to pay for convenience, check our Pusher (solid free tier). Otherwise you might want to check out something like Faye (good intro at http://railscasts.com/episodes/260-messaging-with-faye).
I have an html5/javascript application in which multiple users can be viewing the same set of data of any given time. For the sake of a real world example, lets say its a calendar type page.
So user1 is looking has the browser open and looking at the calendar page and user2 is also on the calendar page. User2 makes a change to the calendar and i'd like (as quickly as possible) for those changes the be recognized and refreshed on user1's screen. What is the best way to do this?
I'm thinking about have a mysql table for active users that stores the page they are currently on and a timestamp for its last update, then use ajax calls to ping the server every few seconds and check for an updated timestamp, if its newer than what they have client side, the new data gets sent and the page "reloaded." I am putting reloaded in quotes because the actual browser window will not be refreshed, but a function will be called via javascript that will reload the page. Sort of the way stack overflow performs its update checks, but instead of telling the user the page has changed and providing a button for reload, it should happen automatically. If user1 is working away on the calendar, it seems it might be quite annoying for user2's screen to constantly be refreshing...
Is this a horrible idea? Is pinging the server with an ajax request every few seconds going to cause major slow downs? Is there a better way to do this? I would like the views on either users side to be real time because its important that user1 not be able to update an element on the calendar page that user2 has already changed.
Update: based on some web sockets research it doesnt seem like a proper solution. First its not compatible with older browsers and i support ie8+ and second i dont need real time updstes for all users on the site. The site is an account based applicatiin and an account can have multiple users. The data needs to sync between those users only. Any other recommendations would be great.
You need realtime app for this. You should have a look at socketio. Everytime a user log in, you make him listen for changes on the server. Then when something changed on the server, every users listening are notified.
you can find examples on the official website : http://socket.io/
I'm starting to run a few ads on a website, and I'm trying to decide the best way to track performance.
Specifically,
What's the most efficient way to count clicks? About the only way I can think of is to link the ad to another page with the ID of the ad as an argument (e.g. adserver.aspx?id=1234). The other page would then update the database and do a redirect to the advertiser's link. However, it seems inefficient to have to load a separate page for this. Are there any other options?
Also, it seems like I might need to know stuff like how many clicks occurred in a given week. But storing a separate database row with a date for every single click seems excessive. Has anyone else done something like this? Would it make sense to maybe create a new row for each week and increment a counter for all clicks that occurred that week?
Any tips appreciated.
I would suggest that your first solution is the best option, in fact it is the design that most similar systems (OpenX, Google AdSense etc) employ. Additionally it helps you better managed your banners and prevents your site leaking search engine spiders.
As for performance that is just a question of having a good design, in a typical design the redirection script will be fairly lightweight so should process requests fairly quickly. It is worth mentioning that you could thread off the DB updates to reduce the redirect request response times.
There is of course another option:
Rather than homebrew your own banner serving scripts look into implementing OpenX instead, it is free and an extremely good piece of software. OpenX can be found here:
http://openx.org/
and here for the open source version you can run on your own server:
http://www.openx.org/publisher/open-source-ad-server
Another option would be to implement something like Google AdSense and save yourself the hassle of finding advertisers etc. Google also provides tools to allow you to sell banner space and then fallback to default AdSense banners if you have no active advertisers (OpenX will also do this and also support integrating AdSense (and other advertisers))
You can do it with JavaScript.
Opening the page:
Send the ad URL to the client
When the user clicks the ad, use JavaScript to open the URL. Or, simply use an anchor with target="_blank".
Logging the click:
Either way, hook a JavaScript function to the ad click event.
When the user clicks the ad, use AJAX to call a web service. The web service will then log the click.
This way the ad opens as soon as possible, then the browser asynchronously communicates with the server for logging.
The question is, what happens if the user clicks the ad, the page opens, then the web service call fails? If you would prefer, you could call the web service first, then and only if the call succeeds, open the ad. Probably not the best from the end user's perspective.
For you question #2: Storing each click gives you the most reporting flexibility later. If you are set on weekly reports, why not set up a weekly process that generates the reports you need, then cleans up the data? You could even skip cleaning up the data for now until space or speed becomes an issue.
Would it make sense to maybe create a new row for each week and increment a counter for all clicks that occurred that week? Probably not. Only one process can update the counter at a time, otherwise you'll lose data. The locking that has to occur to get the value then update it will probably significantly slow down.