| |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <title>Logging API</title> |
| <link href='http://fonts.googleapis.com/css?family=Chelsea+Market' rel='stylesheet' type='text/css'> |
| |
| <!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/styles/default.min.css"> --> |
| <link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/default.min.css"> |
| <script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script> |
| <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/styles/github.min.css"> --> |
| |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/languages/javascript.min.js"></script> |
| <script>hljs.initHighlightingOnLoad();</script> |
| |
| <link rel="stylesheet" href="css/normalize.css" type="text/css"> |
| <link rel="stylesheet" href="css/style.css" type="text/css"> |
| </head> |
| <body> |
| <div class="scrollblock block-title"> |
| <div> |
| <h1>Draper Logging API</h1> |
| <h1>-the simple guide</h1> |
| </div> |
| </div> |
| <!-- instantiate --> |
| <a name="instantiate"></a> |
| <div class="scrollblock block-setup"> |
| <h2>Instantiate the Logger</h2> |
| <pre> |
| <code> |
| // web worker url |
| var worker = 'js/draper.activity_worker-2.1.1.js' |
| var ac = new activityLogger(worker); |
| .testing(true) // simulate POST, won't send log |
| .echo(true) // log to console |
| .mute(['SYS']); // don't log SYSTEM actions |
| </code> |
| </pre> |
| </div> |
| <!-- register --> |
| <a name="register"></a> |
| <div class="scrollblock block-register"> |
| <h2>register the Logger</h2> |
| <pre> |
| <code> |
| ac.registerActivityLogger( |
| "http://xd-draper.xdata.data-tactics-corp.com:1337", |
| "my-component", |
| "v0.1" |
| ); |
| </code> |
| </pre> |
| </div> |
| <!-- register --> |
| <a name="log-user"></a> |
| <div class="scrollblock block-user"> |
| <h2>Log a User Activity</h2> |
| <br> |
| <pre> |
| <code> |
| $('#button').mouseenter(function() { |
| ac.logUserActivity( |
| 'User hovered over element to read popup', // description |
| 'hover_start', // activity_code |
| ac.WF_EXPLORE // workflow State |
| ); |
| }) |
| </code> |
| </pre> |
| |
| <div class="definitions" style="text-align: left; margin: 0 10%;"> |
| <div style="margin-bottom: 40px;"><b>Description is a</b> is a natural language explanation of the activity, which can be descriptive as you want.</div> |
| <div style="margin-bottom: 40px;"><b>Activity Code is a</b> is a coding of the tool action that should be mappable across tools. Make some attempt to use activity codes listed in the API and here.</div> |
| <div><b>Workflow State is a</b> is a collection of tool actions which represent the gross activity of the user. The logging library has enumerated these for you.</div> |
| </div> |
| |
| </div> |
| |
| <a name="log-user"></a> |
| <div class="scrollblock block-system"> |
| <h2>Log a System Activity</h2> |
| <pre> |
| <code> |
| ac.logSystemActivity('asking server for data.'); |
| |
| $.getJSON('https://my_endpoint/get_data', data, function(data) { |
| ac.logSystemActivity('received data from server.'); |
| $("#result").text(data.result); |
| }); |
| </code> |
| </pre> |
| </div> |
| |
| <div class="scrollblock block-dashboard"> |
| <h2>Check the Dashboard</h2> |
| |
| <div class="content"> |
| <!-- <div classstyle="width: 500px; margin: 0 auto;"> --> |
| <p>Go to</p> |
| <p><a href="http://xd-draper.xdata.data-tactics-corp.com:1337/">http://xd-draper.xdata.data-tactics-corp.com:1337</a></p> |
| <p>and see if the logs represent how your tool is being used.</p> |
| <!-- </div> --> |
| <br> |
| <img src="img/dashboard.png" alt=""> |
| </div> |
| |
| </div> |
| <div style="font-size: 12px"> |
| Inspired by <a style="font-size: 12px" href="http://rogerdudler.github.io/git-guide/">http://rogerdudler.github.io/git-guide/</a> |
| </div> |
| </body> |
| </html> |
