Under Construction

Sales Funnels

"Sales Funnel" is a term used to refer to the process of taking a prospective customer and guiding them towards making a sale.

It should be noted that "funnels" can be used in many different scenarios - not just sales. For example, you can use "funnels" in documentation and knowledge bases to provide links to key locations within the current content section.

In terms of a website sales process, a sales funnel could be visualised as something like this:

– pic –

Anyone familiar with Google Analytics will be aware of their Goals Funnel which tracks end-users from their various entry points through to the end goal which is usually making a sale, etc.

As you can see, at the top of the funnel, there are many "catchment" pages where the prospective customer might start their journey to making a purchase or other favourable decision down at the bottom of the funnel.

Prerequisites

In order to make this work, you'll need:

• Theme Builder 3.0 or above
• A recent version of the [USERGUIDE:Content Formatting Macros plugin] (which should already be installed)
• A good understanding of Wiki Notation and Macros
• A good understanding of CSS

You can either place the examples shown on this page in to a wiki page then use the import macro to display that page in several locations, or create a theme layout using the Layout Manager which contains the wiki notation and then apply that layout to multiple spaces.

We will assume you're placing the wiki notation in to a panel within a layout as it'll make testing much easier.

The Problem

One of the common problems with sales funnels is that it's difficult to show concise navigation that helps the prospective customer find their way to the bottom of the funnel, or even get some idea as to where they are in the funnel.

In terms of funnels in Confluence, there is also the added complexity of the fact that the content is highly dynamic and might be spread across multiple spaces - for example, in our Theme Builder user guide, it would be nice to show funnel navigation that could help you find your way to our online shop.

When we get Theme Builder 3 installed on our own site prior to launch we'll be doing just that!

The Solution

In order to create our funnel, we're going to use Sectional Navigation.

First, we need to visualise the scale of the problem - something that's pretty easy to do using our pagetree2 macro:

By the time Theme Builder 3.0 is released, our website will contain about twice as much content.

Hey, how do you do that?

That's two pretty big sections, but luckily both of them start with a page called "Builder" - so our sectional navigation is going to use page titles. You could just as easily base the sectional navigation on labels or metadata, etc.

Step 1 - The basics!

Before we start adding in anything too complex, let's do a simple test to make sure we can at least display something – such as a logo – when we're in a section of the site relating to Theme Builder...

{builder-show:title=Builder|recurse=true}
{center}[!ADAPTAVIST:Builder^theme-builder.png!|Builder]{center}
{builder-show}

We're using the builder-show macro which only shows content if certain criteria are met. In this case, we've told it to only show it's body content if the page title is "Builder" and because the recurse parameter is set to "true" it'll scan for that title in all of the parent pages. As such, any section of a space where either the current page or one of the parent pages is called "Builder" will result in the logo being shown:

If the logo is shown, we know there is a page in the current space called "Builder" so that's what we're linking to - the Builder section in the current space.

What if we wanted it to go somewhere else?

Great! Sectional Navigation in action, albeit very basic. So, what's next?

Step 2 - Adding the navigation

To keep this step simple, we're going to use a really small sales funnel containing the following items:

• Overview - ADAPTAVIST:Builder
• Feature Tour - ADAPTAVIST:Builder - Feature Tour
• User Guide - USERGUIDE:Builder
• Buy Online - ADAPTAVIST:Builder - Price List

Not the best sales funnel, but it's enough for the purposes of this tutorial.

So, let's work on the wiki notation (the logo has been removed for now):

{builder-show:title=Builder|recurse=true}
* [Overview|ADAPTAVIST:Builder]
* [Feature Tour|ADAPTAVIST:Builder - Feature Tour]
* [User Guide|USERGUIDE:Builder]
* [Buy Online|ADAPTAVIST:Builder - Price List]
{builder-show}

And here's what it outputs in any Builder section:

• Overview
• Feature Tour
• User Guide
• Buy Online

Ok, so we've now got a bunch of links appearing in any Builder section of the site but there's a few of things that would make this so much better...

1. The whole thing would look a lot better as a graphical menu with roll-overs
2. Each of those links in itself can be a section - it would be nice to highlight which one we're in
3. A vertical menu would allow us to place this navigation in to a sidebar
4. It would be pretty neat if we could also show the next level of pages within a section (like an "accordion menu")

We don't want much, do we? This is where things get a little more complex as we introduce some extra macros. We'll go through each of these things one at a time, but be warned it's going to get more and more complex as you add more features...

Step 3 - Turning it in to a menu

We'll start with a simple horizontal menu - it's easier and it also takes up less space in our tutorial!

{builder-show:title=Builder|recurse=true}
 {menubar}
  {menuitem}[Overview|ADAPTAVIST:Builder]{menuitem}
  {menuitem}[Feature Tour|ADAPTAVIST:Builder - Feature Tour]{menuitem}
  {menuitem}[User Guide|USERGUIDE:Builder]{menuitem}
  {menuitem}[Buy Online|ADAPTAVIST:Builder - Price List]{menuitem}
 {menubar}
{builder-show}

Hmmm... That was pretty easy, eh? We've used the menubar macro and the menuitem macro to turn our basic list of links in to this:

Yay! It's looking nicer already! If you're not familiar with how to create menus, you should probably take a look at our tutorial on Creating Menus 2.x (part of Theme Builder 2.x documentation but still applicable in Theme Builder 3.x).

Before moving on to the next step, however, we're going to optimise our menu for speed using the new compound-menuitem macro - it's faster and has lots of other useful features that we'll need later:

{builder-show:title=Builder|recurse=true}
 {menubar}
  {compound-menuitem:caption=Overview|space=ADAPTAVIST|page=Builder}
  {compound-menuitem:caption=Feature Tour|space=ADAPTAVIST|page=Builder - Feature Tour}
  {compound-menuitem:caption=User Guide|space=USERGUIDE|page=Builder}
  {compound-menuitem:caption=Buy Online|space=ADAPTAVIST|page=Builder - Price List}
 {menubar}
{builder-show}

Erm, isn't there supposed to be a default parameter?

Step 4 - Highlighting the current sub-section

If you're not too fussed about highlighting the current sub-section in the menu, you can USERGUIDE:skip to Step 5.

Ok, this is where things get more complex. Highlighting the current sub-section – in a manner that won't grind your wiki to a halt – has always been a challenge. In Theme Builder 3.0 and above, there are some new macros which can make the task a little less painful...

Here's the notation:

{builder-show:title=Builder|recurse=true}
 {with-page:startPage=@self|direction=up|label=sub-section|default=@self}
  {menubar}
   {compound-menuitem:caption=Overview|space=ADAPTAVIST|page=Builder|class=b1-%withpageid%}
   {compound-menuitem:caption=Feature Tour|space=ADAPTAVIST|page=Builder - Feature Tour|class=b2-%withpageid%}
   {compound-menuitem:caption=User Guide|space=USERGUIDE|page=Builder|class=b3-%withpageid%}
   {compound-menuitem:caption=Buy Online|space=ADAPTAVIST|page=Builder - Price List|class=b4-%withpageid%}
  {menubar}
  Page ID: %withpageid%
 {with-page}
{builder-show}

We've wrapped the menu in the [USERGUIDE:with-page macro] and configured that macro so it searches for a page with label "sub-section" (label=sub-section), starting from the current page (startPage=@self) and then searching each parent page in turn until it finds the page with that label. Just in case it doesn't find a page with the label, we've told it to default to using the current page (default=@self).

You'll have to add a label of "sub-section" to all the pages that the menu links to for this to work.

We've also added the class parameter to the compound-menuitem macros - the %withpageid% gets replaced with the database ID for the current page (which we're also outputting as plain text below the menu).

So far, it looks like this:

Page ID: 23476823

We're going to use CSS to change the background colours based on the classes in the menu. Because each class is prefixed with a unique string (b1, b2, etc) we can can work out what the resulting class name will be for certain sub-sections. For example:

You can work out the Page ID of a specific sub-section by going to that page and looking at the ID displayed below the menu (you can also use the page-info macro on that page if desired, or even edit the page and look at the pageId value in the URL).

To set the background colour, we then add the following Custom CSS using the editor on the CSS Tab:

/* Sectional Navigation: Builder sub-sections */
.b1-123456, .b2-8726476234, .b3-23476823, .b4-948234 {
 background-color: yellow;
}

Note: Remember to add the .'s before the class names.

And the result:

– menubar –

As you can see, the User Guides menu item now has a yellow background.

Step 5 - Vertical menus

The best place for sales funnel navigation is in a sidebar because it coveys a sequence of steps - from "Overview "at the top to "Buy Online" at the bottom.

You'll have to add another chunk of Custom CSS to make this work, which can be found in our tutorial on [USERGUIDE:Vertical Menus]. Once that's done, simply tell the menubar macro that you want it to display vertically as follows:

...
  {menubar:vertical=true}
   ... compound menu items ...
  {menubar}
...

And here's the result:

– menu –

Step 6 - Music maestro!

In this last step we're going to add some more navigation to the current sub-section within the menu.

We do this by adding a bit of wiki markup below each compound-menuitem macro:

{builder-show:title=Builder|recurse=true}
 {menubar}
  {compound-menuitem:caption=Overview|space=ADAPTAVIST|page=Builder}
  {compound-menuitem:caption=Feature Tour|space=ADAPTAVIST|page=Builder - Feature Tour}
   {with-ancestors:startPage=@self|label=sub-section|key=ADAPTAVIST|title=Builder - Feature Tour}
    {div}{pagetree2:root=@self|showRoot=false}{div}
   {with-ancestors}
  {compound-menuitem:caption=User Guide|space=USERGUIDE|page=Builder}
   {with-ancestors:startPage=@self|label=sub-section|key=USERGUIDE|title=Builder}
    {div}{pagetree2:root=@self|showRoot=false}{div}
   {with-ancestors}
  {compound-menuitem:caption=Buy Online|space=ADAPTAVIST|page=Builder - Price List}
 {menubar}
{builder-show}

When viewed within the "Feature Tour" or "User Guide" sub-sections, a page tree of content will appear directly within the menu. Because we've not specified a default in the [USERGUIDE:with-ancestors macro], when you're outside those sub-sections you won't see the page trees.

Final Result

You can get the final markup by clicking the links below:

Wiki notation for all steps combined

Custom CSS