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 into your project:
npm install flagon-userale
module:import * as userale from 'flagon-userale';
or
const userale = require('flagon-userale');
Our webpack example illustrates this use-case.
script-tag:<script src="./node_modules/flagon-userale/build/userale-2.4.0.min.js"></script>
Our script tag example illustrates this use-case
If you include UserALE.js as a script-tag, consider installing via npm as a development dependency:
npm install --save-dev flagon-userale
<script src="https://cdn.jsdelivr.net/npm/flagon-userale@2.4.0/build/userale-2.4.0.min.js"></script>
We also support a WebExtension that can be added to your browser in developer mode. Follow the link for instructions.
Once UserALE.js is installed in your project, your application will start generating logs automatically.
UserALE.js is designed to be easily configured to fit your use case. In script-tag deployment, 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.4.0.min.js" data-url="http://yourLoggingUrl"></script>
The complete list of configurable options is:
| Param | Description | Default |
|---|---|---|
| url | Logging URL | http://localhost:8000 |
| autostart | Should UserALE start on page load | true |
| transmitInterval | Delay between transmit checks | 5000 (ms) |
| logCountThreshold | Minimum number of logs to send | 5 |
| userId | User identifier | null |
| sessionId | Session identifier | null |
| version | Application version identifier | null |
| logDetails | Toggle detailed logs (keys pressed and input/change values) | false |
| resolution | Delay between instances of high frequency logs (mouseover, scroll, etc.) | 500 (ms) |
| userFromParams | Query param in the page URL to fetch userId from | null |
| toolName | Name of tool being logged | null |
| authHeader | Authorization header to be passed to logging endpoint | null |
NOTE These options are also available through our API, which support deploying UserALE.js as an NPM module.
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.
Use 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 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.
You can also find more instructions in our README.
Contributions are welcome! Simply submit an issue for problems you encounter or a pull request for your feature or bug fix. The core team will review it and work with you to incorporate it into UserALE.js. We also love Pull Requests!
