How I do monitor all the clicks and inputs on my page? I would ideally want to make a video of what the user does on my app; the way they uses my app.
How do I go about this?
Any links or demos would be really great.
Edit : What I have in mind is:
log all the events into a cookie , and send it to the server in frequent intervals.
then startup a Firefox session and trigger these events on the page . and capture it as a video.
Edit: Basically I have an app, and I want to see what the user does on the app, so I will monitor their clicks and inputs (that's pretty much what they do on the click), and then trigger those events back on my web app. So I will pretty be able to replicate their actions on my page. Now the question is, how do I capture all the necessary events, how do I serialize and trigger these events for later?
Not sure that you can make a 'video' unless you tracked every single movement of the mouse, which would extremely unfriendly, probably take a lot of processing time and raise ethical questions.
If you want to know how a user interacts with your site so that you can improve it (presumably) then you need to get into web analytics.
There are many options. My personal favourite is Google Analytics
With JavaScript you can create what's known as a heatmap of use clicks:
http://tympanus.net/codrops/2010/02/08/a-jquery-heat-map/
You can't capture a video of the users desktop session using JavaScript.
I remember seeing ClickHeat (or a similar variant) a long time ago. Had no experience with it, so I can't help with pros and cons, and it doesn't answer your question entirely (don't think it does keystrokes, although maybe I'm wrong, like I said I don't really know).
Might not be a total solution, but should be a good starting point.
In a similar vein it wouldn't be hard to capture mouse position every so often along with a timestamp and recreate a given user's actions. Generating a general/average movement is much more difficult with this type of data, but it's useful on the single-unit basis. So too with keystrokes, they're all just events.
Related
so I want to create cross-platform app that will be invisible overlay over whole screen. When user interacts with whatever is under, I want to catch the event (mouse location, mouse click etc) so I can have info of what user attempted and where, and then "pass" the event through. Also, I might wanna display something in overlay as result of the event.
Coming from .NET, I understand how I would hook into mouse events. I also understand that it is possible to simulate user clicks with Mouse class in .NET Core. However I was wondering if this is possible with electron, as I was checking it for cross-platform solution.
I checked some topics (like this click-through discussion) that mostly deal with passing events through overlay, but I am not sure those do this catching-then-passing. So is there something like that and is it actually possible with only electron/nodeJS? Or would I have to use additional libs, and would they be different for Win/Linux/Mac?
I checked at:
Overlay Electron and
electron-overlay-window
but both seem complicated with attaching to game and following the window respectively. I was hoping it is possible and simple somehow.
IMHO, it's is possible, but will require a ton of OS-specific code and possibly some native modules.
I suggest to start with https://www.electronjs.org/docs/api/browser-window#wingetnativewindowhandle and https://www.electronjs.org/docs/api/browser-window#winsetignoremouseeventsignore-options
This isn't platform / or language specific really, I'm just asking for some general advice on how to approach what I want to do and what would be the best technologies to utilize.
I want to implement something similar to the way Periscope displays it's likes. Check this CSS / jQuery rework if you're not sure what I mean.
The Set Up :
Basic social network site, built with PHP, where every user has a profile.
What Happens :
User Foo triggers an event on the profile page of user Bar (specific to Bar's page), let's say a "like" for example.
The Goal :
I want that event to trigger a jQuery animation, simple enough to do, and User Foo will certainly see it. But what I want to do is make that event trigger on User Bar's profile page, in real-time for whoever happens to be looking at Bar's profile at the time. So the event Foo triggered will render globally in every other users browser - but only if they are looking at User Bar's profile when it is triggered.
I know this could be achieved with a constant stream of timed Ajax requests looking for any events, but is there a better less resource intensive way of approaching this?
I've recently started playing around with Vue.js and Laravel, and it seems like the broadcast channels could possibly be used for this purpose, but is there anything similar in jQuery that could be used.
Or would you suggest that the jQuery / Ajax approach is the best way to go?
It doesn't have to be jQuery or Vue based, any suggestions welcome if you think there is a better way of doing it, as this is really what I'm asking for, but would rather build this from the ground up and not use a plug-in.
Real-time updates are discussed here: How do real time updates work?
I didn't have the heart to close as duplicate after such an eloquent and well written question :)
So I have been making stuff in Unity3D and decided to try an extension called Playmaker. Basically is uses a FSM (Finite State Machine) to design the flow of states and events. You can drag an event to a different state to trigger another state of events, etc. (Reference : http://www.hutonggames.com/features.html)
NOTE : The actual product I linked has nothing to do with the idea I want to try and build. Just a reference.
Well I would love to be able to do something simliar in Javascript. I think I have some of the logic down but I'm thinking more about User Experience. I want a user to be able to create an FSM with my logic in the browser using Javascript.
I'm not asking for anyone to code this for me or anything as I am experienced enough in javascript to do the bulk of it. I was thinking more about the way you can drag one event to another and it creates a visual arrow showing the user what events are connected. If you look at the first tutorial on the referenced link I provided you will understand what I mean. The arrow length and curves would be dynamic. Possibly be able to drag around states to re organize the layout of the states. This would obviously change the way the arrows pointed as well.
I hope that all made sense.
Ideas? Pointers? Maybe someone has done something like this already? I did find one Javascript State Machine but it generates once, doesn't allow users to move anything, the event dragging to another state is very important.
I am writing a chrome extension that records your actions like ( mouse click, keyboard keyup ). The idea of the extension is to help me and my colleagues to reduce the boring testing of our web based project. I made it to record the events and store it on the dev server as mysql so i can use or share to them. But the problem is replaying the saved actions.
So how if there is a way to force mouse move, mouse click events. Can it be done from flash,java or something like that.
PS. The project is Extjs but i want to make the extension useful for developer using other frameworks and publish it.
Consider using Selenium for this. It has support for many languages, and you can script your whole test with it. You can for example set it to click on an element, wait for something to happen or fill text boxes.
Imagine some random website controlling your mouse ... not cool, is it? (That's why you cant force mousemove via javascript)
However, you can trigger clicks on elements. To achieve that, you need to save the event(mouse-over|out/(dbl)click/whatever) and the according element (in the eventfunction: this). That should be sufficient to simulate theworkflow.
jQuery-Example:
$('#item').click();
$('#item').trigger('click');
vanilla javascript:
document.querySelector("#item").click();
I want to make a web page with several type of forms,each one on a different area that allows those areas to be rearranged and user will be able to change their position according to their preference.(X form to the left top, Y form to the right bottom etc.) i don't know what that type of windows are called, but think you can get a idea what I'm mentioning here.only thing i know is it can be achieved with javascript, i searched for it but i can't find the relevant tutorial or guide to self study.
some one please tell me what they are, and how to make them and include in my web page? is there any thing that ease of making those thing except javascript?please provide me a source of studying and i really appreciate the instructions of the knowledged people.thanks in advance!
regards,
rangana.
The nutshell version is that you wait for a mousedown event, store information about where the click started and where the element started, wait for a mousemove event and change those positions, then wait for a mouseup event to clean up afterwards.
Usually, this is best achieved by just using a library such as YUI or jQuery UI