www.webdeveloper.com
Results 1 to 11 of 11

Thread: User Activity Logging

  1. #1
    Join Date
    Dec 2012
    Posts
    3

    User Activity Logging

    Hey everyone,

    My apologies if this is similar to any other recent posts but I was unable to find any using the search function.

    My work involves helping develop a web application that keeps track of lots of client info and organizes it for staff to view in what is (hopefully) a convenient and effective manner. The application is based in PHP but makes use of a lot of javascript as well. We would like to create a module for the application that allows us to see exactly how the users are navigating and using what we've given them so far. In order to do this, we would like much more detailed information than simply linking user accounts to page requests/form submissions. The sort of information we're looking for would most likely consist of things like

    • Changing the slection on a dropdown/radio button
    • Using a button that does not perform any kind of GET/POST
    • Clicking on a filtering checkbox


    Seeing as all of this interaction takes place on the client side, javascript seems like the only answer I've come up with for keeping track of it. The idea that I have been considering would be based around creating a new javascript file to be included on every page which would provide a data structure to append user activity information to (what button was clicked, where on the page the click occurred, javascript function name), and then submit that log whenever a new page was requested. I can imagine a few problems with this solution already, such as recording activity on the final page the user visits and the fact that this would probably require us to add a line to every single function we intended to log (it's a fairly old, large application).

    So the questions I have about this are...

    Does this sound like we're heading in the right direction so far, or is there a simpler solution to the problem? Is this probably going to cause a lot of overhead, or should the right implementation be fairly unnoticeable? Does anyone know of any software/libraries (paid or free) that might do this already or at least speed up the process?

    Whether you think this is headed in the right direction or not, I would greatly appreciate any tips that you think would be good to remember as I'm far from an expert in this and may take some things you find obvious for granted.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Well, as far as the concept goes, you are headed in the right direction. Tracking and logging actions that take place on a page would best be done with javascript, but unfortunately it could get a little messy.

    There is the obvious method of running a function for every event you wish to log. This could be done by adding a bunch of event listeners or coding the events in to the elements directly, but this wouldn't really be very efficient and of course would require lots of seemingly unnecessary coding. Even setting up a somewhat streamlined function in javascript to cycle through an array of events (and elements) and add event listeners would still be a bit of a stretch in my opinion.

    So far the best idea I've managed to come up with is essentially to just log all clicks occurring on the body element and then run a function to gather more specific data such as the element clicked, its value and things like the cursor position. It's still not a perfect solution and there may be other cases you want to add additional code for to make sure everything is properly accounted for.
    Code:
    <script type="text/javascript">
    if(document.addEventListener) {
      document.body.addEventListener("click", _EventLogging, false);
    } else {
      document.body.attachEvent("onclick", _EventLogging);
    }
    
    function _EventLogging($e) {
      $obj = ($e.target) ? $e.target : $e.srcElement;
      if(window.scrollX) {
        $x = $e.clientX + window.scrollX;
        $y = $e.clientY + window.scrollY;
      } else {
        $x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        $y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
      }
    
      // More code here...
    }
    </script>
    That's a pretty rough draft but it works well enough for what you are needing I believe. You can add more code, calling on the $x and $y variables to get the cursor's position or call the $obj to check for attributes on the element clicked. Things like $obj.id or $obj.value would work. Of course you may want to check the type of element first to be sure of which attributes you want to grab. Then either store them in an array or variable of your choosing and submit that data before the page is left.

    It's entirely possible there is a better solution or idea out there, but having looked in to something similar before I was only ever able to find and come up with this solution.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Dec 2012
    Posts
    3
    Hey Kirby - thanks for the reply! I've been playing around with the code you suggested and it seems to be working pretty well, definitely haven't found any better alternatives. I've noticed that while it is usually able to identify what has been clicked on, it does not always return an object, even when clicking on a clearly identifiable portion of the page. Most of the instances I've noticed this on occur on portions of the page that were loading in via ajax. Do you know if there is any way I could get the javascript to recognize these kinds of objects (or if this is not usually an issue)?

    Also, I had forgotten that certain portions of the application do not actually navigate away from the page, but instead load a new module in via ajax. I've found some other methods that would allow me to attach event listeners to the ajax calls as well, but when do you think would be an appropriate time to sync up my currently logged data if I'm not necessarily relying on the user navigating to a new page?

    Thanks again for the previous response, you've already helped get this project off to a great start.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Question

    Quote Originally Posted by Sup3rkirby View Post
    Code:
    <script type="text/javascript">
    if(document.addEventListener) {
      document.body.addEventListener("click", _EventLogging, false);
    } else {
      document.body.attachEvent("onclick", _EventLogging);
    }
    
    function _EventLogging($e) {
      $obj = ($e.target) ? $e.target : $e.srcElement;
      if(window.scrollX) {
        $x = $e.clientX + window.scrollX;
        $y = $e.clientY + window.scrollY;
      } else {
        $x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        $y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
      }
    
      // More code here...
    }
    </script>
    Could you give a brief example of how to call that function or event?

    I tried adding an alert message, but my event set-up must be in error as it reports: "window.event is undefined"

  5. #5
    Join Date
    Dec 2012
    Posts
    3
    Quote Originally Posted by JMRKER View Post
    Could you give a brief example of how to call that function or event?

    I tried adding an alert message, but my event set-up must be in error as it reports: "window.event is undefined"
    The function isn't actually meant to be called by itself - the code above adds it as an event listener for clicks. So whenever a click is detected on the page, the function executes. I'm assuming if you try to call it separately, there is no event associated with the window.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    So how is it used?
    What should happen?
    I'm trying to understand the concept behind the code.

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    Do you know Google analytics ?

    It give very useful informations about users with this script (probably an old version).

    Code:
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'User_identifier']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
    Perhaps could you look at the corresponding script? (See this page)

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Quote Originally Posted by 007Julien View Post
    Do you know Google analytics ?

    It give very useful informations about users with this script (probably an old version).
    Nope. Never have used it.

    Thanks. I'll take a peek.

  9. #9
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Quote Originally Posted by JMRKER View Post
    So how is it used?
    What should happen?
    I'm trying to understand the concept behind the code.
    JMRKER, basically the script is added to the end of a page and automatically sets event listeners when the page is loaded. The function will then run any time a part of the page is clicked and grab the cursor location as well as the html object that was clicked. From there you can add any additional code depending on what information you need (such as the element id, value/innerHTML, etc) and either store it in an object/array or set of variables that can be sent to a server via AJAX or form submission.

    Space_Cowboy, as far as I know right now, I can't see why dynamically loaded content would be ignored by the script as long as they are contained within the document's <body> tag. I suppose a bit later today I could load some content via AJAX on a test page and see how it affects the script. If it does seem to have some effect I could always setup a function that first waits on the document to be ready and then executes, setting the event listeners. This same function could be called later any time an AJAX request is made to help ensure new content is not ignored. I'll have to get back to you on that though.

    As for Google Analytics, it's certainly not bad but event tracking requires an additional script and from what I've read items you wish to track events for much be determined in advance. I'm no expert on Google Analytics though so I won't put it down entirely. Someone who knows more about it could probably elaborate on how its event tracking works.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  10. #10
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Cool

    Quote Originally Posted by Sup3rkirby View Post
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"
    Only takes one try if the book is close enough!

  11. #11
    Join Date
    Mar 2013
    Posts
    5
    I have come across your thread much later but i can see that other members has already suggested useful reply for you, i hope you have get the thing what were you looking for.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles