Google Git
Sign in
apache / flagon / 9f2424775aeda0ec1667959d076ef06bbf9a20b4 / . / content / index.html
blob: 1e0c8ee7652447cf8975b71072eb82d4abb9d3e7 [file] [log] [blame]
<!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>Apache Flagon</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/">
<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 id="main-masthead" class="ui masthead padded center aligned inverted vertical segment">
<h1 class="ui header">Apache Flagon</h1>
<h2 class="ui header">Instrument Software. &nbsp; Understand Humans.</h2>
</div>
<div class="ui very padded vertical segment">
<div class="ui center aligned text container">
<p>
Apache Flagon is an open-soure, thin-client behavioral logging capability useful for business analytics, usage analytics, usability and user testing. It's also for science into how information technology is used. Flagon supports a range of streamlined deployment schemas ranging from single webpage analysis to enterprise level monitoring, making it easy to collect data without heavy modification of your own code. Using Elastic products, Flagon makes it easy to scale, integrate other services, access your data and get the insights you need out of it. In the spirit of customization, the Apache Flagon project collects a number of modular products and capabilities to help you build the stack that suites your needs.
</p>
<br>
<a class="ui big red button" href="/docs/stack/">
Get Started
</a>
<a class="ui big blue button" href="/releases">
Download Flagon
</a>
<a class="ui big yellow button" href="mailto:dev-subscribe@flagon.incubator.apache.org">
Join our Dev List
</a>
</div>
</div>
<div class="ui inverted grey very padded vertical segment">
<div class="ui text container">
<div class="ui two column middle aligned grid">
<div class="column">
With a single line of code capture all of your users' behavior on your web page with enough resolution and granularity for advanced behavioral modeling. Apache UserALE is Flagon's free, open-source application for thin-client behavioral logging. It's perfect for business analytics and enterprise application monitoring, but powerful enough for UI/UX research and user-testing. Check out our slick demo!
</div>
<div class="center aligned column">
<a href="/userale">
<img class="component-image" src="/images/userale_inverted.png">
</a>
</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: '&copy; <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 text container">
<div class="ui two column middle aligned grid">
<div class="center aligned column">
<a href="/distill">
<img class="component-image" src="/images/distill_inverted.png">
</a>
</div>
<div class="column">
Process and control your own user event data. Apache Distill is Flagon's experimental, customizable analytics stack built in Python that interfaces directly with Elastic. It gives data scientists and developers the power to segment and model user data in Python or push modeling output to visual analytic applications. From simple aggregations to complex graph models of user workflow, Distill provides access to user data and the python libraries you love in a streamlined analytical pipeline.
</div>
</div>
</div>
</div>
<div class="ui very padded vertical segment">
<div class="ui text container">
<div class="ui two column middle aligned grid">
<div class="column">
Apache TAP is Flagon's experimental collection of specially modified D3 visual analytic libraries for exploring Apache UserALE.js data. You can explore them in our sandbox environment, or embed them in your own applications. With TAP, Gain insight from advanced sequential and graph models and reveal trends in usage across users of different types and experience, and trends across different versions of your application. Try out our Bowie plot demo below!
</div>
<div class="center aligned column">
<a href="/tap">
<img class="component-image" src="/images/tap.png">
</a>
</div>
</div>
</div>
</div>
<div class="ui inverted grey very padded vertical segment">
<div class="ui center aligned text container">
<h2 class="ui inverted header">The Bowie Plot</h2>
<p>
Tap uses the Bowie plot to present your users' micro-workflows and help you uncover insights into how your users interact with you apps. Start on the left, with the activity that starts the workflow, sized by the frequency of the activity. Next, the circles in the middle show the second activity in the workflow. The circles are downselected and sized by a graph metric to help uncover a particular type of insight. End on the right with the final activity of the workflow.
</p>
</div>
<div class="ui container">
<div class="ui padded grid">
<div class="four wide middle aligned column">
<div class="ui inverted form">
<h3 class="ui inverted header">Graph Metrics</h3>
<div class="grouped fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="out_degree" checked></input>
<label>Out Degree</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="in_degree"></input>
<label>In Degree</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="betweenness_cent_dir_weighted"></input>
<label>Weighted Betweenness</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="closeness_cent_dir_weighted"></input>
<label>Weighted Closeness</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="metric" value="closeness_cent_dir_unweighted"></input>
<label>Unweighted Closeness</label>
</div>
</div>
</div>
</div>
</div>
<div class="twelve wide center aligned column">
<div class="ui basic row segment">
<div id="bowie"></div>
</div>
</div>
</div>
<div id="metric-explanation" class="ui center aligned text container"></div>
</div>
</div>
<script src="/js/bowiePlot.js"></script>
<script>
$(document).ready(function () {
// Metric explanations
var metricExplanations = {
'out_degree': 'Out degree describes how often an activity was a source. How often did a micro-workflow start with this activity? This could indicate an entry point to your app or the start of a particularly common workflow.',
'in_degree': 'In degree describes how often an activity was a sink. How often did a micro-workflow end with this activity? This could indicate a final confirmation, exit navigation, or a place the user got stuck.',
'betweenness_cent_dir_weighted': 'Betweenness centrality describes how often an activity was passed through. This indicates a common intermediate activity, like a busy intersection of your app.',
'closeness_cent_dir_weighted': 'Closeness centrality indicates how "close" an activity is to all others. A higher closeness indicates an activity that was involved in more workflows. Weighted closeness focuses on closeness to the most common activities, rather than to all equally.',
'closeness_cent_dir_unweighted': 'Closeness centrality indicates how "close" an activity is to all others. A higher closeness indicates an activity that was involved in more workflows. Unweighted closeness focuses on closeness to all activities equally, regardless of how often each activity occurred.'
};
// Change metric
function changeMetric() {
var metric = $('input[name=metric]:checked').val();
$('#metric-explanation').html(metricExplanations[metric]);
Bowie.update(metric);
}
// Initialize radio buttons
$('.ui.radio.checkbox').checkbox({
onChange: changeMetric
});
// Initialize
Bowie.create();
changeMetric();
});
</script>
<div class="ui very padded vertical segment">
<div class="ui text container">
<div class="ui two column middle aligned grid">
<div class="center aligned column">
<a href="/stout">
<img class="component-image" src="/images/stout.png">
</a>
</div>
<div class="column">
Stage systematic user research on the web. Apache STOUT provides everyone the ability to perform user research on the web. Track research participants through different tasks with your web applications, or track them through different versions of the same web application. Apache STOUT allows you to manage user research participants and data collected through Apache UserALE and 3rd party form data services.
</div>
</div>
</div>
</div>
<div class="ui inverted grey very padded vertical segment">
<div class="ui text container">
<h2 class="ui inverted header">About the Project</h2>
<p>
Apache Flagon is a free and open-source, thin-client behavioral logging solution for business analytics, usage analytics, usability testing and scientific research. Formerly named Apache SensSoft, Flagon had its start at Draper for DARPA's XDATA program and represents the hard-work and innovations of an interdisciplinary team of data scientists, psychologists, developers and system architects. Apache Flagon is maintained by the people that love it under the mentorship and guidance of the Apache Incubator. Join the conversation and the community!
</p>
</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 &copy; 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>&nbsp;
<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>