logui-framework / client

A framework-agnostic client-side JavaScript library for logging user interactions on webpages.

LogUI Client

Welcome to LogUI! LogUI is a powerful, framework-agnostic client-side JavaScript library that can be used for logging interactions that take place on a webpage. Primarily designed for Interactive Information Retrieval (IIR) experiments, LogUI can in theory be used on any page or site that you wish to track fine-grained user interactions with UI components.

Use the LogUI client in tandem with the LogUI server. You can find the LogUI server living at this repository.

About LogUI

The LogUI library is implemented by Dr David Maxwell, a postdoctoral researcher at TUDelft in the Netherlands. It has been developed in the Lambda Lab, headed by Dr Claudia Hauff. The library is borne out of the need for infrastructure that allows one to undertake the logging of user interactions in a consistent way, rather than the piecemeal approach that we've seen in IIR experimentation.

We think that a one-size-fits-all logging library is just the ticket for your experiments!

Using LogUI in Experiments?

We're thrilled that you're using LogUI in your experiments! We ask that in return you provide due credit for this work. If you have a paper associated with your experiment, please do cite the associated demonstration paper that was published at ECIR 2021. You can find the BibTeX source for the paper below.

@inproceedings{maxwell2021logui,
    author = {Maxwell, David and Hauff, Claudia},
    title ="{LogUI: Contemporary Logging Infrastructure for Web-Based Experiments}",
    booktitle = {Advances in Information Retrieval (Proc. ECIR)},
    year = {2021},
    pages = {525--530},
}

Documentation and Quick Start Guide

For documentation on the LogUI client library, please go and check the corresponding Wiki associated with this repository. There, you'll find detailed information about how to acquire yourself a copy, how to set the client library up, how to integrate it with your existing application's code, and information which should allow you to gain a better understanding as to the thinking behind the library's implementation.

Tests

Tests are being developed for the LogUI client library and will be available in this repository soon.

Found a Bug or have a Feature Request?

It would be great to hear from you! Please raise an issue in this repository and we can discuss what options that can be pursued to resolve it.

client's Issues

website interaction logging

It's awesome to see another project like this, and really interesting that both of us have come up with this idea independently!

I have built another tool in this space (yet unpublished) that has been used for some user studies in the past: https://github.com/hscells/bigbro

If your paper gets accepted would you mind also sending through a pre-print? I would be really interested in reading it!

Documentation potentially out of date regarding 'browserEvents' for version 0.5.4a

From the Browser Events documentation we are given the config example below.

let configurationObject = {
    logUIConfiguration: {
        endpoint: 'ws://path-to-server:8000/ws/endpoint/',
        authorisationToken: 'AUTHTOKEN',  // The authorisation token.
        verbose: true,
        browserEvents: {
            // See the Browser Events Wiki page.
        }
    },
...

However in buildVersion: 0.5.4a, and commit 09d1658e0d0678dc6be81e04a739dc1e17d48c4a of the master branch, in config.js we have:

    var initConfigObjects = function(suppliedConfigObject) {
        Helpers.extendObject(_configProperties, Defaults.dispatcher);  // Apply the defaults for the dispatcher.
        Helpers.extendObject(_configProperties, suppliedConfigObject.logUIConfiguration);  // Apply the logUIConfiguration values from the supplied config object.

        _applicationSpecificData = suppliedConfigObject.applicationSpecificData;
        _trackingConfig = suppliedConfigObject.trackingConfiguration;
        _browserEvents = suppliedConfigObject.browserEvents;

        return true;
    };

Showing that browserEvents should be on the same level as applicationSpecificData rather than nested within logUIConfiguration as shown in the documentation. After moving browserEvents like so:

{
  logUIConfiguration: {
      endpoint: 'ws://localhost:8000/ws/endpoint/',
      authorisationToken: 'TOKEN',
      verbose: true
  },
  applicationSpecificData: {
      userID: 123,
  },
  browserEvents: {
    trackCursor: false
  },
...

my configuration took effect.

Configuration object - cursor position tracking frequency not customizable

I'm trying to change the cursorUpdateFrequency key within the browserEvents object inside the configuration object but no matter what I change it to it always updates every 200ms.

I realized the only way for me to update the cursorUpdateFrequency was to go into the logui.bundle.js and manually set the following line:
(e = Te.browserEventsConfig.get("cursorUpdateFrequency", 200))
to
(e = Te.browserEventsConfig.get("cursorUpdateFrequency", 1000))
in order to change the frequency to once every second.

Is there anything I'm doing wrong by setting it in the configuration object? because the following doesn't update the cursorUpdateFrequency.
Here's the browserEvents section of the configuration object:

 browserEvents: {
      blockEventBubbling: true,
      eventsWhileScrolling: true,
      URLChanges: true,
      contextMenu: true,
      pageFocus: true,
      trackCursor: true,
      cursorUpdateFrequency: 1000,
      cursorLeavingPage: true,
 }

I can manage temporarily by updating the logui.bundle.js file directly but it would be much more convenient to have the configuration object settings applied.