Created
May 27, 2014 21:53
-
-
Save wetzler/19465e0e283e0f25d605 to your computer and use it in GitHub Desktop.
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 50% mark in the video.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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: 50 | |
}], | |
timeframe: { | |
start: startDate, | |
end: endDate | |
} | |
}); | |
//Instantiate a new Keen.Funnel for those steps. | |
var myFunnel = new Keen.Funnel([step1, step2], { | |
actorProperty: "session.id" | |
}); | |
myFunnel.getResponse(function(response) { // Run the funnel query | |
var percentage = response.result[1] / response.result[0] | |
dataForLineChart.push({ | |
"value": percentage, | |
"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 50%" | |
// 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 | |
}) | |
var placeholderLineChart = new Keen.LineChart(placeholderSeries, { | |
title: title, | |
showLegend: false, | |
}); | |
placeholderLineChart.draw(document.getElementById(div), formattedResult); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment