Created
February 26, 2014 23:29
-
-
Save wetzler/9241017 to your computer and use it in GitHub Desktop.
This gist shows you how to make a custom Keen IO funnel query using raw counts for each step (no actor property required)
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 visitors = new Keen.Metric("visited_form", { | |
analysisType: "count" | |
}); | |
var formsStarted = new Keen.Metric("form_started", { | |
analysisType: "count" | |
}); | |
var formsSubmitted = new Keen.Metric("form_submitted", { | |
analysisType: "count" | |
}); | |
buildFunnel(visitors, "Visit the form", formsStarted, "Start the form", formsSubmitted, "Submit the form", "Application Form Completions") | |
}); | |
function buildFunnel(metric1, label1, metric2, label2, metric3, label3, title) { | |
var results = [] | |
metric1.getResponse(function(response) { // Get the count for the first step | |
results[0] = response.result | |
drawFunnel(results) | |
}); | |
metric2.getResponse(function(response) { // Get the count for the second step | |
results[1] = response.result | |
drawFunnel(results) | |
}); | |
metric3.getResponse(function(response) { // Get the count for the third step | |
results[2] = response.result | |
drawFunnel(results) | |
}); | |
function drawFunnel(arrayOfSteps) { | |
if (results.length >= 3) { | |
var formattedResult = | |
{ | |
"result":[ | |
arrayOfSteps[0], | |
arrayOfSteps[1], | |
arrayOfSteps[2] | |
], | |
"steps":[ | |
{ | |
"event_collection": label1, | |
"actor_property":"none" | |
}, | |
{ | |
"event_collection": label2, | |
"actor_property":"none" | |
}, | |
{ | |
"event_collection": label3, | |
"actor_property":"none" | |
} | |
] | |
} | |
var s1 = new Keen.Step("placeholder"); | |
var s2 = new Keen.Step("placeholder"); | |
var s3 = new Keen.Step("placeholder"); | |
var appFunnel = new Keen.Funnel([s1, s2, s3], {}); | |
//Create a Funnel Chart visualization for that funnel. | |
var appFunnelChart = new Keen.FunnelChart(appFunnel, { | |
height: 300, | |
width: 900, | |
title: title, | |
color: "#00afd7" // "#afd700","#f35757","#d700af", "#6f79a2", "#d79400", "#43d700" | |
}); | |
appFunnelChart.draw(document.getElementById("funnel"), formattedResult); | |
} | |
else { | |
console.log("waiting for more queries to finish") | |
} | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment