keen-botkit
Version:
Bot Kit Integration for Keen IO
364 lines (320 loc) • 19.2 kB
HTML
<html>
<head>
<title>Analytics API for Botkit By Keen IO</title>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@keen_io" />
<meta name="twitter:title" content="Analytics API for Botkit by Keen IO" />
<meta name="twitter:description" content="Botkit middleware to automatically track messages using Keen IO, enabling you to use Keen IO's custom analytics API." />
<meta name="twitter:image" content="https://keen.github.io/keen-botkit/assets/img/keen-botkit.png" />
<meta name="twitter:image:alt" content="Keen IO Botkit Middleware" />
<meta property="og:title" content="Analytics API for Botkit by Keen IO" />
<meta property="og:site_name" content="Keen IO" />
<meta property="og:url" content="https://keen.github.io/keen-botkit/" />
<meta property="og:image" content="https://keen.github.io/keen-botkit/assets/img/keen-botkit.png" />
<meta property="og:description" content="Botkit middleware to automatically track messages using Keen IO, enabling you to use Keen IO's custom analytics API." />
<meta name="description" content="Botkit middleware to automatically track messages using Keen IO, enabling you to use Keen IO's custom analytics API." />
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/737368/747986/css/fonts.css">
<link rel="stylesheet" type='text/css' href="assets/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type='text/css' href="assets/css/keen-static.css" />
<link rel="stylesheet" type='text/css' href="assets/css/keen-botkit.css" />
<link rel="stylesheet" type='text/css' href="assets/lib/highlightjs/styles/github.css" />
</head>
<body>
<div class="masthead hero">
<div class="container">
<header class="navbar navbar-fixed-top navbar-static">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".keen-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="https://keen.io?s=gh-botkit" class="navbar-brand" target="_blank">
<svg class="keen-logo" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 594 128" enable-background="new 0 0 594 128" xml:space="preserve">
<g class="icon">
<polygon class="red" fill="#FFFFFF" points="59.811,73.135 66.859,85.34 49.275,115.863 140.807,115.863 147.814,128 28.045,128"></polygon>
<polygon class="green" fill="#FFFFFF" points="59.873,24.297 91.504,79.242 77.413,79.242 59.826,48.781 13.958,128 0,128"></polygon>
<polygon class="blue" fill="#FFFFFF" points="133.769,103.674 70.364,103.674 77.418,91.432 112.586,91.432 66.915,12.1 73.9,0"></polygon>
</g>
<path class="text" fill="#FFFFFF" d="M246.12 94.163L216.29 57.373l27.704-27.484c1.199-1.195 1.782-2.475 1.782-3.91 0-2.906-2.496-5.453-5.341-5.453 -1.869 0-3.128 0.887-4.262 1.896l-43.89 44.996V26.094c0-3.07-2.498-5.568-5.568-5.568 -2.96 0-5.461 2.549-5.461 5.568v72.01c0 3.02 2.501 5.57 5.461 5.57 3.07 0 5.568-2.498 5.568-5.57V81.145l16.181-16.178 29.093 36.231c1.15 1.643 2.655 2.477 4.474 2.477 3.021 0 5.573-2.551 5.573-5.57C247.604 96.301 246.896 95.151 246.12 94.163zM309.211 71.702c0-15.379-9.767-30.948-28.434-30.948 -16.456 0-29.348 13.941-29.348 31.743v0.23c0 18.1 13.108 31.748 30.49 31.748 9.265 0 16.353-2.836 22.95-9.162 1.104-0.967 1.713-2.248 1.713-3.609 0-2.631-2.192-4.771-4.887-4.771 -1.466 0-2.503 0.719-3.195 1.293 -4.886 4.5-10.083 6.596-16.354 6.596 -10.378 0-18.167-7.188-19.675-18.006h41.627C306.917 76.815 309.211 74.52 309.211 71.702zM280.55 50.182c11.501 0 16.667 9.162 17.751 18.117h-35.831C263.956 57.574 271.266 50.182 280.55 50.182zM374.018 71.702c0-15.379-9.767-30.948-28.434-30.948 -16.454 0-29.344 13.941-29.344 31.743v0.23c0 18.1 13.107 31.748 30.486 31.748 9.263 0 16.351-2.836 22.95-9.164 1.103-0.965 1.71-2.246 1.71-3.607 0-2.631-2.193-4.771-4.889-4.771 -1.464 0-2.501 0.719-3.193 1.293 -4.886 4.5-10.082 6.596-16.352 6.596 -10.374 0-18.163-7.189-19.677-18.006h41.626C371.723 76.815 374.018 74.52 374.018 71.702zM345.357 50.182c11.497 0 16.662 9.162 17.749 18.117h-35.83C328.762 57.574 336.072 50.182 345.357 50.182zM414.734 40.754c-8.037 0-14.492 3.127-19.233 9.309V46.9c0-3.062-2.396-5.461-5.455-5.461 -2.945 0-5.342 2.449-5.342 5.461v51.319c0 3.059 2.396 5.455 5.455 5.455 3.045 0 5.342-2.346 5.342-5.455V68.271c0-10.312 6.874-17.514 16.717-17.514 9.606 0 15.342 6.291 15.342 16.826v30.635c0 3.059 2.398 5.455 5.461 5.455 2.999 0 5.348-2.396 5.348-5.455V65.414C438.369 50.434 429.092 40.754 414.734 40.754zM491.424 20.525c-2.958 0-5.457 2.549-5.457 5.568v72.01c0 3.02 2.499 5.57 5.457 5.57 3.072 0 5.572-2.498 5.572-5.57v-72.01C496.996 23.023 494.496 20.525 491.424 20.525zM552.307 19.725c-23.504 0-41.916 18.613-41.916 42.373v0.229c0 24.03 17.923 42.149 41.689 42.149 23.507 0 41.92-18.613 41.92-42.377v-0.227C594 37.844 576.076 19.725 552.307 19.725zM582.627 62.098v0.229c0 18.133-13.035 31.807-30.32 31.807 -17.411 0-30.541-13.773-30.541-32.036v-0.227c0-18.131 13.032-31.803 30.314-31.803C569.209 30.068 582.627 44.137 582.627 62.098z"></path>
</svg>
</a>
<a href="https://keen.io" class="navbar-brand hidden navbar-floating-logo" target="_blank">
<svg class="keen-logo" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 594 128" enable-background="new 0 0 594 128" xml:space="preserve">
<g class="icon">
<polygon class="red" fill="#F35757" points="59.811,73.135 66.859,85.34 49.275,115.863 140.807,115.863 147.814,128 28.045,128"></polygon>
<polygon class="green" fill="#49C5B1" points="59.873,24.297 91.504,79.242 77.413,79.242 59.826,48.781 13.958,128 0,128"></polygon>
<polygon class="blue" fill="#00AFD7" points="133.769,103.674 70.364,103.674 77.418,91.432 112.586,91.432 66.915,12.1 73.9,0"></polygon>
</g>
<path class="text" fill="#879CAF" d="M246.12 94.163L216.29 57.373l27.704-27.484c1.199-1.195 1.782-2.475 1.782-3.91 0-2.906-2.496-5.453-5.341-5.453 -1.869 0-3.128 0.887-4.262 1.896l-43.89 44.996V26.094c0-3.07-2.498-5.568-5.568-5.568 -2.96 0-5.461 2.549-5.461 5.568v72.01c0 3.02 2.501 5.57 5.461 5.57 3.07 0 5.568-2.498 5.568-5.57V81.145l16.181-16.178 29.093 36.231c1.15 1.643 2.655 2.477 4.474 2.477 3.021 0 5.573-2.551 5.573-5.57C247.604 96.301 246.896 95.151 246.12 94.163zM309.211 71.702c0-15.379-9.767-30.948-28.434-30.948 -16.456 0-29.348 13.941-29.348 31.743v0.23c0 18.1 13.108 31.748 30.49 31.748 9.265 0 16.353-2.836 22.95-9.162 1.104-0.967 1.713-2.248 1.713-3.609 0-2.631-2.192-4.771-4.887-4.771 -1.466 0-2.503 0.719-3.195 1.293 -4.886 4.5-10.083 6.596-16.354 6.596 -10.378 0-18.167-7.188-19.675-18.006h41.627C306.917 76.815 309.211 74.52 309.211 71.702zM280.55 50.182c11.501 0 16.667 9.162 17.751 18.117h-35.831C263.956 57.574 271.266 50.182 280.55 50.182zM374.018 71.702c0-15.379-9.767-30.948-28.434-30.948 -16.454 0-29.344 13.941-29.344 31.743v0.23c0 18.1 13.107 31.748 30.486 31.748 9.263 0 16.351-2.836 22.95-9.164 1.103-0.965 1.71-2.246 1.71-3.607 0-2.631-2.193-4.771-4.889-4.771 -1.464 0-2.501 0.719-3.193 1.293 -4.886 4.5-10.082 6.596-16.352 6.596 -10.374 0-18.163-7.189-19.677-18.006h41.626C371.723 76.815 374.018 74.52 374.018 71.702zM345.357 50.182c11.497 0 16.662 9.162 17.749 18.117h-35.83C328.762 57.574 336.072 50.182 345.357 50.182zM414.734 40.754c-8.037 0-14.492 3.127-19.233 9.309V46.9c0-3.062-2.396-5.461-5.455-5.461 -2.945 0-5.342 2.449-5.342 5.461v51.319c0 3.059 2.396 5.455 5.455 5.455 3.045 0 5.342-2.346 5.342-5.455V68.271c0-10.312 6.874-17.514 16.717-17.514 9.606 0 15.342 6.291 15.342 16.826v30.635c0 3.059 2.398 5.455 5.461 5.455 2.999 0 5.348-2.396 5.348-5.455V65.414C438.369 50.434 429.092 40.754 414.734 40.754zM491.424 20.525c-2.958 0-5.457 2.549-5.457 5.568v72.01c0 3.02 2.499 5.57 5.457 5.57 3.072 0 5.572-2.498 5.572-5.57v-72.01C496.996 23.023 494.496 20.525 491.424 20.525zM552.307 19.725c-23.504 0-41.916 18.613-41.916 42.373v0.229c0 24.03 17.923 42.149 41.689 42.149 23.507 0 41.92-18.613 41.92-42.377v-0.227C594 37.844 576.076 19.725 552.307 19.725zM582.627 62.098v0.229c0 18.133-13.035 31.807-30.32 31.807 -17.411 0-30.541-13.773-30.541-32.036v-0.227c0-18.131 13.032-31.803 30.314-31.803C569.209 30.068 582.627 44.137 582.627 62.098z"></path>
</svg>
</a>
</div>
<nav class="navbar-collapse collapse keen-navbar-collapse" role="navigation">
<ul class="nav navbar-nav main-nav">
<!-- <li><a href="https://keen.io/blog/101269629091/charts-on-grids-responsive-dashboard-templates-with?s=gh-botkit" target="_blank">About</a></li> -->
<li><a href="https://github.com/keen/keen-botkit" target="_blank">Source Code</a></li>
<!-- <li><a href="https://github.com/keen/keen-botkit?s=gh-botkit" target="_blank">Docs</a></li> -->
<li><a href="https://keen.io/support?s=gh-botkit" target="_blank">Support</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://keen.io/signup?s=gh-botkit" class="btn navbar-btn" target="_blank">Get Started Free</a></li>
</ul>
</nav>
</div>
</header>
<h1 id="content-start">Analytics for Botkit by Keen IO</h1>
<p class="lead">Take control of how you track and analyze your key bot metrics.</p>
<div class="hero-btn-group">
<a class="btn hero-btn secondary" href="https://github.com/keen/keen-botkit" target="_blank">Source on Github</a>
<a class="btn hero-btn primary" href="https://keen.io/signup?s=gh-botkit" target="_blank">Get Started Free</a>
</div>
<iframe src="http://ghbtns.com/github-btn.html?user=keen&repo=keen-botkit&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=keen&repo=keen-botkit&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</div>
</div>
<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<h2 class="text-center">Easy Integration</h2>
<p>
Plug Keen-Botkit right into Botkit in seconds with great defaults and customizable tracking options. <a href="https://github.com/keen/keen-botkit" target="_blank">Learn More.</a>
</p>
</div>
<div class="col-xs-12 col-sm-4">
<h2 class="text-center">Full Control</h2>
<p>
Stream key usage data with complete control over how and where your data is displayed.
</p>
</div>
<div class="col-xs-12 col-sm-4">
<h2 class="text-center">Scalable Analytics</h2>
<p>
Powered by a scalable analytics platform, you are free to focus on what matters most: making your product better.
</p>
</div>
</div>
</div>
<div class="container-fluid platforms">
<div class="row">
<div class="col-xs-12 text-center">
<h2>Supported Platforms</h2>
<ul class="list-unstyled list-inline">
<li><img class="img-responsive" src="assets/img/platforms/slack.png" /></li>
<li><img class="img-responsive" src="assets/img/platforms/twilio.png" /></li>
<li><img class="img-responsive" src="assets/img/platforms/messenger.png" /></li>
</ul>
</col>
</div>
</div>
</div>
<div class="container value-prop">
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 text-center">
<!-- <h1>Your Key Bot Metrics All in One Place</h1> -->
<p class="lead">
Powered by <a href="https://keen.io/?s=gh-botkit" target="_blank">Keen IO</a>, you are able to use the power of the platform to understand how many messages are going through your system, run <a href="https://keen.github.io/cohorts/" target="_blank">cohorts</a> to measure retention, set up <a href="https://keen.io/docs/data-analysis/intro-to-funnel-analysis/?s=gh-botkit" target="_blank">funnels</a> to measure task completion, and any key metric unique to your bot. See how to <a href="https://github.com/keen/keen-botkit" target="_blank">get started</a>.
</p>
</div>
</div>
</div>
<hr />
<div class="container examples">
<h1 class="text-center">Example Metrics</h1>
<h3 class="text-center">Messages Per Hour</h3>
<p class="text-center">The heartbeat of your bot. Messages it receives per hour.</p>
<div class="row example">
<div class="col-xs-12 col-sm-6 code">
<pre>
<code class="js javascript">var messagesPerHourQuery = new Keen.Query("count", {
event_collection: 'messages_received',
interval: "hourly",
timeframe: {
start: "2016-12-25T00:00:00.000Z",
end: "2017-01-05T23:59:59.000Z"
}
});
var messagesPerHourChart = new Keen.Dataviz()
.el(document.getElementById("metric-01"))
.height(300)
.chartOptions({
chartArea: {
left: '10%',
width: '90%',
top: '10%',
height: '80%'
},
isStacked: true,
legend: { position: 'none' }
})
.prepare();
client.run(messagesPerHourQuery, function(err, res) {
if (err) throw err;
// Render visualization
messagesPerHourChart
.data(res)
.render();
});
</code>
</pre>
</div>
<div class="col-xs-12 col-sm-6 chart">
<div id="metric-01"></div>
</div>
</div>
<h3 class="text-center">Busiest Usage Hours</h3>
<p class="text-center">Calculating at what times users message your bot the most.</p>
<div class="row example">
<div class="col-xs-12 col-sm-6 code">
<pre>
<code class="js javascript">var messagesPerHourQuery = new Keen.Query("count", {
event_collection: 'messages_received',
interval: "hourly",
timeframe: {
start: "2016-12-25T00:00:00.000Z",
end: "2017-01-05T23:59:59.000Z"
}
});
var hourlyMessagesChart = new Keen.Dataviz()
.el(document.getElementById('metric-02'))
.chartType('columnchart')
.height(300)
.chartOptions({
chartArea: {
left: '10%',
width: '90%',
top: '10%',
height: '80%'
},
isStacked:true,
legend: { position: 'none' }
})
.prepare(); // start spinner
client.run(messagesPerHourQuery, function(err, res) {
if (err) throw('Error!');
// Normalize the dates
var now = new Date();
now.setMinutes(0);
now.setSeconds(0);
var nestedData = d3.nest()
.key(function(d) {
// Use the hour of day as the key
return new Date(d.timeframe.start).getHours();
})
.rollup(function(leaves) {
var total = d3.sum(leaves, function(d) { return d.value; });
// Use the average number of messages at a given hour as the value
return {
denominator: leaves.length,
total: total,
avg: total / leaves.length
};
})
.entries(res.result);
// Format your data so it can be drawn as an areachart
var result = nestedData.map(function(d){
var start = new Date(now);
start.setHours(d.key);
var date = new Date(start.getTime() + (60 * 60 * 1000));
date.setMinutes(0);
date.setSeconds(0);
return {
value: d.value.avg,
timeframe: {
start: start.toISOString(),
end: date.toISOString()
}
};
});
// Render visualization
hourlyMessagesChart
.parseRawData({ result: result })
.render();
})
</code>
</pre>
</div>
<div class="col-xs-12 col-sm-6 chart">
<div id="metric-02"></div>
</div>
</div>
<h3 class="text-center">Most Active Teams</h3>
<p class="text-center">An easy way to keep track of your best customers. Note that you can pass in a more human friendly<br/>way to describe the team than their Slack ID using the <a href="https://github.com/nemo/keen-botkit#payload" target="_blank">payload modifier</a> functionality.</p>
<div class="row example">
<div class="col-xs-12 col-sm-6 code">
<pre>
<code class="js javascript">var popularTeamsQuery = new Keen.Query("count", {
event_collection: 'messages_received',
group_by: 'team',
timeframe: {
start: "2016-12-25T00:00:00.000Z",
end: "2017-01-05T23:59:59.000Z"
}
});
var popularTeamsChart = new Keen.Dataviz()
.el(document.getElementById("metric-03"))
.chartType('columnchart')
.height(300)
.chartOptions({
chartArea: {
left: '10%',
width: '90%',
top: '10%',
height: '80%'
},
isStacked:true,
legend: { position: 'none' }
})
.prepare(); // start spinner
// Run the query
client.run(popularTeamsQuery, function(err, res) {
if (err) throw err;
// Render visualization
popularTeamsChart
.data(res)
.render();
});
</code>
</pre>
</div>
<div class="col-xs-12 col-sm-6 chart">
<div id="metric-03"></div>
</div>
</div>
</div>
<div class="cta">
<h1>
Take control of your analyitcs with Keen IO and Botkit.
</h1>
<div class="hero-btn-group">
<a class="btn hero-btn secondary" href="https://github.com/keen/keen-botkit" target="_blank">Source on Github</a>
<a class="btn hero-btn primary" href="https://keen.io/signup?s=gh-botkit" target="_blank">Get Started Free</a>
</div>
</div>
<div class="footer">
<div class="container">
<div class="love">
<p>Made with ♡ in San Francisco</p>
<p>© 2012–2016 <a href="https://keen.io?s=gh-botkit">Keen IO</a></p>
</div>
</div>
</div>
<script type="text/javascript" src="assets/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/lib/highlightjs/highlight.pack.min.js"></script>
<script type="text/javascript" src="assets/lib/keen-js/dist/keen.min.js"></script>
<script type="text/javascript" src="assets/lib/d3/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="assets/js/navbar.js" charset="utf-8"></script>
<script type="text/javascript" src="assets/js/keen.botkit.js" charset="utf-8"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- <script type="text/javascript" src="assets/js/meta.js"></script> -->
</body>
</html>