Convert Up To 19% Of Visitors Trying To Leave Your Lander – With One Script!

Today I’ve got a simple code trick for you that will increase your Web lander conversion rates, whilst not being too aggressive, and generally not upsetting traffic sources.

It’s currently recommended in the wider internet marketing world as one of the best ways to boost conversion rates – even Tim Ferriss is currently using it as his primary way to capture leads for his email list!

And it’s really simple to implement.

Let’s get going!

What Do I Need To Follow This Tutorial?

You’ll need to have a landing page that you want to use this technique on – pop or display ads, it doesn’t matter.

It’ll need to be for a Web rather than mobile campaign, though – this technique won’t work on mobile.

You’ll need to be able to edit the HTML code of your lander, but you don’t need any Javascript knowledge. It’s just a copy-paste job! You will need to know basic HTML and CSS to style your modal popup, however.

How Does It Work?

It’s very simple: we add a script that detects when the user’s mouse pointer leaves the window of our lander, and immediately pop up a “modal” window with an additional offer.

(That’s why it won’t work on mobile – you’d have to track where the user’s hands were! Which obviously isn’t possible. And if you’re running adult, you probably wouldn’t want to, anyway… )

Here’s a screenshot of how Tim Ferriss is currently using this approach. As soon as my mouse leaves the window of his site, this appears:

You can use the window to present a new appeal for the main offer, to present a second offer instead, or to capture email leads (my personal favourite approach and the reason I was researching this in the first place).

It’s a very effective approach – in Unbounce’s tests up to 20% of visitors who were abandoning the page converted instead.

And because it’s not popping new windows, Javascript alerts, or similar things that remove the user’s control of his browser, traffic sources are much less likely to get upset about this technique.

It uses Javascript and JQuery – however, you can put the scripts at the bottom of the page, meaning that they don’t block page loading and thus don’t slow down your lander.

Step-By-Step Instructions

You’ll just need to add some additional code to your landing page.

Firstly, in the <head> tag of your page, add the following <style> tag:

Code:
#ouibounce-modal {
  font-family: 'Open Sans', sans-serif;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#ouibounce-modal .underlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  cursor: pointer;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
#ouibounce-modal .modal {
  width: 600px;
  height: 400px;
  background-color: #f0f1f2;
  z-index: 1;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  -webkit-animation: popin 0.3s;
  animation: popin 0.3s;
}

You’ll also need to add additional styles to make your modal look attractive – however, that will depend on the main style of the page. If you need a default style for the modal, here’s one:

Code:
#ouibounce-modal .modal-title {
  font-size: 18px;
  background-color: #252525;
  color: #fff;
  padding: 10px;
  margin: 0;
  border-radius: 4px 4px 0 0;
  text-align: center;
}
#ouibounce-modal h3 {
  color: #fff;
  font-size: 1em;
  margin: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
#ouibounce-modal .modal-body {
  padding: 20px 35px;
  font-size: 0.9em;
}
#ouibounce-modal p {
  color: #344a5f;
  line-height: 1.3em;
}
#ouibounce-modal form {
  text-align: center;
  margin-top: 35px;
}
#ouibounce-modal form input[type=text] {
  padding: 12px;
  font-size: 1.2em;
  width: 300px;
  border-radius: 4px;
  border: 1px solid #ccc;
  -webkit-font-smoothing: antialiased;
}
#ouibounce-modal form input[type=submit] {
  text-transform: uppercase;
  font-weight: bold;
  padding: 12px;
  font-size: 1.1em;
  border-radius: 4px;
  color: #fff;
  background-color: #4ab471;
  border: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}
#ouibounce-modal form p {
  text-align: left;
  margin-left: 35px;
  opacity: 0.8;
  margin-top: 1px;
  padding-top: 1px;
  font-size: 0.9em;
}
#ouibounce-modal .modal-footer {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
}
#ouibounce-modal .modal-footer p {
  text-transform: capitalize;
  cursor: pointer;
  display: inline;
  border-bottom: 1px solid #344a5f;
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes popin {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-ms-keyframes popin {
  0% {
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popin {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

OK, that’s the modal styled – now, we need to add it to the page.

Just above the </body> tag, add the following HTML:

Code:
    <!-- Ouibounce Modal -->
    <div id="ouibounce-modal">
      <div class="underlay"></div>
      <div class="modal">
        <div class="modal-title">
          <h3>MODAL-TITLE</h3>
        </div>

        <div class="modal-body">
          <p>MODAL-BODY-TEXT</p>
        </div>

        <div class="modal-footer">
          <p>no thanks</p>
        </div>
      </div>
    </div>

You can add whatever HTML you like inside the “modal” div – you don’t need to have the title or the footer. I’d recommend a line or two of copy and either a button or an email capture field. You can also use Javascript in here if, for example, you want to have a button which then reveals an email submit form.

Now, we add the Javascript that makes this all work. Although the Javascript at work is simple enough (it’s just using the JQuery .mouseout event, for those of you who are coders), we’re using the OuiBounce library to do the heavy lifting, for simplicity.

Add this Javascript below the modal HTML, and just above the </body> tag.

Code:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.11/ouibounce.min.js"></script>
    <script>

      // if you want to use the 'fire' or 'disable' fn,
      // you need to save OuiBounce to an object
      var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
        aggressive: true,
        timer: 0,
        callback: function() { console.log('ouibounce fired!'); }
      });


      $('#ouibounce-modal .modal-footer').on('click', function() {
        $('#ouibounce-modal').hide();
      });

      $('#ouibounce-modal .modal').on('click', function(e) {
        e.stopPropagation();
      });
    </script>

Note – we’re loading the library from a CDN here. For speed or if you’re worried that the OuiBounce library might disappear (definitely a real concern), you could also download the OuiBounce javascript file and reference it locally.

Once you’ve added that, you’re done. Upload the file and test it out by loading your lander, then moving your mouse outside the main browser window – for example, move to close the window via the “X” button. You’ll see your modal pop up immediately.

And that’s it! Using this technique, you should be able to squeeze a few more points of ROI out of your landers – let me know how well it works for you!

And as always, if you have any questions, comments or suggestions, let me know below!

This entry was posted in compaigns, techniques, traffic source, Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.