Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This gist uses Keen IO conversion funnels to generate a line chart showing conversion over time. In this example we'll chart the number of video viewing sessions that make it past the 25%, 50%, 75%, and 100% mark in the video. The end result is a multiline chart with one line for each view marker (25%, 50%, 75%, 100%). This chart helps you answe…
Keen.onChartsReady(function(){
var dataPointsInChart = 7 // Number of days in your line chart
calculateConversionTrend(dataPointsInChart, "conversionLineChart")
function calculateConversionTrend(dataPointsInChart, div) {
var dataForLineChart = []
var i = 0
while (i < dataPointsInChart) {
// Start & end date for each data point in the chart
var startDate = new Date();
startDate.setDate(startDate.getDate() - dataPointsInChart + i) // for weekly analysis use dataPointsinChart*7 and i*7
startDate.setHours(0, 0, 0)
var endDate = new Date(startDate)
endDate.setDate(endDate.getDate() + 1) // for weekly analysis use "+ 7"
// Funnel steps used for calculating conversion. The number that made it to step 2 divided by the number in step 1 will give you the conversion percentage for that time period. E.g. 25% of viewing sessions made it past 50%.
var step1 = new Keen.Step("progress", { // Raw number of sessions for this video
filters: [{
property_name: "video.video_name",
operator: "eq",
property_value: videoName
}, ],
timeframe: {
start: startDate,
end: endDate
}
});
var step2 = new Keen.Step("progress", { // Sessions that made it to 50%
filters: [{
property_name: "video.video_name",
operator: "eq",
property_value: videoName
}, {
property_name: "progress",
operator: "eq",
property_value: 25
}],
timeframe: {
start: startDate,
end: endDate
}
});
var step3 = new Keen.Step("progress", { // Sessions that made it to 50%
filters: [{
property_name: "video.video_name",
operator: "eq",
property_value: videoName
}, {
property_name: "progress",
operator: "eq",
property_value: 50
}],
timeframe: {
start: startDate,
end: endDate
}
});
var step4 = new Keen.Step("progress", { // Sessions that made it to 50%
filters: [{
property_name: "video.video_name",
operator: "eq",
property_value: videoName
}, {
property_name: "progress",
operator: "eq",
property_value: 75
}],
timeframe: {
start: startDate,
end: endDate
}
});
var step5 = new Keen.Step("progress", { // Sessions that made it to 50%
filters: [{
property_name: "video.video_name",
operator: "eq",
property_value: videoName
}, {
property_name: "progress",
operator: "eq",
property_value: 100
}],
timeframe: {
start: startDate,
end: endDate
}
});
//Instantiate a new Keen.Funnel for those steps.
var myFunnel = new Keen.Funnel([step1, step2, step3, step4, step5], {
actorProperty: "session.id"
});
myFunnel.getResponse(function(response) { // Run the funnel query
dataForLineChart.push({
"value": [
{
"progress": "25%",
"result": response.result[1] / response.result[0]
},
{
"progress": "50%",
"result": response.result[2] / response.result[0]
},
{
"progress": "75%",
"result": response.result[3] / response.result[0]
},
{
"progress": "100%",
"result": response.result[4] / response.result[0]
}
],
"timeframe": {
"start": response.steps[1].timeframe["start"],
"end": response.steps[1].timeframe["end"]
}
})
if (dataForLineChart.length == dataPointsInChart) {
var title = "Percentage of sessions that make it past a certain viewpoint"
// Need to sort data for line chart!
dataForLineChart.sort(function(x, y) {
date1 = new Date(x.timeframe["start"]);
date2 = new Date(y.timeframe["start"]);
return date1 - date2;
})
drawMyLineChart(dataForLineChart, "daily", div, title)
}
});
i++
}
}
function drawMyLineChart(data, interval, div, title) {
// The final formatting required so that the result can be processed by the Keen.MultiLineChart draw method.
var formattedResult = {
result: data
}
// Create a Series object so that it can be referenced by the draw method.
// This is kind of a hack since we are passing in our own result object and not really querying the collection specified here.
// The "placeholder" is used instead of a collection name, since this is not used.
var placeholderSeries = new Keen.Series("placeholder", {
interval: interval,
groupBy: "progress"
})
var placeholderLineChart = new Keen.MultiLineChart(placeholderSeries, {
title: title,
showLegend: true,
});
placeholderLineChart.draw(document.getElementById(div), formattedResult);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment