Créer un popunder

Edit du 22/07/2013 : Mise à jour de la fonction pour Chrome 28


Edit du 03/07/2013 : Mise à jour de la fonction pour Chrome 27


Qu’est-ce qu’un popunder ?

Un popunder est une fenêtre popup qui apparaît en-dessous de toutes les autres. Il est par conséquent moins intrusif (Il ne dérange pas la navigation courante) qu’un pop-up.

Quels sont les problèmes rencontrés ?

La quasi totalité des navigateurs intègre maintenant des systèmes anti-popup, qu’il faut contourner pour pouvoir en afficher. Chrome et Firefox, de par leur cycle de mises à jour fréquentes, modifient régulièrement leurs réglages, rendant l’utilisation de ces techniques de plus en plus fastidieuses.
Chrome particulièrement semble lutter contre ces pratiques et développe des parades à chacune de ses mises à jour.

Où trouver un script fonctionnel ?

Je ne saurai personnellement pas développer un script à chaque modification des navigateurs. C’est pour ça que j’ai décidé de chercher un script déjà développé, dans un secteur que j’estime très fort pour développer des encarts publicitaires plus ou moins intrusifs : les sites pornographiques. Rendons à César ce qui appartient à César : le script que je vais vous présenter est une modification du script de popunder développé par LiveJasmin, un site de chat avec hôtesses, qui investit beaucoup d’argent dans la publicité.

Le script en question

function popunder(url, width, height, name) {
        //      On désactive le popunder sur les sites mobiles
        if (typeof window.DetectMobileLong == 'function' && typeof window.DetectTierTablet == 'function') {
                if(DetectMobileLong() || DetectTierTablet() || document.location.href.match(/test_mobile/))
                        return false;
        }
       
        //      On effectue un traitement différent pour Chrome
        if(navigator.userAgent.match('Chrome')) {
                //      Ouverture de la nouvelle page (Simulation d'un Shift+Clic)
                var link        =       document.createElement("a"),
                sEvent          =       document.createEvent("MouseEvents");
                link.href       =       url;
                document.body.appendChild(link);
                sEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
                link.dispatchEvent(sEvent);
                link.parentNode.removeChild(link);
               
                //      Retour à la page principale
                var link        =       document.createElement("a"),
                sEvent          =       document.createEvent("MouseEvents");
                link.href       =       'http://files.opodo.fr/tests/close.html',
                document.body.appendChild(link);
                /* Simulation d'un Ctrl+clic pour afficher de nouveau la page d'origine */
                sEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
                link.dispatchEvent(sEvent);
                link.parentNode.removeChild(link);
                return true;
        }
       
        var props               =       'width=' + width + ', height=' + height, name;
        if (navigator.userAgent.indexOf('opera') !== -1) {
                props   +=      ', scrollbars=no, menubar=no, location=no, directories=no';
        }
        window.open("javascript:window.focus()", "_self", "");
        ghost   =       window.open(url, '_blank', props);
        try {
                ghost.blur();
        } catch (e) {}
        ghost.window.open('about:blank').close();
        return self.focus();
}

Le script crée la fonction popunder(), qui utilise quatre arguments :

  • url : l’adresse de la page à afficher
  • width et height : respectivement les largeur et hauteur de la popunder
  • name_popunder : le nom de la fenêtre (N’est pas affiché).

J’y ai ajouté une fonctionnalité pour qu’il ne se déclenche pas sur des périphériques mobiles. Cette fonctionnalité nécessite le script développé par MobileESP. L’absence de ce script ne génèrera pas d’erreur, mais déclenchera le popunder sur les périphériques mobiles.

J’y ai ajouté une fonctionnalité pour Chrome uniquement, qui simule une ouverture de nouvel onglet. Comme elle est imparfaite (Ouverture d’une nouvelle page plutôt que d’un véritable pop-up, elle n’est pas appliquée aux autres navigateurs pour lesquels l’ancienne version du script fonctionne parfaitement).

Ouvrir le popunder sans action particulière

J’ai été amené à développer un script pour lancer le popunder au bout d’un certain nombre de clics n’importe où sur les pages du site. Un cookie est enregistré avec le nombre de clics. Il est possible de choisir un temps au bout duquel il est possible de déclencher un nouveau popup.

Ce script supplémentaire nécessite l’utilisation de jQuery, ainsi que du plugin jQuery Cookie.

function capped_popunder(url, width, height, name_popunder, nb_clicks, hours_cookie) {
        var     cookie_name                     =       name_popunder;
        var     cookie_click_name       =       name_popunder+'_clicks';
        var date        =       new Date();
        date.setTime(date.getTime() + (hours_cookie * 60 * 60 * 1000));
        if(!jQuery.cookie(cookie_name)) {
                //      On récupère le nombre de clics déjà effectués
                var clicks      =       $.cookie(cookie_click_name);
                if(!clicks)
                        clicks  =       0;
                       
                $('body').mouseup(function() {
                        clicks++;
                        $.cookie(cookie_click_name, clicks, {expires: date, path: '/'});
                        if(clicks == nb_clicks) {
                                $.cookie(cookie_name, 'true', {expires: date, path: '/'});
                                popunder(url, width, height, name_popunder);
                        }
                        return true;
                });
        }
}

La fonction capped_popunder() [1] utilise 6 arguments :

  • Les quatre premiers sont les mêmes que pour la fonction popunder(). Le paramètre name_popunder servira également à nommer le cookie qui sera apposé.
  • nb_clicks permet de définir au bout de combien de clics sur le site le popunder se déclenchera (1 pour le déclencher au premier clic, etc)
  • hours_cookie détermine le temps minimum en heures entre deux affichages de popunder.

Notes

[1Le capping signifie qu’un même utilisateur ne verra un contenu qu’un certain nombre de fois dans un temps donné.

6 commentaires sur "Créer un popunder"

Pierre Bunk

Social-traître !

Adriano

Pour utiliser dans onclick event, il faut ajouter :
sEvent.cancelBubble = true ;

Claudius06

Bonjour,

Merci pour ce script qui parait plus intéressant que les autres du même type !
En revanche, pourriez-vous m’éclairer sur deux points :
- comment se fait l’appel du script ?
- où et comment insérer l’adresse de la page à ouvrir ?
Merci.

Marc

Salut Claudius, et merci de ton retour !
Le lancement du premier script peut se faire n’importe quand, par exemple sur l’évènement onClick d’un lien.
Le second (Qui déclenche le premier au bout d’un certain nombre de clics n’importe où dans la page), se lance au chargement de la page, de la manière suivante :

$(document).ready(function()
capped_popunder(...)
) ;

L’url de la popunder à appeler est le premier argument de chacune des deux fonctions.

Attention cependant : cela fait longtemps que je n’ai pas maintenu ce script à jour, tu devrais sans doute rechercher quelque chose de plus récent (Les navigateurs luttent contre ces manipulations), comme celui-ci, par exemple : https://github.com/hpbuniat/jquery-popunder

Claudius06

Marc, merci pour ta réponse et tes conseils. J’ai regardé rapidement le script que tu m’as conseillé mais le tiens (le premier) m’intéresse dans le sens où on peut le désactiver sur les mobiles et l’adapter à certains navigateurs.

Je reviens un instant sur l’appel de l’url : si je comprends bien
function popunder(url, width, height, name) devient par exemple
function popunder(’http://www.google.fr’, 900, 500, name), mais lorsque je fais ça sur Dreamweaver, je me retrouve avec l’avertissement d’une erreur de syntaxe qui « pourrait empêcher le script de s’éxécuter normalement ».

Je ne comprends pas aussi cette ligne dans la fonctionnalité Chrome
link.href = url ;
et celle-ci dans le script de retour à la page principale :
ink.href = ’http://files.opodo.fr/tests/close.html’,

Je précise que l’idée est d’installer ce script sur un template Prestashop. Pour ce faire, j’ai inclus l’appel de cette façon entre les balises head du header.tpl :

<script type="text/javascript" src="{$js_dir}popunder.js"></script>

Si j’ai bien compris, il faut y ajouter l’événement OnClick par exemple ?

Merci encore !

Laissez votre commentaire