| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| |
| <title>UserAle</title> |
| <meta name="description" content="The homepage for Apache Flagon"> |
| |
| <link rel="stylesheet" type="text/css" href="/semantic/dist/semantic.min.css"> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
| <script src="/semantic/dist/semantic.min.js"></script> |
| <script src="https://d3js.org/d3.v4.min.js"></script> |
| <script src="/js/main.js"></script> |
| |
| <link rel="stylesheet" href="/assets/main.css"> |
| <link rel="canonical" href="http://flagon.incubator.apache.org/userale/"> |
| <link rel="alternate" type="application/rss+xml" title="Apache Flagon" href="/feed.xml"> |
| |
| |
| </head> |
| |
| |
| <body> |
| |
| <div class="site-header"> |
| <div id="main-menu" class="ui inverted padded fixed top borderless menu"> |
| <a class="site-title" href="/"> |
| <h3 class="ui inverted header item">Apache Flagon</h3> |
| </a> |
| |
| <div class="right menu"> |
| <div class="ui dropdown item"> |
| Products |
| <div class="menu"> |
| <a class="item" href="/stack">Stack</a> |
| <a class="item" href="/userale">UserALE</a> |
| <a class="item" href="/distill">Distill</a> |
| <a class="item" href="/tap">Tap</a> |
| <a class="item" href="/stout">Stout</a> |
| </div> |
| </div> |
| <div class="ui dropdown item"> |
| <a href="/docs">Docs</a> |
| <div class="menu"> |
| <a class="item" href="/docs/stack">Stack</a> |
| <a class="item" href="/docs/userale">UserALE</a> |
| <a class="item" href="/docs/useralejs">UserALE.js</a> |
| <a class="item" href="/docs/useralepy">UserALE.py</a> |
| <a class="item" href="/docs/distill">Distill</a> |
| <a class="item" href="/docs/tap">Tap</a> |
| <a class="item" href="/docs/stout">Stout</a> |
| </div> |
| </div> |
| <a class="item" href="/releases">Releases</a> |
| <a class="item" href="/community">Community</a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="main-wrapper"> |
| |
| <div class="ui image-masthead masthead padded center aligned inverted vertical segment"> |
| <img class="component-image" src="/images/userale_inverted.png"> |
| </div> |
| |
| |
| <div class="ui very padded vertical segment"> |
| <div class="ui center aligned text container"> |
| <p> |
| Apache UserALE (User Analytic Logging Engine) is the beating heart of Apache Flagon technology. UserALE provides instrumentation for applications, embedding a light-weight, easy-to-manage behavioral logging capability. UserALE provides comprehensive user event tracking for web pages, but it is specially engineered for thin-client analytical applications. UserALE transmits specially structured messages from your application to an activity logging server whenever users interact with it. Apply UserALE with a single line of code and capture every user interaction without having to separately manage tags on each feature of your application. UserALE works with Elastic and other open source databases–you own your data and you can access it for analysis and automation without restriction. UserALE.js serves Javascript applications. For desktop applications written in PyQt5 see UserALE.PyQt5. |
| </p> |
| </div> |
| </div> |
| |
| <div class="ui inverted grey very padded vertical segment"> |
| <div class="ui center aligned text container"> |
| <h2 class="ui inverted header">Features</h2> |
| |
| <div class="ui basic padded vertical segment"> |
| <div class="ui middle aligned two column grid"> |
| <div class="column"> |
| <i class="huge circular inverted blue thumbs up icon"></i> |
| </div> |
| <div class="column"> |
| <h3 class="ui inverted header">Low-effort</h3> |
| <div class="feature-description"> |
| Embed UserALE with a single script tag in source, or from your browser console for testing. |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="ui basic padded vertical segment"> |
| <div class="ui middle aligned two column grid"> |
| <div class="column"> |
| <i class="huge circular inverted yellow settings icon"></i> |
| </div> |
| <div class="column"> |
| <h3 class="ui inverted header">Customizable</h3> |
| <div class="feature-description"> |
| UserALE provides options for custom, manual instrumentation. |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="ui basic padded vertical segment"> |
| <div class="ui middle aligned two column grid"> |
| <div class="column"> |
| <i class="huge circular inverted red mouse pointer icon"></i> |
| </div> |
| <div class="column"> |
| <h3 class="ui inverted header">Capture every event</h3> |
| <div class="feature-description"> |
| And the document object model targets of those events, with resolution suitable for advanced behavioral analytics. |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="ui basic padded vertical segment"> |
| <div class="ui middle aligned two column grid"> |
| <div class="column"> |
| <i class="huge circular inverted green database icon"></i> |
| </div> |
| <div class="column"> |
| <h3 class="ui inverted header">Own your own data</h3> |
| <div class="feature-description"> |
| UserALE utilizes Elastic as a scalable, searchable database for user event log storage. |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="ui basic padded vertical segment"> |
| <div class="ui middle aligned two column grid"> |
| <div class="column"> |
| <i class="huge circular inverted blue dashboard icon"></i> |
| </div> |
| <div class="column"> |
| <h3 class="ui inverted header">Low processing overhead</h3> |
| <div class="feature-description"> |
| UserALE will not adversely affect your applications performance. |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="ui basic padded vertical segment"> |
| <div class="ui middle aligned two column grid"> |
| <div class="column"> |
| <i class="huge circular inverted yellow protect icon"></i> |
| </div> |
| <div class="column"> |
| <h3 class="ui inverted header">Never lose data</h3> |
| <div class="feature-description"> |
| Temporary offline log storage safeguards from dropped signal due to connectivity issues. |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </div> |
| |
| <div class="ui very padded vertical segment"> |
| <div class="ui center aligned text container"> |
| <h2 class="ui header">UserALE.js</h2> |
| <p> |
| UserALE.js is the DOM/JavaScript client for UserALE. Every user activity is logged and sent to the UserALE backend for storage and analysis by Distill. |
| </p> |
| <div class="ui basic vertical segment"> |
| <div id="start-button" class="ui green button">Start Logging</div> |
| <div id="stop-button" class="ui red button">Pause Logging</div> |
| </div> |
| </div> |
| |
| <div class="ui container"> |
| <div class="ui equal height two column grid"> |
| <div class="center aligned column"> |
| <div class="ui basic row segment"> |
| <h4 class="ui dividing header">Buttons</h4> |
| <div class="ui blue button">Blue</div> |
| <div class="ui yellow button">Yellow</div> |
| <div class="ui green button">Green</div> |
| <div class="ui red button">Red</div> |
| </div> |
| |
| <div class="ui form"> |
| <h4 class="ui dividing header">Checkboxes</h4> |
| <div class="field"> |
| <div class="two fields"> |
| <div class="field"> |
| <input type="checkbox"> |
| <label>Checked!</label> |
| </div> |
| <div class="field"> |
| <div class="two fields"> |
| <div class="field"> |
| <div class="ui radio checkbox"> |
| <input type="radio" name="demo-checkbox"> |
| <label>Yes</label> |
| </div> |
| </div> |
| <div class="field"> |
| <div class="ui radio checkbox"> |
| <input type="radio" name="demo-checkbox"> |
| <label>No</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <h4 class="ui dividing header">Inputs</h4> |
| <div class="field"> |
| <div class="two fields"> |
| <div class="field"> |
| <div class="ui labeled input"> |
| <div class="ui grey label">Text</div> |
| <input type="text"> |
| </div> |
| </div> |
| |
| <div class="field"> |
| <div id="demo-dropdown" class="ui fluid selection dropdown"> |
| <input type="hidden" name="flagon-component"> |
| <i class="dropdown icon"></i> |
| <div class="default text">Select Component</div> |
| <div class="menu"> |
| <div class="item">UserALE</div> |
| <div class="item">Distill</div> |
| <div class="item">Tap</div> |
| <div class="item">Stout</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <h4 class="ui dividing header">Maps</h4> |
| <div class="ui basic row segment"> |
| <div id="map-example"></div> |
| </div> |
| |
| |
| </div> |
| </div> |
| |
| <div id="log-feed" class="center aligned column"> |
| <div class="ui fluid row segment"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> |
| <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> |
| <script src="/js/userale-demo.min.js" data-url=""></script> |
| |
| <script> |
| $(document).ready(function () { |
| $('#demo-dropdown').dropdown(); |
| $('.ui.checkbox').checkbox(); |
| |
| $('#start-button').on('click', userale.start); |
| $('#stop-button').on('click', userale.stop); |
| userale.options({ |
| logCb: addLog, |
| noSend: true |
| }); |
| |
| var map = L.map('map-example').setView([42.3601, -71.0589], 13); |
| L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' |
| }).addTo(map); |
| |
| function addLog(log) { |
| var html = '<div class="log ui fluid row segment">' + JSON.stringify(log) + '</div>'; |
| $('#log-feed').prepend(html); |
| } |
| |
| function clearLogs() { |
| setTimeout(function () { |
| var $feed = $('#log-feed .log'); |
| if ($feed.length > 10) { |
| $feed.slice(9).remove(); |
| } |
| clearLogs(); |
| }, 1000); |
| } |
| |
| clearLogs(); |
| }); |
| </script> |
| |
| |
| |
| |
| <div class="ui inverted grey very padded vertical segment"> |
| <div class="ui center aligned text container"> |
| <h2 class="ui inverted header"> |
| Ready to try UserALE? |
| </h2> |
| <a class="ui big blue button" href="/releases"> |
| Get the Release |
| </a> |
| <a class="ui big yellow button" href="/docs/userale/"> |
| Read the Docs |
| </a> |
| </div> |
| </div> |
| |
| </div> |
| |
| <div class="footer ui inverted very padded vertical segment"> |
| <div class="ui vertical segment"> |
| <div class="ui four column grid"> |
| <div class="column"> |
| <h4 class="ui inverted header">About</h4> |
| <div class="ui inverted link list"> |
| <a class="item" href="/stack">Stack</a> |
| <a class="item" href="/userale">UserALE</a> |
| <a class="item" href="/distill">Distill</a> |
| <a class="item" href="/tap">Tap</a> |
| <a class="item" href="/stout">Stout</a> |
| </div> |
| </div> |
| <div class="column"> |
| <h4 class="ui inverted header">Docs</h4> |
| <div class="ui inverted link list"> |
| <a class="item" href="/docs/stack">Stack</a> |
| <a class="item" href="/docs/userale">UserALE</a> |
| <a class="item" href="/docs/useralejs">UserAle.js</a> |
| <a class="item" href="/docs/useralepy">UserAle.py</a> |
| <a class="item" href="/docs/distill">Distill</a> |
| <a class="item" href="/docs/tap">Tap</a> |
| <a class="item" href="/docs/stout">Stout</a> |
| </div> |
| </div> |
| <div class="column"> |
| <h4 class="ui inverted header">Community</h4> |
| <div class="ui inverted link list"> |
| <a class="item" href="https://github.com/apache?q=flagon">GitHub</a> |
| <a class="item" href="http://stackoverflow.com/questions/tagged/apache-flagon">StackOverflow</a> |
| <a class="item" href="https://issues.apache.org/jira/browse/FLAGON">Jira Issue Tracker</a> |
| <a class="item" href="https://cwiki.apache.org/confluence/display/FLAGON">Project Wiki</a> |
| <a class="item" href="https://twitter.com/ApacheFlagon">Twitter</a> |
| </div> |
| </div> |
| <div class="column"> |
| <h4 class="ui inverted header">Apache</h4> |
| <div class="ui inverted link list"> |
| <a class="item" href="http://www.apache.org/">Apache Software Foundation</a> |
| <a class="item" href="http://www.apache.org/licenses/">License</a> |
| <a class="item" href="http://www.apache.org/foundation/sponsorship.html">Sponsorship</a> |
| <a class="item" href="http://www.apache.org/foundation/thanks.html">Thanks</a> |
| <a class="item" href="http://www.apache.org/security/">Security</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="ui inverted vertical segment"> |
| <div class="ui two column middle aligned grid"> |
| <div class="column"> |
| Apache Flagon is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF. |
| </div> |
| <div class="center aligned column"> |
| Copyright © 2022 The Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.<br> |
| Apache Flagon, Flagon, Apache, the Apache feather logo, the Apache Flagon logo and the Apache Incubator logo are trademarks of The Apache Software Foundation. |
| </div> |
| </div> |
| </div> |
| <div class="ui inverted vertical segment"> |
| <div class="ui one column middle aligned grid"> |
| <div class="center aligned column"> |
| <a href="http://incubator.apache.org/"> |
| <img src="/images/incubator-logo-white.jpg"> |
| </a> |
| <a href="https://www.apache.org/events/current-event.html"> |
| <img src="https://www.apache.org/events/current-event-234x60.png" alt="ASF Current Event"> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| </body> |
| |
| </html> |
