Statistics gathering in Rails 3.1 (Analytics) - javascript

I am building an analytics system for my rails application and I want to monitor every time I pull a certain object from the database, and I'd like to put the in the model file. I have objects that are being displayed on the page and I need to see the amount of views and clicks that they get. I assume the views can be handled by just figuring out when the object is pulled from the database (if someone could tell me how to do that) and I figured javascript to monitor the clicks. Would you all agree with this? Or is there a better way. I am using Rails 3.1 with MongoMapper and MongoDB

To store the data simply send an ajax request from the browser with the information you want to store in a POST request to a rails resource like :click#create. Be sure to include the relevant data attributes within the request.
You may want to collect the requests and then send them all in a batch based on time or a use clicking a "done" button or something of that sort.
Recording the fact that someone clicked (from javascript) is different than recording when an object is retrieved from the database. You could write a before filter for each of the methods in the class or possibly implement an active record callback for something of that sort.

Related

Building a javascript web analytics tool from scratch

I am fairly new to javascript, I do know basics. I am looking to build my own (from scratch) java script library just like google analytics.js that will track user behavior on websites. Basically I'm looking to collect data like
Click through data
Dwell time
Page hits etc..
I spent lot of time trying to find website/tutorials to get me started on this but I keep ending up on google analytics.js or some private tools.
What I am looking for :
Is there any good starting point/resource/website which can help me build this js library
Are there reference for archetecture of end to end system including back-end?
Any open-source library that I can directly use?
Some things I already looked into
Chaoming build your own analytics tool
Splunk BYO analytics
At it's most basic, the architecture of such an application would only require a client, server, and database.
You can use basic javascript functions to record specific user actions on the frontend and then push them to your server. To identify your users you can set a cookie with a unique id. Then, everytime you send data to your server, you will get the specific user request as well so you can keep track of their actions. (Be careful of privacy laws first though).
For page hits, simply send a response to the server everytime someone opens your site - so call this function as soon as your Javascript loads. On the server, send a request to increment the appropriate value in your database.
For user dwell time, write a function that records the date when the user first hits your site and then count how long they stay there. Push your data to the server every so often and save updates to the user record by adding the new time spent to the current time spent. You could also watch for when a user is about to exit out of the site and then send the data all at once that way - although this method is more fragile.
For clicks and hovers, set up onclick and mouseover event handlers on your links or whatever elements you want to track. Then push the url of the link they clicked or whatever data you want - like "Clicked navbar after 200 seconds on site and after hovering over logo`.
If you want suggestions on specific technologies, then I suggest Node.js for your server side code and MongoDB for your database. There are many tutorials out there on how to use these technologies together. Look up javascript events for a list of the different things you can watch for on the frontend.
These are the building blocks you need. Now you just have to work on defining the data you want and using these technologies to get it.

Better performance between frontend JS and backend JS

I am a frontend guy, but I am working on a project in which I need to process lots of data in my nodeJS backend (my front is reactJS).
But once the data that needed to be processed in the backend is processed, I have the choice of either reprocessing this data in node or in react (knowing that in the end, I need this data in frontend).
Example: An array of links has been created in my backend, but I need to extract a single link from this array, in order to display it in React. I have the choice, pass the array to react and process the data there, or do it directly in node.
Is there a common fashion to fix this dilemma? What should I take into account to make a decision?
It's not good to send excessive information from your backend to your frontend. If you're going to send data to your frontend from your back-end and a lot of it isn't going to be used, then it's probably best to adjust your backend so that it only returns information that's going to be actually used by your frontend.
Alternatively, if your frontend isn't going to use all the the information sent by your backend right away, but potentially might use it later (based on user input), then it's better to send all the data from your backend and process it on the front end as needed to avoid making future requests to your backend.
Taking an array of links as an example:
If the user requests to see a link based on certain criteria, and that's the only link that they are going to see (based on the design of your application), then your backend should process that request and return only the link that your user wants to see to be displayed on the front end.
If the user can request to see a link, but could potentially request to see another link later, then your backend should send a full array of links that might need to be displayed at some point. Then your frontend can display the links at the appropriate time without having to make a request to your backend each time the user wants to see a new link.
In my opinion, if the logic doesn’t need to be done by the browser, then do it on the server. It will help you with reducing the size of your app in the long run. You want your final, bundled .js file to be as small as possible. That’s just one small step you can take to contribute to that.
The short answer is that it all depends on your business logic. Regarding how best to handle an array of items to be sent from backend to front-end, if a user will only ever need to see this one item, for example, then by all means, have the backend parse the array of data on its end and send that single item to the client front-end. If, on the other hand, you anticipate that you'll need to work with an array of items to be presented to the user at some point in the app, it would be reasonable to simply have the backend send the array of items. Furthermore, that array of items could be, for instance, a filtered version of the items that would be relevant to this particular user.

Save current page view for sharing

Say I have a java/spring/jsf/jsp web application. User fills all required fields, chooses all the options, clicks generate report, spring beans do their job, database is queried for information, and user is directed to a "report" page generated according to entered information. I am looking for a way to save that page to be accessed later by link - kind of a share current page link. One example of this might be jsfiddle.net where you can enter information, save it and get a shareable link.
What i thought of, having my current knowledge, is saving some kind of url extension hash along with currently displayed page properties to database and query database for that information when someone accesses www.websiteUrl.com/extensionHash but making a query everytime someone accesses the extension seems kind of heavy on performance. Another way could be saving whole html page or just the content part on the server and serve later on request.
What is the most simple/productive way of doing this?
This is one option instead of link :
What you can do is you can load the required data for that report from database when your application starts, put the data in Application Context ( ServletContext in Java ) and whenever you want to get the information, instead of making a database call, you get that from Application Context.( so basically its like you are loading from cache) this way your perfomance is improved.
in java, You can achieve that by implementing a listner class.
Downvoters : please specify the reason.

Collecting data from how visitors interact (client-side) with a javascripted form

I'm doing educational research about how students use a web quiz as a study tool. I've set up a web quiz that shows photos of plants and asks students to type in the correct scientific name.
http://www.plantsciences.ucdavis.edu/courses/enh6/quiz/quiz_sn.html
Using something like Google Analytics I can see the number of photos students look at (because each new photo involves a request from the server). But I'd also like to know how many times students type in a correct answer and how many times they type in a wrong answer. The form is all checked client-side using javascript, so giving a right or wrong answer doesn't start any communication with the server.
Is there a way to collect this data using cookies or something? Or can I have the form request a certain single-pixel gif with each right or wrong answer, so the server can record what's happening? Or do I need to reprogram everything and have the form get processed on the server to collect this data?
If you only want to record correct/incorrect answers, the simplest thing to do from what you've already got would be to expose an API on your server where you can send the information you want to store. Then, you can make an AJAX request to it after receiving an answer and your client side application will be nicely decoupled from the server side storage.
At this stage though, your application won't know if an error occurs on the server side of things. This may be what you want to happen if such errors shouldn't affect your application's primary behavior, but you may wish to respond with a success/error (most likely using JSON) to allow your application to react accordingly.

Backbone.js and CakePHP

I'm interested in implementing Backbone.js for some of the more repetitive in-page CRUD structures in our application (which is built on the CakePHP framework). I've been trying to get a hold on Backbone while figuring out how it would work in conjunction with Cake, and I"m a bit lost when it comes to separating the duties of the two sides.
Am I trying to jimmy something into my site that doesn't need to be there? Is there precedence for this kind of stack structure? I'm all ears at this point.
I'm actually working through the same situation right now (though with Python/Flask, but the same concepts should apply to any serverside language). Here is how the workflow for a page goes in my application. Just a note that I do NOT follow the single page application format; in my app, each major page is a full reload.
User requests a page, say a list of companies, /companies/listing/
Server does the routing, loading the correct controller
Controller loads first X companies from DB
Companies are encoded as JSON
Other meta data is loaded (such as total number of companies) and turned into JSON
The list page template is loaded and the JSON popped into a <script> tag within the template. Note here I do not fill in the listing table or anything along those lines, I let Backbone do all of that. I fill in the JSON here so the client doesn't have to make a second request for the initial set of companies
The list page is sent to the client. The server is done for now
The client has all the data it needs to start, so I take the JSON and pass it to my Backbone.View for the listing page
The view creates a collection for the models and manages a set of sub-views that represent the entries in the list
Any other processing/view creation happens such as the creation of pages, prev/next buttons, etc.
If the user clicks to the next page of companies, I fire an AJAX query to the server (/companies/listing/page/1 or something) which returns a new JSON string with a new set of models
Send the new set of models to my Backbone.View which refreshes everything
So really, the server is used for nothing but the actual loading of data, and the initial send of the template. I like this because it'll allow me to easily hook up new frontends (say, an iPad app or something).
For a form, in really broad strokes, I do something like this:
User requests form, /companies/edit/1
Server does permissions checking, loads entry, sends template/JSON to client. Server does not fill out the form with the data
Client uses JSON to fill out the form
Client modifies form, hits submit
All of their changes are applied to the model, the model is turned into JSON and sent to the server using AJAX
Server does validation and either sends error messages (in JSON) to client or updates the database and sends a success message
So, again, those are really broad strokes on how I've done it. In general, I use the server to grab data from the database, do server side validation (can't trust the client heh), and update the database.
If you have some specific questions, I'd be happy to try to share what I've learned so far.

Categories