Comment augmenter son taux de conversion : Exit Popup Javascript (+ Intégration Wordpress)

Récemment, un client m’a demandé d’installer un EXIT POPUP sur un site WordPress. Un exit popup est un morceau de code en Javascript qui s’exécute sur l’ordinateur de la personne qui voit la page Web. Il sert à capturer le trafic sortant. Si l’usager clique sur le bouton arrière ou s’il clique sur un site externe, un message promotionnel apparaît lui laissant une dernière chance de recevoir une offre promotionnelle. L’internaute a la possibilité de cliquer [OK] ou [CANCEL]. S’il clique [CANCEL], il sera redirigé ver la promotion.

J’en conviens que c’est une très mauvaise pratique d’ergonomie dans la majorité des cas. Toutefois, 98% de sa clientèle ne visite qu’une seule fois sur son site Web. La plupart du trafic généré provient de la publicité Google AdWords ou de sites de partenaires, il ne peut se permettre de perdre des conversions.

Intégrer ce code semblait simple au premier abord. Il existe des centaines d’exemples sur le Web. Avec tous ceux que j’ai essayés, j’ai rencontré énormément de problèmes:

Les liens internes (les autres pages du site Web) ne devaient pas déclencher le popup
Le script devait fonctionner sur chaque navigateur
Le script ne devait être actif que de la page d’accueil
Lorsqu’un visiteur cliquait sur le bouton Paypal pour acheter son produit, le script s’activait

Finalement, après de nombreuses horaires et de nombreux claviers brisés contre le mur, j’ai trouvé la solution! Copiez l’exemple dans le pied de page et remplacez les variables « exitsplashmessage » et « exitsplashpage » respectivement par le message et l’URL qui redirige le trafic.

Faites un lien vers cet article ou laissez un commentaire de remerciement si vous appréciez!

<script language="javascript">
    var exitsplashmessage = 'Votre message\nDeuxième ligne\nTroisième ligne';
    var exitsplashpage = 'http://www.exemple.com/page';
    </script>

    <script>
    function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); }  func(); }}}
    function addClickEvent(a,i,func) { if (typeof a[i].onclick != 'function') { a[i].onclick = func; } }
    var theDiv = '<div id="ExitSplashDiv"  style="display:block; width:100%; height:100%; position:absolute; background:#FFFFFF; margin-top:0px; margin-left:0px;" align="center">';
    theDiv = theDiv + '<iframe src="'+exitsplashpage+'" width="100%" height="100%" align="middle" frameborder="0"></iframe>';
    theDiv = theDiv + '</div>';
    theBody = document.body; if (!theBody) {theBody = document.getElementById("body"); if (!theBody) {theBody = document.getElementsByTagName("body")[0];}}
    var PreventExitSplash = false;
    function DisplayExitSplash(){ if(PreventExitSplash == false){ window.scrollTo(0,0);  PreventExitSplash=true; divtag = document.createElement("div"); divtag.setAttribute("id","ExitSplashMainOuterLayer"); divtag.style.position="absolute"; divtag.style.width="100%"; divtag.style.height="100%"; divtag.style.zIndex="99"; divtag.style.left="0px"; divtag.style.top="0px"; divtag.innerHTML=theDiv; theBody.innerHTML=""; theBody.topMargin="0px"; theBody.rightMargin="0px"; theBody.bottomMargin="0px"; theBody.leftMargin="0px"; theBody.style.overflow="hidden"; theBody.appendChild(divtag); return exitsplashmessage; } }
    var a = document.getElementsByTagName('A'); for (var i = 0; i < a.length; i++) { if(a[i].target !== '_blank') {addClickEvent(a,i, function(){ PreventExitSplash=true; });} else{addClickEvent(a,i, function(){ PreventExitSplash=false;});}}disablelinksfunc = function(){var a = document.getElementsByTagName('A'); for (var i = 0; i < a.length; i++) { if(a[i].target !== '_blank') {addClickEvent(a,i, function(){ PreventExitSplash=true; });} else{addClickEvent(a,i, function(){ PreventExitSplash=false;});}}}
    addLoadEvent(disablelinksfunc);
    disableformsfunc = function(){ var f = document.getElementsByTagName('FORM'); for (var i=0;i<f.length;i++){ if (!f[i].onclick){ f[i].onclick=function(){ PreventExitSplash=true; } }else if (!f[i].onsubmit){ f[i].onsubmit=function(){ PreventExitSplash=true; }}}}
    addLoadEvent(disableformsfunc);
    window.onbeforeunload = DisplayExitSplash;
    </script>

Source: Exitsplash.com