Getting Started

Apache UserALE.js is the UserALE client for DOM and JavaScript-based applications. It automatically attaches event handlers, is configurable through HTML5 data parameters or a JS API, and logs every user interaction on a web page, including rich JS single-page apps. You can choose to include UserALE.js directly in your project to track how users engage with it, or if you’re interested in generating logs from any webpage, you can try out our web extension that injects UserALE.js into every webpage.

Note: Work on UserALE.js’ documentation is ongoing. Contributions are welcome. To get involved, see our Contributing guide.

Include UserALE.js in your project

To start logging with Apache UserALE.js, you can include our script directly in your project. More details can be found in our README. You can use our build process to create our script, use a sample in our repos, or pull our scripts from npm.

To include UserALE.js in a specific project, you’ll need to deploy a version of our minified UserALE.js script in an accessible location (e.g., webserver), and simply include this script tag on the page:

<script src="/path/to/userale-2.0.0.min.js"></script>

This tag will execute the UserALE.js script in your, with no other modifications to your project needed!

Configure UserALE.js through the Script Tag

UserALE.js is designed to be easily configured to fit your use case. We use HTML data parameters to pass configuration options to the library. For example, one thing you’ll need to do is set the URL (location) of your minified UserALE.js script:

<script src="/path/to/userale-2.0.0.min.js" data-url="http://yourLoggingUrl"></script>

The complete list of configurable options is:

Param Description Default
data-url Logging URL http://localhost:8000
data-autostart Should UserALE.js start on page load true
data-interval Delay between transmit checks 5000 (ms)
data-threshold Minimum number of logs to send 5
data-user User identifier null
data-version Application version identifier null
data-log-details Toggle detailed logs (keys pressed and input/change values) false
data-resolution Delay between instances of high frequency logs (mouseover, scroll, etc.) 500 (ms)
data-user-from-params Query param in the page URL to fetch userId from null
data-tool Name of tool being logged null

See our page on Build and Test for UserALE.js to learn how to build your own minified version of the UserALE.js script, or you check-out a pre-built script with default parameters in our repo.

User our example test utility to experiment with script tag parameters.

Deploying the UserALE.js WebExtension

If you’re interested in using our Web Extension to log user activity across all pages they visit, try our web extension, which injects UserALE.js into any web page your client(s) navigate to. This option is perfect for testing and research. The web extension builds through the same build pipeline as UserALE.js. You can also use pre-built extension files in our repo.

When you’re ready to deploy the UserALE.js web extension, follow the instructions below:

  1. Load the web extension into your browser.
    1. Firefox
      1. Open Firefox
      2. Enter about:debugging into the URL bar and press enter
      3. Check the box to ‘Enable add-on debugging’
      4. Press the ‘Load Temporary Add-on’ button
      5. Navigate to the root of the web extension directory (e.g. ‘build/UserAleWebExtension’)
      6. Press Open, and confirm that ‘User ALE Extension’ appears in the list
      7. You may now navigate to a web page to inject the User ALE script!
    2. Chrome
      1. Open Chrome
      2. Enter chrome://extensions into the URL bar and press enter
      3. Check the ‘Developer mode’ box
      4. Press the ‘Load unpacked extension’ button
      5. Navigate to the root of the build directory (e.g. ‘build/UserAleWebExtension’)
      6. Press Ok, and confirm that ‘UserALE Extension’ appears in the list
      7. You may now navigate to a web page to inject the User ALE script!

You can also find more instructions in our README.

Options

You can set options for the web extension in your browser by opening the extensions page, finding the extension, and choosing either “Preferences” for Firefox, or “Options” for Chrome.