Trackr 0.1

A simple lightwight (well, it is if you already have jQuery running...) interaction logging script.

Data is captured from only within the content area of the page and is usually stored via AJAX in a logging script (In this example, the data is only stored locally).

To log data, you need to add a call to Trackr.init(); to the page load, passing the desired options as the parameter, for example:

  <script type="text/javascript" charset="utf-8">
    $(function() {
      Trackr.init({
        // the interval timeout for sending data, or 0 to never automatically send (useful if debugging)
        timeout: 2500,
        // the url of the tracking script
        url: '/track.php',
        // the smallest amount of data to POST back
        minData: 10,
        // the events to capture
        capture: [
          'load',
          // 'focus',
          // 'blur',
          'mouseMove',
          // 'mouseDown',
          // 'mouseUp',
          'click',
          // 'resize',
          // 'keyUp',
          // 'keyDown',
          // 'keyPress',
          'unload'
        ],
        // a selector of the element to calculate the cursor offset from (use with centered designs)
        offset: 'body',
        // offset: 'div#content',
        // use the canvas to render the overlay (recommended if supported, maybe use excanvas in IE: http://excanvas.sourceforge.net/)
        canvas: true
      });
    });
  </script>
    

If you set the timeout option to 0, you'll need to set up an interval to call Trackr.send(); to store the data.

If you are using the built in POST to the Trackr PHP/MySQL script, you'll need to set up a table:

  CREATE TABLE `actions` (
    `id` int(11) NOT NULL auto_increment,
    `url` text NOT NULL,
    `time` decimal(16,5) NOT NULL default '0.00000',
    `type` varchar(255) NOT NULL default '',
    `session` varchar(255) NOT NULL default '',
    `data` text NOT NULL,
    PRIMARY KEY  (`id`)
  ) ENGINE=MyISAM DEFAULT CHARSET=latin1
    

and configure the table information in the script:

  /**
   * table
   * 
   * The table data is stored in
   *
   * @author Dom Hastings
   */
  static $table = 'actions';

  /**
   * fields
   * 
   * The field data for the above table
   *
   * @author Dom Hastings
   */
  static $fields = array(
    // 'key' => 'fieldName',
    'url' => 'url',
    'time' => 'time',
    'type' => 'type',
    'session' => 'session',
    'data' => 'data'
  );
    

Notes

The MySQL table in which data is stored, can get fairly large fairly quickly. Therefore to run this on a high traffic site would probably not be advisable.

The interface to load the overlay is pretty poor, yes I know. It's functional though, which is pretty much all I needed at this stage.

Demo

Reload the page once you have shown the data to remove the overlay.