Tout intégrateur aura tôt ou tard à faire à un script de pub, ces bouts de javascript qui viennent faire un gros document.write() au milieu de votre belle page codée avec amour. Oui, c'est dur, mais vous êtes bien souvent obligé de le mettre...
Alors bien sûr vous pouvez tout de suite renoncer à avoir une bonne note avec YSlow, mais n'abandonnez pas pour autant, on va essayer de limiter les dégâts.
Comme conseillé dans les bonnes pratiques, il faut essayer de mettre les scripts de pub en bas de page. Pas toujours simple, parfois il faut tricher un peu pour y arriver.
Généralement ce genre de script se présente de cette façon :
<script type="text/javascript"><!--
document.write('<scr'+'ipt type="text/javascript" src="http://ads.server.com/ads.js"></scri'+'pt>');
//--></script>
Ce script va généralement lui même faire un document.write() d'un autre script qui lui même fera un autre document.write() de la publicité (et avec un peu de chance, aucun de ces 3 éléments ne seront hébergés sur le même domaine). Oui, bonjour le bordel juste pour afficher une pub.
Voila, ça c'est notre ennemi, maintenant comment obtenir ce que l'on veut sans sacrifier les performances ?
===Le positionnement en CSS===
Suivant les pubs, il est parfois possible de les positionner en absolue dans la page via CSS.
L'idée est de placer nos scripts de pub dans des conteneurs en fin de page puis de positionner nos conteneurs en CSS.
[...]
<div id="ads-megabanner"><!-- Script de pub --></div>
<div id="ads-skyscrapper"><!-- Script de pub --></div>
</body>
</html>
Et le CSS :
#ads-megabanner { left: 10px; position:absolute; top:10px; }
#ads-skyscrapper { position:absolute; right:10px; top:10px; }
De cette façon nos 2 pubs seront placées en haut de la page. Simple et efficace.
===Le déplacement dans le DOM===
Il y a des cas où le positionnement en absolue n'est pas possible, dans ce cas il existe une technique un peu plus tordue mais tout aussi efficace. Il s'agit d'exécuter le script de pub en bas de page puis de déplacer le code généré à l'endroit approprié dans la page.
Pour cela il me faut un conteneur à l'endroit où je souhaite faire apparaitre ma pub.
[...]
<div id="ads-container"></div>
[...]
Ma pub, quand à elle, est placée en bas de page, comme dans l'exemple précédent. A ceci pret qu'elle est suivie d'un bout de script qui va la déplacer dans mon conteneur :
[...]
<div id="ads-carre"><!-- Script de pub --></div>
<script type="text/javascript">document.getElementById('ads-container').appendChild(document.getElementById('ads-carre'));</script>
</body>
</html>
J'obtiens alors comme résultat :
[...]
<div id="ads-container">
<div id="ads-carre"><!-- Script de pub --></div>
</div>
[...]
Pour éviter un mauvais affichage si le script est vraiment lent à charger, on peut appliquer un CSS afin de la masquer avant le déplacement :
#ads-carre { display:none; }
#ads-container #ads-carre { display:block; }
Voila, au final nos publicités ne bloquent plus le chargement et sont bien placées dans la page.
Page d'exemple pour l'intégration des pubs
Quelques petits conseils pour finir :
- Placez vos javascripts juste avant les scripts de pubs, sinon ils seront bloqués jusqu'à ce ces derniers ne chargent complètement.
- N'utilisez pas de fonctions avec des noms génériques dans vos pages, préfixez-les si possible. Parfois les pubs insèrent leurs propres fonctions, qui peuvent écraser les vôtres. J'ai vu des setCookies(), readCookies() ou encore popup() (manque de pot, j'avais déjà une fonction popup() sur le site, du coup plus aucune ne marchait).
- Testez ces techniques avant des les appliquer sur votre site. Je n'ai rencontré aucun problème avec mes régies pub et il n'y a pas de raison qu'il y en ai, mais les scripts de pub sont tellement tordus...
