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.
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.1.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.1.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.
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:
You can also find more instructions in our README.
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.