Blogbang et les ralentissements, une solution

28/10/2008
WebDev et Design Allez aux commentaires

Alors si vous êtes adepte des pubs sur votre blog, vous connaissez très certainement la régie Blogbang qui utilise un support vidéo couplé à du javascript pour l'affichage.

Donc Blogbang c'est génial, tout le monde en met partout, Adblock passe à travers (donc parfait pour les blog de geek) et le CPC (Cout par clic) est très honorable dans la plupart des cas. Mais tout n'est pas rose au pays de la pub puisque le service connait régulièrement des ralentissements et avec presque 160 millions d'affichages par mois on peut comprendre la difficulté de garder un système fluide. Le problème c'est que l'intégration de leur pub passe par un fichier javascript hébergé sur leurs serveurs, du coup quand il rame, c'est tous les sites affiliés qui subissent des ralentissements. Au mieux c'est juste l'icône de chargement qui reste affichée indéfiniment, mais au pire le script bloque le chargement de la page et vos visiteurs doivent patienter avec une page à moitié chargée !

Le préjudice est d'autant plus grand lorsque votre script blogbang et placé au début de votre page (je parle en terme de code source, pas de design) car la page va faire une pause à cet endroit et donc empêcher le visionnage du reste du document !

Pour le confort de vos visiteurs, il est donc préférable de charger le script Blogbang en dernier, comme tout le javascript de votre page d'ailleurs (dans la mesure du possible). Évidement dans le cas de Blogbang ça pose problème étant donné que c'est l'appel du script qui provoque l'affichage des bannières ! C'est pour ça que l'on va ruser pour placer les bannières là où on le désire dans notre page tout en le chargeant en dernier ce qui évitera à votre page de se figer pendant les ralentissements.

Les plus:

  • On évite de bloquer toute la page avec le chargement du script. Donc vos visiteurs ne prendrons pas la fuite et votre site gagnera en accessibilité.

Les moins:

  • Si le script blogbang rame vraiment trop ou que vos pages sont longue à charger, vos visiteurs pourraient ne pas voir les pubs ... et donc ne pas cliquer dessus. Mais il est préférable de perdre 1 clic ou deux plutôt que de perdre des visiteurs ... non ?

Placement via javascript (jQuery)

Donc je pars du principe que vos pages embarquent déjà la librairie jQuery. A inclure entre les balises HTML <head> et </head>.

<script type="text/javascript" src="jquery.js"></script>

1. Tout d'abord on va charger le script dans une div cachée en fin de page, juste avant la fermeture de la balise "body" (</body>)

<div id="bbang">
        <script src="http://www.blogbang.com/demo/js/blogbang_ad.php?id=votreid" type="text/javascript"></script>
</div>
 

2. Ensuite un petit bout de CSS pour cacher et mettre en forme le bloc (à mettre à la fin de votre votre feuille de style)

#bbang{
        display: none;
}

3. On va utiliser jQuery pour recuperer la div cachée et l'injecter où on le désire dans notre page.

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

$(document).ready(function(){
        /*Inserer la bannière à la fin d'un element ayant l'id "pub"*/
        $("#pub").append($("#bbbang").children());
       
        /*Inserer la bannière au début d'un element ayant l'id "pub"*/
        //$("#pub").prepend($("#bbbang").children());
       
        /*Inserer la bannière à la place du contenu d'un element ayant la classe "publicite"*/
        //$(".publicite").html($("#bbbang").children());
       
        /*Inserer la bannière après un element ayant l'id "pub"*/
        //$("#pub").after($("#bbbang").children());
       
        /*Inserer la bannière avant un element ayant l'id "pub"*/
        //$("#pub").before($("#bbbang").children());
});

Je vous ai mis plusieurs exemple d'injection, utilisé celui qui vous convient le mieux (commentez et décommentez selon vos besoins). Et si vous utilisez plus d'un script blogbang par page (pas bien !), il vous faudra multiplier les div cachées en fin de code.

Placement via CSS

Pour cette méthode, il va vous falloir déjà quelques notions de CSS car il faudra l'adapter selon la structure de votre page !

Je vais donc expliquer le principe sans rentrer dans les détails.

Selon le type de site, vous devrez embarquer le script Blogbang un peu plus haut dans le code source. Par exemple si vous avez un site qui se centre sur la page, il faudra certainement embarquer le script juste avant la fin du conteneur principale au lieu du body. Ensuite il faudra appliquer un display: relative; sur ce conteneur et un display: absolute; sur la div contenant le script. Là c'est à vous de jouer avec les valeurs top/left/bottom ou right du script pour placer au mieux la bannière. Pensez aussi à laisser un espace blanc suffisant à l'emplacement réservé à la bannière, en appliquant par exemple un margin/padding/height conséquent.

Conclusions

C'est un peu du bidouillage, mais en attendant que blogbang nous propose mieux ou qu'ils investissent dans de meilleurs serveurs, ça peut dépanner !

-----

Articles relatifs

  • oziks

    Merci pour ce petit coup de main !!!
    A bientot !

  • Un grand merci pour cette astuce très pratique ! Grâce à toi, j’ai largement amélioré l’accès au contenu essentiel de mes pages !

  • Urban-Culture Magazine

    Ahah many thanks pour cette astuce. Je suis con en plus, je charge mes pubs internes en javascript, mais je n’y avais pas pensé pour blog bang.