Adding a Survey—Attempt One
November 14th 2008
I was listing to a teleconference call with Perry Marshall and a guest (sorry, don’t remember who the guest was.)
(Here’s a little tangent: If there’s just a single thing I can recommend to people starting out, it’s to get on Perry’s Marshall’s mailing list. He’s a Google Adwords guru, but even if you’re not using Google Adwords, the general marketing advice I’ve gotten from reading his emails has been invaluable. I recommend signing up for his free 5-day Google Adwords email, which will put you on his list. Then if you ever get an email about a conference call (they’re usually free), SIGN UP FOR IT! The information and advice they share on these calls is absolutely amazing.)
Anyway, this speaker said you’ll be way ahead of the game if you can find out what your potential customer wants. This sounds pretty obvious, but very few people do it.
So my mission is to set up an exit survey using a hover. A hover is like a popup but isn’t blocked by popup detectors because it is part of the page itself. My plan is to only show this survey to people who are leaving my site without buying anything. This should give me valuable insight into why I’m not getting any sales.
Now, before you get too excited about this post, I’ll tell you right up front: it didn’t work. It’s impossible to create a professional-looking survey that pops up when they leave without buying. Why? You’ll have to skip ahead to Step 3 below to find out.
But since I already started documenting the steps, I’m going to leave the rest of this post intact so you can follow along with my reasoning. And also because I’m too lazy to delete the stuff I’ve already written.
So, first thing I did was come up with survey questions. On the discussion with Perry Marshall, the guest recommended these questions:
What were you hoping to find today?
Did this website provide what you needed? Why or why not?
How hard is it to find that?
What caused you to go looking for that today?
Are there any other comments you like to share?
The first thing I did was try to find free hover survey programs. Couldn’t find any. The closest I could find was one that makes the visitor type in a password to take the survey (unless you pay for their premium version).
But I want the visitor to have as few clicks as possible. I want the questions to show up as soon as they try to leave, and I only want them to click a submit button.
So I’m going to build it by hand.
Step One: Create a webpage that has the form
First I created a test webpage with my form on it. To create my survey, I used CgiEcho, a free form handler that comes in the CGI Center of my cpanel.
Here’s my test survey page:
Step Two: Put the Survey into a Hover Box
To do this, I’m going to use a free online hover box creator.
I copied/pasted my test webpage survey into the hover box content. When I ran the preview I noticed that the text of the questions is right up against the edge of the hover box, so I added a div with spacing around it.
Here’s the code (I ***ed out my form action file):
I changed these default settings:
Y target: 30 (otherwise the submit button is below the fold).
Title font: Verdana
Hover ad slide in speed: 800
Content area background color: F8EDEC (to better match the color of my site)
My hover box looks like this:
Step Three: Activating the Hover When Visitor Leaves Without Buying
This is the most crucial, and one of the key reasons I’m using Zen Cart. Since I have full access to my html, I can edit the body tag to make this happen.
Ok, so here’s what I discovered in my attempt to make this work.
My goal was to have this survey “hover” its way in (so pop-up blockers won’t detect it) when the user leaves my site without buying something.
I thought there would be lots of software out there to do this, but I hardly found any. There’s a good reason. It is very problematic to do this correctly.
You Can’t Only Show Survey When Visitor Leaves Site
In general, you need to put something in the body tag of your page which calls your function to show the survey. But, the trick is that you only want to show this to someone when they leave your site, NOT when they leave the page but stay on your site.
How annoying would this be: your visitor is reviewing a product page, then he clicks on your shipping policy and he gets something that says “Why are you leaving without giving us a try?”
I did find a post that tells how to do this somewhat. Here’s an example.
The above example uses the onunload event which fires your code after the visitor has navigated away from the page but before it disappears. You set a variable “exited” to 0 (false) when the user clicks on an internal link so that the hover won’t show; otherwise set it to 1 (true) for external links.
Problem 1: You have to edit every single way the user can get off your page so that you can set the exited variable. You may be able to do this for internal links on a very simple webpage, but what if you have a complex site such as with a shopping cart? The user can click on a product, click on a policy page, click on an image, logo, etc. It’s a lot of work to try to catch all of these instances. And what if the user clicks on the back button, a bookmark, or closes the browser? Some ways a visitor will leave your site, you have no control over.
Problem 2: There is no way to cancel the original unload request. So what I found is that when I tried to do the above for a dhtml hover box, it would flash and then disappear as the page unloaded because it is part of the page itself. There was no way to get the hover survey to stay around long enough for the user to fill out the survey. The above might work ok for a popup because it is a different page and when your original page unloads, the popup is left behind. But I don’t want a popup that will be blocked.
So this led me to the second technique: using onbeforeunload. This is similar to the onunload, but onbeforeunload can be set so that the unload is canceled.
But there are two problems with the onbeforeunload.
Problem 1: Not all browsers support it.
Problem 2: When you use it, it automatically brings up a dialog window. The first line says “Are you sure you want to navigate away from this page?” and the last line says “Press OK to Continue or Cancel to stay on the current page.”
This text cannot be altered in any way. However, you can pass it text that it includes in the middle.
But I think this text will be confusing. Here’s an example:
Have you spotted the problem? The text that can’t be changed (the first and last line) are from the point of view of someone who has initiated an unload. So “Ok” means “Yes, I want to leave the page.” But I’ve asked the visitor to take a survey. So most likely, the visitor will think, “Yes, I’ll take the survey” and will click OK, resulting in the window closing.
And even with the beforeOnUnload, you still have the same problem; having it only fire when someone leaves your site, not leaves your page but stays on your site.
Alas. Well…this was very educational. And now I know why there is no software to do this. (I did actually find one post where a very techie guy said he developed something that did this correctly by creating a hidden window that constantly checks to see if you’re still on the site. If you’re not, it pops up the survey. I wish this guy would market this into a product).
I decided instead to
(Here’s a little tangent: If there’s just a single thing I can recommend to people starting out, it’s to get on Perry’s Marshall’s mailing list. He’s a Google Adwords guru, but even if you’re not using Google Adwords, the general marketing advice I’ve gotten from reading his emails has been invaluable. I recommend signing up for his free 5-day Google Adwords email, which will put you on his list. Then if you ever get an email about a conference call (they’re usually free), SIGN UP FOR IT! The information and advice they share on these calls is absolutely amazing.)
Anyway, this speaker said you’ll be way ahead of the game if you can find out what your potential customer wants. This sounds pretty obvious, but very few people do it.
So my mission is to set up an exit survey using a hover. A hover is like a popup but isn’t blocked by popup detectors because it is part of the page itself. My plan is to only show this survey to people who are leaving my site without buying anything. This should give me valuable insight into why I’m not getting any sales.
Now, before you get too excited about this post, I’ll tell you right up front: it didn’t work. It’s impossible to create a professional-looking survey that pops up when they leave without buying. Why? You’ll have to skip ahead to Step 3 below to find out.
But since I already started documenting the steps, I’m going to leave the rest of this post intact so you can follow along with my reasoning. And also because I’m too lazy to delete the stuff I’ve already written.
So, first thing I did was come up with survey questions. On the discussion with Perry Marshall, the guest recommended these questions:
What were you hoping to find today?
Did this website provide what you needed? Why or why not?
How hard is it to find that?
What caused you to go looking for that today?
Are there any other comments you like to share?
The first thing I did was try to find free hover survey programs. Couldn’t find any. The closest I could find was one that makes the visitor type in a password to take the survey (unless you pay for their premium version).
But I want the visitor to have as few clicks as possible. I want the questions to show up as soon as they try to leave, and I only want them to click a submit button.
So I’m going to build it by hand.
Step One: Create a webpage that has the form
First I created a test webpage with my form on it. To create my survey, I used CgiEcho, a free form handler that comes in the CGI Center of my cpanel.
Here’s my test survey page:
Step Two: Put the Survey into a Hover Box
To do this, I’m going to use a free online hover box creator.
I copied/pasted my test webpage survey into the hover box content. When I ran the preview I noticed that the text of the questions is right up against the edge of the hover box, so I added a div with spacing around it.
Here’s the code (I ***ed out my form action file):
<div style="padding: 10px;"> <b>Would you help us improve our website by giving us some feedback?</b><br /><br /> <FORM METHOD="POST" ACTION="http://www.critterwheels.com/cgi-bin/cgiecho/exitsurvey.txt"> What were you hoping to find today?<br /> <textarea NAME="hopingtofind" rows="2" cols="50"> </textarea> <br /><br /><br /> Did this website provide what you needed? Why or why not? <br /> <textarea NAME="foundonwebsite" rows="2" cols="50"> </textarea> <br /> <br /><br /> How hard is it to find that? <br /> <textarea NAME="howhardtofind" rows="2" cols="50"> </textarea> <br /> <br /><br /> What caused you to go looking for that today? <br /> <textarea NAME="whylooking" rows="2" cols="50"> </textarea> <br /> <br /><br /> Are there any other comments you like to share? <br /> <textarea NAME="other" rows="2" cols="50"> </textarea> <br /> <br /> <INPUT TYPE="submit" value="Send Survey"> </FORM></div>
I changed these default settings:
Y target: 30 (otherwise the submit button is below the fold).
Title font: Verdana
Hover ad slide in speed: 800
Content area background color: F8EDEC (to better match the color of my site)
My hover box looks like this:
Step Three: Activating the Hover When Visitor Leaves Without Buying
This is the most crucial, and one of the key reasons I’m using Zen Cart. Since I have full access to my html, I can edit the body tag to make this happen.
Ok, so here’s what I discovered in my attempt to make this work.
My goal was to have this survey “hover” its way in (so pop-up blockers won’t detect it) when the user leaves my site without buying something.
I thought there would be lots of software out there to do this, but I hardly found any. There’s a good reason. It is very problematic to do this correctly.
You Can’t Only Show Survey When Visitor Leaves Site
In general, you need to put something in the body tag of your page which calls your function to show the survey. But, the trick is that you only want to show this to someone when they leave your site, NOT when they leave the page but stay on your site.
How annoying would this be: your visitor is reviewing a product page, then he clicks on your shipping policy and he gets something that says “Why are you leaving without giving us a try?”
I did find a post that tells how to do this somewhat. Here’s an example.
exited = 0;
function showhoversurvey() {
if(exited) {... }
}
<body onunload="showhoversurvey()">
<a href="internal.html" onclick="exited=0">Internal link</a>
<a href="http://www.example.com" onclick="exited=1">External link</a>The above example uses the onunload event which fires your code after the visitor has navigated away from the page but before it disappears. You set a variable “exited” to 0 (false) when the user clicks on an internal link so that the hover won’t show; otherwise set it to 1 (true) for external links.
Problem 1: You have to edit every single way the user can get off your page so that you can set the exited variable. You may be able to do this for internal links on a very simple webpage, but what if you have a complex site such as with a shopping cart? The user can click on a product, click on a policy page, click on an image, logo, etc. It’s a lot of work to try to catch all of these instances. And what if the user clicks on the back button, a bookmark, or closes the browser? Some ways a visitor will leave your site, you have no control over.
Problem 2: There is no way to cancel the original unload request. So what I found is that when I tried to do the above for a dhtml hover box, it would flash and then disappear as the page unloaded because it is part of the page itself. There was no way to get the hover survey to stay around long enough for the user to fill out the survey. The above might work ok for a popup because it is a different page and when your original page unloads, the popup is left behind. But I don’t want a popup that will be blocked.
So this led me to the second technique: using onbeforeunload. This is similar to the onunload, but onbeforeunload can be set so that the unload is canceled.
But there are two problems with the onbeforeunload.
Problem 1: Not all browsers support it.
Problem 2: When you use it, it automatically brings up a dialog window. The first line says “Are you sure you want to navigate away from this page?” and the last line says “Press OK to Continue or Cancel to stay on the current page.”
This text cannot be altered in any way. However, you can pass it text that it includes in the middle.
But I think this text will be confusing. Here’s an example:
Have you spotted the problem? The text that can’t be changed (the first and last line) are from the point of view of someone who has initiated an unload. So “Ok” means “Yes, I want to leave the page.” But I’ve asked the visitor to take a survey. So most likely, the visitor will think, “Yes, I’ll take the survey” and will click OK, resulting in the window closing.
And even with the beforeOnUnload, you still have the same problem; having it only fire when someone leaves your site, not leaves your page but stays on your site.
Alas. Well…this was very educational. And now I know why there is no software to do this. (I did actually find one post where a very techie guy said he developed something that did this correctly by creating a hidden window that constantly checks to see if you’re still on the site. If you’re not, it pops up the survey. I wish this guy would market this into a product).
I decided instead to
- Put in a Live Chat box so it’s easy for someone to ask me a question. I found some free software that I’ll put in another post.
- Put a really prominent banner at the top asking someone to fill out a survey. If it is clicked on, it will open a new window (but still not a popup.)
RSS
