How to gather visitor feedback on exit

It often happens that we have a lot of visits to the site. People are interested in our product. Unfortunately, we don't know why the visitor-to-user conversion is so low. If we don't have visitors’ emails, we are limited only by the person's intention that they will leave us some feedback. It is a good idea to ask for feedback at the end of the user session.

How to do it?

We can display a form on exit and ask for user feedback. There is a good chance that we will get information about why they are not interested in our product.

Designing the popup

First, we will design a popup that we will display to the user.

<div className="exit-intent-popup">
  <div className="popup">
    <div className="close">x</div>

    <b className="heading">What made you decide not to try our product?</b>
    <p className="text">
      Please let us know what we can do to get more people like you on our
      platform.
    </p>
    <div className="form">
      <input
        id="feedback"
        name="feedback"
        type="text"
        placeholder="I have not tried it, because..."
        className="input"
      />
      <button
        className="submit"
      >
        Send feedback
      </button>
    </div>
  </div>
</div>

.exit-intent-popup {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: rgba(33, 33, 33, 0.8);
  transform: translateY(60%) scale(0);
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.exit-intent-popup.visible {
  transform: translateY(0) scale(1);
}

.popup {
  background: #5800ff;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  max-width: 400px;
  border-radius: 10px;
}

.popup .heading {
  font-size: 20px;
  color: white;
}

.popup .text {
  margin-top: 10px;
  color: rgb(150, 175, 238);
}

.popup .input {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  flex: 1;
}

.popup .submit {
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 16px;
  color: white;
  border-radius: 10px;
}

.popup .form {
  display: flex;
  width: 100%;
  flex-direction:  column;
  gap: 20px;
  margin-top: 20px;
}

.popup .close {
 cursor: pointer;
 width: 30px;
 height: 30px;
 margin: 0;
 line-height: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #3e03b2;
 border-radius: 10px;
 color: white;
 position: absolute;
 top:-10px;
 right: -10px;
}

Display a popup on the exit

Now we need to write a script that will check if the user wants to leave our site.

const mouseEvent = e => {
    if (!e.toElement && !e.relatedTarget) {
        document.removeEventListener('mouseout', mouseEvent);
        
        document.querySelector('.exit-intent-popup').classList.add('visible');
    }
};

document.addEventListener('mouseout', mouseEvent);

The above script listens for the mouseout event, if it occurs then we can display the popup. It is important to display the popup only once, so after the event occurs we remove the listening.

The popup will be displayed immediately every time you exit or refresh the page. We can improve this by adding a delay to listen for the output.

const mouseEvent = e => {
    if (!e.toElement && !e.relatedTarget) {
        document.removeEventListener('mouseout', mouseEvent);
        
        document.querySelector('.exit-intent-popup').classList.add('visible');
    }
};

setTimeout(() => {
    document.addEventListener('mouseout', mouseEvent);
}, 5000);

Adding a delay of 5 seconds will ensure that we display the popup to people who have browsed our site.

We want to display this popup only once for each visitor. Otherwise, visitors might have felt spammed. To limit the display, we will save this information in local storage.

const mouseEvent = e => {
    if (!e.toElement && !e.relatedTarget) {
        document.removeEventListener('mouseout', mouseEvent);
        localStorage.set('popup', true);
        document.querySelector('.exit-intent-popup').classList.add('visible');
    }
};

if (!localStorage.get('popup')) {
  setTimeout(() => {
      document.addEventListener('mouseout', mouseEvent);
  }, 5000);
}

Gathering feedback

What remains is to store the feedback somewhere. We can use Logspot and its event tracker for this.

When we press a button, we will fire off sending an event corresponding to a particular feedback.

This way, the data will be recorded, we will know what the person did on the site before leaving and we can do an analysis of the reason for leaving the site.

const submitFeedback = () => {
	const feedback = document.getElementById("feedback").value;
  Logspot.track({event: "Feedback", metadata: { feedback });
}


<button className="submit" onclick="submitFeedback()">
  Send feedback
</button>

Enhancing the popup

We can't rely on the user to be willing to take their time if they have already decided to leave the site.

Simplify the form to a single action, so that the visitor is willing to answer the question. An open-ended question may discourage the user from providing an answer.

The easiest way is to limit the question to 3-4 short pre-defined answers.

Let's add 4 buttons to our form. When pressed, we will send an event to Logspot and close the popup.

<div className="exit-intent-popup">
  <div className="popup">
    <div className="close">x</div>

    <b className="heading">
      Sory to see you go. What made you decide not to try Logspot?
    </b>
    <p className="text">
      Please let us know what we can do to get more people like you on our
      platform.
    </p>
    <div className="form">
      <button
        className="submit"
        onClick={() => {
          Logspot.track({
            event: "Exit Popup Feedback",
            metadata: { feedback: "I don't need it" },
          });

          document
            .querySelector(".exit-intent-popup")
            ?.classList.remove("visible");
        }}
      >
        I don't need it
      </button>
      <button
        className="submit"
        onClick={() => {
          Logspot.track({
            event: "Exit Popup Feedback",
            metadata: { feedback: "I'm using a different tool" },
          });

          document
            .querySelector(".exit-intent-popup")
            ?.classList.remove("visible");
        }}
      >
        I'm using a different tool
      </button>
      <button
        className="submit"
        onClick={() => {
          Logspot.track({
            event: "Exit Popup Feedback",
            metadata: { feedback: "Too expensive" },
          });

          document
            .querySelector(".exit-intent-popup")
            ?.classList.remove("visible");
        }}
      >
        Too expensive
      </button>
      <button
        className="submit"
        onClick={() => {
          Logspot.track({
            event: "Exit Popup Feedback",
            metadata: { feedback: "I don't see benefits" },
          });

          document
            .querySelector(".exit-intent-popup")
            ?.classList.remove("visible");
        }}
      >
        I don't see benefits
      </button>
    </div>
  </div>
</div>

A small update to styles to reduce the space between the buttons.

.popup .form {
	...
  gap: 10px;
}

We can also add tracking of opening and closing of the popup.

const exit = (e) => {
	const shouldExit =
	  [...e.target.classList].includes("exit-intent-popup") || // user clicks on mask
	  e.target.className === "close" || // user clicks on the close icon
	  e.keyCode === 27; // user hits escape
	
	if (shouldExit) {
	  Logspot.track({
	    event: "Exit popup closed",
	  });
	  document
	    .querySelector(".exit-intent-popup")
	    ?.classList.remove("visible");
	}
};

const mouseEvent = (e) => {
	if (!e.toElement && !e.relatedTarget) {
	  Logspot.track({
	    event: "Exit popup viewed",
	  });
	  document.removeEventListener("mouseout", mouseEvent);
	  localStorage.setItem("popup-shown", true);
	  document.querySelector(".exit-intent-popup")?.classList.add("visible");
	}
};

if (!localStorage.getItem("popup-shown")) {
	setTimeout(() => {
	  document.addEventListener("click", exit);
	  document.addEventListener("keydown", exit);
	  document.addEventListener("mouseout", mouseEvent);
	}, 5000);
}

Stats

After sending feedback to Logspot, we can analyze what visitors think about our product.

In the Events view, we can track what a user did before leaving the page and filling out the form.

We can also track over time how much feedback we receive and how many people have seen the popup. This will allow us to determine if we need to tune the delay in displaying the popup.

In addition, we can collect data from the entire period and see which answer is the most popular.

To do that, add a new widget with the following settings:

We will see nicely aggregate data which will tell us what’s the main reason of the leave for users.