In this article
The examples used in this article were introduced in Behavior Tags, so be sure to read that article before diving in. Well, unless you're a thrill-seeker. In that case, you should just start from the end and read backwards because that would be crazy!
A conversion funnel is simply the path a site visitor takes to an end point you've defined. The "end point" can be anything: a sign-up form, a checkout page, a survey or poll, a blog post, etc. In the phrase, conversion refers to the process of converting anonymous visitors into customers, users, subscribers, members, etc., and funnel refers to the fact that, like a real-life funnel, the number of visitors at the beginning of the process will be much larger than the number of visitors at the end of the process. And this is exactly what Lucky Orange can help with: identifying at which steps the visitor drop-off is the highest, and what you can do to mitigate it.
Note: A "conversion" doesn't necessarily need to be a sale. Every site has its own goals, so when we talk about conversion success, we're referring to whether or not a site's specific goal has been met.
To get started with conversion funnels, we need to go to our site's Dashboard. We should see the Conversion Funnels widget, but if not, we just have to click the Widgets button. Next, a window will open with a list of widgets available to us. We just have to check the Funnels box, and click Done.
Now we can create our first conversion funnel. Since we've never created a funnel before, the Conversion Funnels widget will look similar to this:
We need to click Get Started to open the Conversion Funnels dialog window.
Click the Setup Funnels button.
Now we have to come up with a name for our funnel.
Since we're focusing on the checkout process for our custom cake orders, let's just name our funnel Customer Checkout.
As you can see, we also have the option of sharing our funnel with any of our account's operators. Since we don't have any other operators attached to our account, we don't need to worry about this checkbox. Now we just click Next Step.
Next, we're presented with a drop-down box that contains the tags we made earlier. Here we can choose the tags we want to include in our funnel (tags will not be available until they receive traffic). Since the first step of our checkout process is to create an order, let's add our Custom Order tag by clicking Add Step:
Since we only created two tags earlier, we only have one more tag available to add to our funnel, and that's our Shopping Cart tag.
Here's what our funnel should look like so far:
As you may have gleaned, the more tags at our disposal, the more advanced our funnels can become. Since we're just starting out though, I'd say we're looking pretty good! We just have to click Done, and we're set.
If all went to plan, we should see a Success message like this:
Just click Okay, and we're on our way to some insightful information.
So far, the widget should look like this:
The more visitors our site gets, the more insightful the conversion funnel becomes. As of right now, our funnel isn't really all that helpful because we haven't had any visitors yet. Luckily, Big Orange has a secret little device which might prove quite useful. We have developed what we call a "time machine." With this "time machine," we'll be able to go into the future, so you can see how a conversion funnel actually works when it's populated with data. Give me a few minutes to strap on my seat belt and …
[OVERHEAD SPEAKERS] Three
[OVERHEAD SPEAKERS] Two
I'm not read…
[OVERHEAD SPEAKERS] One
[OVERHEAD SPEAKERS] Warp drive commenced. Destination: Future. ETA: 10 seconds. Engaging thrusters. Throttling googolplex adapter units. Lookahead assertion returning true. Dot matches new lines. EPOCH x AWAIT. Propulsion a-go.
[TIME MACHINE] Beep. Beep. Hum … Vrooooooooooooooooooooooooooooooom.
[OVERHEAD SPEAKERS] Destination reached. Welcome to the Future. Enjoy your stay.
Whoa. The world looks so … similar. It's like nothing's changed. Oh, great. One of the guys traveling with us just stepped on a butterfly. The sign said to stay on the trail, but does this guy listen? Of course not. I'm pretty sure stepping on a butterfly won't affect anything though, so we're probably okay. Anyway, wasn't I in the middle of a demonstration or something? Oh, that's right. Hi, again. So, we were talking about conversion funnels. Right? I think may have some jet lag or something. Anyway, where was I?
Back to the Future?
Okay, so we're in the future now. Let's check out how our conversions have been doing since we created them:
Whoa! Our funnel looks … different. What's that all about? When we were time traveling, someone must've added more tags to it. And what do you know?! We've had 100 people start the checkout process. How awesome is that? Wait a second. It looks like only 5 people actually made it to our Thank You page. How did we start with 100 people and end up with only 5 conversions? Let's figure it out.
A total of 100 people landed on our Custom Order page. Only 70 of the initial 100 people continued to the Shopping Cart page. That means 30 people either couldn't add the order to their carts, they decided they didn't want to add the order to their carts, or an amalgamation of the two possibilities occurred, and we'll never know.
If we're lucky, they only left because of a technical fault, such as a browser compatibility issue. If that's the case, we just need to diagnose and fix the problem to ensure we don't lose any future business because of it. On the other hand, if they left because the order form frustrated them, or they found it too lengthy, intrusive, or hard to understand, we would need to figure out what it was that actually "triggered" their decision. Other than reaching out to each one of them personally, there are very few ways we can do that.
This is where Lucky Orange comes in.
If we hover over the Custom Order step, a popover will let us know that we can click to see the Recordings of the 30 people who prematurely exited the checkout process:
Clicking on the Custom Order step takes us directly to our Recordings, pre-filtered, thus listing every recording with our Custom Order Behavior Tag, while automatically excluding the other steps in our funnel. It doesn't get much better than that. Anyway, let's click the first step to see what the problem seems to be.
Right away, without even starting a single Recording, we can see there's an issue. In the Browser column, we notice what seems to be a pattern of sorts:
Every single visitor who didn't make it past the first step was using Internet Explorer 8.0. Although this could be a coincidence, it's highly doubtful. For now, let's assume that it is an isolated issue in IE 8. We now need to figure out what the actual problem is. It's time to watch some Recordings.
To watch the first Recording, we just need to click the Play button in the first row of our pre-filtered Recordings. Upon watching our visitor, we see that they actually did press the form's Submit button, but nothing happened when they did so. The visitor pressed the Submit button again! Oh no. The visitor then started clicking in short bursts, almost as though he or she were trying to tell the form to "just work." Next, the user's clicks starting firing left and right. Faster and faster. We can clearly see that the user is getting exasperated. And finally … Poof! They left.
Just like that, the visitor was gone. And judging from the number of rage-clicks, he/she probably won't be coming back.
This kind of stuff probably happens all the time, but we've just never known. Seeing it firsthand can be a pretty eye-opening experience. Watching the incessant clicking and moving and swiping, you can really feel the frustration of the user.
Maybe we should move on to Recording #2. Hopefully it won't be so, er, tumultuous.
To go back, we just click the Back button in the top left corner of the screen. Once back in Recordings, let's click the Play button in the second row.
As the new Recording is starting, we notice the ferocity of this visitor's mouse clicks is much more like what we're used to: calm, controlled, single-click events. That's just the way we like 'em. Hopefully we can breathe a sigh of relief. Wait … uh oh. They just clicked Submit. Nothing happened. They clicked again. And again. This is not good. I fear the click storm cometh. Let's jump out of the Recording so we don't have to go through that again. Nobody should have to witness that kind of strife between mice and men.
Other than the fact that a user's experience can completely change in an instant, what have we learned? What do we now understand to be the reason we lost the initial 30% of visitors?
The form won't submit in Internet Explorer 8.
Before seeing the Recordings, we were completely oblivious to this information. Now? We just have to call our web developer, tell her/him what the issue is, and hopefully before too long, we'll have a form that works in all of the major browsers, and we can confidently tell people they can order online.
As you can see, we now know exactly why 30% of our visitors dropped out so early in the conversion process, we just saved countless development hours chasing down bugs, and in the future, we know to pay special attention to IE 8 when implementing new features. They say you learn something new everyday, but to learn three things? We're gonna be smart!
What's really great is that we're able to watch the Recording of every drop-off at every step of the funnel. This opens up a world of possibilities for us to really understand the people who use our site. As the great Jay-Z once said, "It gets better, so order another round" because we can also completely rearrange the steps of our funnel, allowing us to see other step combinations on the fly. And as always, this happens in real time and without a hitch.