New Charts for Funnel Analysis

Keen is excited to share with you our newest funnel charts. Funnels are a great analysis type that can be used for customers across a wide range of applications to help answer important questions. In addition, this analysis can deliver insights to your customers on user behavior in the most impactful stages of the buyer decision process. It can also show your customers which campaigns are driving the biggest impact in converting users into their paying customers. Ultimately, this chart provides the capability to visualize key metrics such as advanced attribution or user targeting in order to improve user retention and user experience.

You can create amazing customizable funnel visualizations to display customer-facing data using keen-analysis.js and our freshly updated keen-dataviz.js libraries.

There are four main types of funnel charts:

• Funnel
• Horizontal-funnel
• Funnel-3d
• Horizontal-funnel-3d

The charts are flexible so that you can customize them to your needs. Here’s the default configuration for them, that you can use to get started with:

funnel: {
    lines: true, // separate each step with a line
    resultValues: true, // show or hide results
    percents: {
      show: false, // show and hide percents
      countingMethod: 'absolute', // 'absolute' - use the value of the first step to calculate the percentage change
                                  // 'relative' - use the value of the previous step to calculate the percentage change
      decimals: 0, // the number of decimal digits visible
    }
    hover: true, // show or hide hover effect
    marginBetweenElements: false, // show or hide spaces between elements
  }

3D funnels got one small gotcha and a few special options. Specifically, steps in 3d charts aren’t padded , so the option ‘marginBetweenSteps’ is not available. There are also a few options specific to how the 3d effect is applied:

On a standard 3d funnel (funnel-3d):

funnel: {
  marginBetweenSteps: false, // N/A
  effect3d: 'both-sides' // 'both-sides' - showing shades on both sides                      
  // 'left' - showing shades on left side
  // 'right' - showing shades on right side                 
}

In this chart effect3d can be applied on one or both sides (left/right) of the element

On horizontal 3d funnel (horizontal-funnel-3d):

funnel: {
  marginBetweenSteps: false, // N/A
  effect3d: 'both-sides' // 'both-sides' - showing shades on top and bottom             
  // 'top' - showing shades on top
  // 'right' - showing shades on bottom              
}

Here the 3d effect can only be applied to the `topʼ and ‘bottom’

Below are concrete examples of the funnel charts that illustrate their look and feels as well as how they behave.

Funnel:

Horizontal-funnel:

Funnel-3d:

Horizontal-funnel-3d:

With Keen, there’s no limit to the range of custom funnels you can build! Take advantage of this powerful analysis and get the most out of your customer-facing metrics.