Mittwoch, 12. April 2017

Exit Popups in APEX: How to get more from your visitors

How many of your visitors buy something, make a request, subscribe to a newsletter, or click on a link of an affiliated partner to buy something? 3%? This would mean that 97% of your visitors will leave the site again without doing anything that is conducive to your sales. This potential should be taken in advantage by you!

Most visitors have a maximum of two options:

  1. A desired action to buy something, register, fill out a contact form or something similar.
  2. Exit the page

But what about the visitors, who doesn't take any action ? They leave the site again and are no longer accessible. As an operator, it can only be hoped that they will change their minds and come back again.

very simple and effective method to generate more conversions is :  Exit Popups.

   How to make Exit Popup in Oracle APEX

1- Create a Region in the Global Page (Page 0) add a static ID for the Region. For example exitpopup 

2- Choose for this Region the Template and Position "Inline Dialog"

3- Customize your Inline Dialog with this Css if you want.


#P1_MY_ITEM {
  font-size:1.4rem;
  padding:.7rem;
  border:1px solid rgb(204,204,204);
  border-radius:3px;
  background:white;
}

.ui-dialog--inline {
  height:300px !important;
  box-shadow:rgba(0,0,0,.1) 0 2.4rem 1.6rem !important;
  border-radius:1.4rem !important;
}

#exitpopup { text-align:center; }

#exitpopup h1 {
  margin-top:0px;
  padding-top:0px;
}

#exitpopup p { text-align:left; }

.ui-dialog-titlebar {
  -webkit-flex-shrink:0;
  -ms-flex-negative:0;
  flex-shrink:0;
  display:none !important;
}

Pierre {
  color:red;
  font-size:2rem;
}

#exitpopup_bg .t-DialogRegion-body {
  font-size:1.6rem;
  line-height:3.3rem;
  color:rgb(112,112,112);
}

.t-Report-report tr:last-child .t-Report-cell { border-bottom:0px solid rgb(230,230,230); }

.t-Report-cell,
.t-Report-colHead {
  border:none;
  border-right-width:0;
}

img { border-radius:60%; }

#IMAGE { display:none; }

4- Create on Change Dynamic Action

var $this = apex.jQuery(this.affectedElements);

$(document).mousemove(function(e) {

    $('#exitpopup').css('left', (window.innerWidth / 2 - $('#exitpopup').width() / 2));
    $('#exitpopup').css('top', (window.innerHeight / 2 - $('#exitpopup').height() / 2));
    if (typeof(Storage) !== 'undefined') {

        if (localStorage.getItem('showRegisterPopup') == 'false' || localStorage.getItem('showRegisterPopup') == null) {
            if (e.pageY <= 5) {

                // Show the exit popup

                openModal("exitpopup_bg");

            }
        }
    }

});

5-  Add another Dynamic Action to Close the Inline Dialog if the User don't need it like so

closeModal("exitpopup_bg")
localStorage.setItem('showRegisterPopup', 'true'); 

6- Demo



































Keine Kommentare:

Kommentar veröffentlichen