Home > Programming, Servers & Scripts >

Convert Up To 19% Of Visitors Trying To Leave Your Lander - With One Script (10)

08-28-2015 11:34 AM #1 caurmen (Administrator)
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!

08-28-2015 11:47 AM #2 fjk87 (Veteran Member)

Pretty good approach to catch exit traffic. Thumbs up!

08-28-2015 01:29 PM #3 randomdude (AMC Alumnus)

Funny.. just started to play with Ouibounce an hour ago. Here are my findings:

1. It also works with ZeptoJS instead of jQuery. Actually you don't need neither of them, because is was refactored to work with raw JS (see https://github.com/carlsednaoui/ouib...ac4bf9e3c0f1f9 ). The only thing you need to do then is to rewrite the stuff for hiding the modal again. But that's maybe just something for Byte Nazis.

2. Following options are important:
aggressive: true
>> If a user sees your lander again, the modal is fired again. By default this will be prevented by a cookie.
sensitivity: 100
>> Will fire the modal faster. Makes not much difference to the default value, but 1ms too early is better than 1ms too late.
timer: 0
>> Really important. Will fire the modal immediately when the cursor reaches the viewport. Default setting causes way too much delay.

3. In your code the user can only close the modal by clicking on the footer. It's maybe more intuitive if it would close when the user clicks outside the modal. You could add this to your code:

Code:
      $('body').on('click', function() {
        $('#ouibounce-modal').hide();
      });
4. Speaking of Byte Nazis... you could delete "callback: function() { console.log('ouibounce fired!'); }" and save 57 bytes!!!111oneoneeleven

08-28-2015 02:54 PM #4 caurmen (Administrator)

@randomdude - very good stuff! I shall have to test the refactored version - less weight = better.

I deliberately pulled the option to close the modal by clicking on the body, as my feeling was that we WANT people to see our modal, and given we're not building up long-term customer relations, a bit less user-friendliness to avoid accidental or instinctive closes is probably worth it. However, yes, if you want people to be able to close the modal by clicking on the body, that code'll do it! Thanks.

I agree 100% on the options you've listed there. You need all three for AM purposes, definitely.

08-28-2015 03:49 PM #5 randomdude (AMC Alumnus)

Quote Originally Posted by caurmen View Post
I deliberately pulled the option to close the modal by clicking on the body, as my feeling was that we WANT people to see our modal, and given we're not building up long-term customer relations, a bit less user-friendliness to avoid accidental or instinctive closes is probably worth it. However, yes, if you want people to be able to close the modal by clicking on the body, that code'll do it! Thanks.
Haven't seen it this way, I guess you are right. Thanks!

09-03-2015 10:05 AM #6 chintu (Member)

How do you create landing pages like that there works of art?

09-03-2015 10:43 AM #7 caurmen (Administrator)

@chintu - Big topic! A lot of it's typography and design. (That lander isn't mine, btw, and probably cost a fortune! ).

http://practicaltypography.com/ is a great read on typography, which is surprisingly important.

http://www.amazon.com/dp/0321534050/ is the usual go-to for an overall design book. I actually don't own it, but I've seen it recommended in SO MANY places now...

Beyond that, great images well presented, and just practise.

However, do remember, you don't have to have pretty landers to make them high-converting. You wouldn't believe how ugly some profitable landers are!

06-02-2016 10:40 AM #8 luker_ge (Member)

Great post caurmen! Thank you!

I am trying to add an email catch into this Popup, but I have troubles with HTML, do you think is possible?

06-03-2016 09:40 AM #9 caurmen (Administrator)

Yup, it's definitely possible. Just copy-paste the email capture code you have into the code above, below <div class="modal">, replacing the title and body.

You should end up with:

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

YOUR EMAIL CAPTURE CODE

      </div>
    </div>

06-18-2016 05:06 PM #10 hgarg604 (Member)

I think... YolaExit plugin can help the wordpress people easily

Home > Programming, Servers & Scripts >