Webmaster Hub > Charger les pubs aprés le reste de la page / Ajax

Version complète: sur le forum Webmaster Hub : Charger les pubs aprés le reste de la page / Ajax - JQuery?

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > AjaX et JavaScript

gobi

lundi 6 octobre 2008 à 18:08

Salut!

Pendant chargement de ma page (php) il y a des "lags" lors de la récupération des informations sur les sites extérieurs (pubs flash notamment) et alors l'affichage se fait en 2-3 morceaux, la bannière puis les différentes colonnes, et cela peut prendre plusieurs secondes, entre 3 et 10 secondes

avant que la pub apparaisse.

J'ai essayé en Ajax avec jQuery , ça donne ça :

CODE

$(document).ready(function(){
    $.ajax({
        url: './includes/ads_topAjax.php',
        dataType: "html",
        timeout: 1000,
        error: function(){
            $('#header_ads').html('Error');
        },
        success: function(result){
            $('#header_ads').html(result);
        }
     });
})

Le fichier ads_topAjax.php que j'appele renvoie le code javascript pour loader ma pub que voila :

CODE

<?php
    echo "<script type='text/javascript'></script><noscript><a href='http://www.xxx.com/openx/www/delivery/ck.php?n=a9f3f884&cb=333333' target='_blank'><img src='http://www.xxx.com/openx/www/delivery/avw.php?zoneid=1&cb=333333&n=a9f3f884' border='0' alt='' /></a></noscript>";
?>

Le problème c'est que quand vient le temps de charger la pub elle fait disparaitre le reste de la page et apparait sur un fond blanc.

Pensez-vous que c'est du au code javascript ci-dessus, fournis par mon logiciel de ads (openx ou openads) ?

Merci d'avance.

Slyghter

mardi 7 octobre 2008 à 14:48

Bonjour,

Il me semble que le DataType est le type de donnée qu'attend ton ajax en entrer via les

CITATION

data: mavariable

.

Donc essaye deja d'enlever ton dataType et dit nous ce que cela donne.
Ensuite si tu colle directement le code donné par ton "logiciel de ads" dans ton html, tu à un bon résultat ?

Ben S.

mardi 16 décembre 2008 à 10:04

Je remonte ce sujet aujourd'hui car j'ai exactement le même problème sur mon site.
Gobi, est-ce que tu as trouvé une solution à ces instructions "document.write" qui "effacent" tout le site ?

Je commence tout juste mes recherches sur Google, je n'ai pour l'instant pas trouvé de solution concrète.
Apparemment, le salut pourrait venir d'une surcharge de la méthode write pour l'adapter à notre cas, mais c'est franchement bourrin et pas super maintenable et je ne me sens pas assez au fait en javascript pour garantir que ma fonction fonctionnera sur tous les navigateurs...

SVP, si vous avez des pistes, ou mieux des solutions à me proposer, n'hésitez pas : je dois trouver une solution rapidement !

Merci.

captain_torche

mardi 16 décembre 2008 à 10:21

Selon ce site, il semblerait que le document.write ne possède pas le même comportement selon qu'il est appelé au chargement de la page (remplacement du contenu), ou dans la page même (ajout d'un contenu). Ton problème semble venir de là.

Ben S.

mardi 16 décembre 2008 à 10:31

Ahh, en effet, c'est exactement ça...
Mais alors comment je peux me débrouiller ? je ne peux pas demander aux régies pub de modifier leur code....

captain_torche

mardi 16 décembre 2008 à 10:33

Tu copies-colles le code dans ta page et ça devrait fonctionner, non ?

Ben S.

mardi 16 décembre 2008 à 10:39

Bah non : c'est justement, c'est ce que je veux éviter !
Ma bannière est tout en haut mon site, donc au début du code HTML.
Or, lorsqu'un navigateur charge du javascript, il ne charge aucun autre élément du site.
Dans mon cas, la pub de la régie est de plus en plus souvent suuuuppper longue à s'afficher.... donc l'affichage de mon site est également bloqué suuuuuuppper longtemps.

Voilà pourquoi je tente de charger le code (HTML+javascript) fourni par la régie en toute fin de code HTML, et en asynchrone pour ne plus avoir de lenteurs.

captain_torche

mardi 16 décembre 2008 à 10:45

Woops, au temps pour moi.
Si tu utilises jquery, il va falloir que tu modifies légèrement le code de ta régie pour remplacer les document.write par $('#tondiv').append('ton code html');

Ben S.

mardi 16 décembre 2008 à 10:50

bah oui, j'ai bien peur que j'en sois réduit à cette proposition...

Ben S.

mardi 16 décembre 2008 à 11:04

Aïe.... C'était trop beau pour être vrai :
Malheureusement, leur code fait lui-même un

CODE

document.write ('<scr'+'ipt language="javascript" src="http://......."></scr'+'ipt>');

Je comptais faire un replace à la volée, pour ne pas avoir à réécrire chaque code de ma régie, comme ceci :

CODE

$.ajax({
        data: "id_campagne=<?php echo $id_campagne; ?>",
        url: "inc.skyscraper.php",
        cache: false,
        success: function(data){
            $(".large_banniere").append(data.replace('document.write(','$(".large_banniere").append('));
        }
    });

Mais puisque le code ajoute une autre balise <script> avec une source distante, je ne peux pas les empêcher de remettre dans cette nouvelle balise script des "document.write"... ma solution ne fonctionne donc pas...

captain_torche

mardi 16 décembre 2008 à 11:07

Tu as essayé ?
Parce qu'à partir du moment où tu as placé le code dans le HTML, que le script appelé fasse lui-même un document.write ne fait pas vraiment de différence, logiquement.

Ben S.

mardi 16 décembre 2008 à 11:13

oui, j'ai essayé :
mon replace fonctionne bien au début et transforme bien le

CODE

document.write('<scr'+'ipt src="..." [...]');

CODE

$(".large_banniere").append('<scr'+'ipt src="..." [...]');

Mais, le code du script ainsi ajouté, contient lui-même des document.write visiblement, et donc ça continue de tout faire planter, car ceux-ci ne sont pas remplacés... je ne sais pas si c'est possible d'ailleurs.

Kioob

mardi 16 décembre 2008 à 12:01

En tous cas perso je n'ai pas trouvé de solution magique à ce gros problème. Le code des régies est complètement obsolète et cela pose effectivement beaucoup de soucis dès lors qu'on essaye de faire les choses proprement

Ben S.

mardi 16 décembre 2008 à 12:05

je suis bien d'accord.
Je suis en train de tester une version qui créé une iframe en lui affectant comme attribut 'src', l'URL de mon script qui va écrire le code la régie.
J'ai l'espoir que le document.write considère qu'il n'a pas besoin de faire de document.open puisqu'il est dans une frame.... ça à l'air de fonctionner, mais j'ai encore quelques soucis... à régler...

Ben S.

mardi 16 décembre 2008 à 15:12

Arf, j'arrive à quelque chose qui fonctionne, mais il y a 2 petits détails qui m'embêtent :
Voici le code javascript à la fin de mon code HTML :

CODE

ma page inc.skyscraper.php est grossomodo ceci :

CODE

<div id="skyscraper">

<div id="VwP20978Div" name="VwP20978Div" style="display:block;border:0;margin:0;padding:0;"></div>

<script language="javascript">

VwP20978PubClickthruURL="none";

VwP20978PubImpressionURL="none";

VwP20978Random=Math.random();

VwP20978D=false;if(document.location.search.indexOf("P20978D")!=-1){VwP20978D=true;}

document.write('<scr'+'ipt language="javascript" src="http://...../script_160_600.js?'+VwP20978Random+'"></scr'+'ipt>');

</script>

<noscript>
<A HREF="http://....." TARGET="unicastTarget"><img src="http://....jpg" width="160" height="600" border="0"></A>
</noscript>

</div>

Question 1 : En l'état, ça ne fonctionne pas : il faut que j'entoure le code de ma régie dans mon inc.skyscraper.php par les balises <pre></pre>... vous avez une idée de pourquoi ?

Question 2 : avec les <pre></pre> ça fonctionne, mais j'ai une grosse marge intérieure dans mon iframe à gauche et en haut, ce qui me cache une partie de ma bannière, ou alors m'impose des barres de défilement. Même avec les styles, sur le <pre> ou sur l'iframe, je n'arrive pas à dégager ces marges...

Une idée ?

captain_torche

mardi 16 décembre 2008 à 15:16

Pourquoi ne pas mettre de balises <html>, <head> et <body> dans ton iframe ?

Ben S.

mardi 16 décembre 2008 à 15:24

Hmm, bah ça veut pas marcher...
avec ou sans les balises HTML, body, head, title

quoique... sans le head et title, c'est beaucoup mieux !!
je n'ai plus qu'une petite marge à gauche et en haut de 5 à 10 px environs,... je vais fouiller en triturant les styles css...

Ben S.

mardi 16 décembre 2008 à 15:35

Ca fonctionne !!! merci captain torche !!
En forçant le padding et le margin à zéro pour le body, je eux afficher ma bannière comme il faut.
J'ai un gros coup de chance sur les liens : ils ne pointent pas dans l'iframe mais bien vers une nouvelle fenêtre... heureusement.
Il faut que je vois pour l'autre version de ma bannière et les autres types de bannières (flash statique ou image statiques) si je peux m'en tirer de la même manière...

C'est déjà une bonne avancée... il faut aussi que je teste sous IE et et sous Mac....

Ben S.

mardi 16 décembre 2008 à 15:47

Je continue pour tenir au courant les personne qui seraient dans le même cas que moi :
J'arrive finalement à intégrer la balise <head> (sans title) sans problème.
J'en ai besoin pour y intégrer la balise suivante :

CODE

Ce qui permet d'enlever la bordure aux images de mes bandeaux en gif ou jpeg, car le style initialement prévu en CSS ne s'applique plus dans l'iframe.

Ben S.

mardi 16 décembre 2008 à 16:37

Et pour finir, puisque comme d'habitude, sous IE, ça fait pas comme chez tout le monde, il faudra retirer les barres de défilement et les bordures de l'iframe de façon un peu détournée.

Ca me donne les scripts suivants :
- En javascript à la fin du fichier HTML :

CODE

    var sk = document.createElement('iframe');
    sk.src = "inc.publicite.php?id_campagne=<?php echo $id_campagne_skyscraper; ?>";
    sk.frameborder=0;
    sk.scrolling="no";
    $(".skycrapper").append(sk);

- En php, l'appel du code de la bannière

CODE

<html style="margin:0;padding:0;">
<head><style type="text/css">img {border:0;}</style></head>
<body style="background-color:#000;border:0;margin:0;padding:0;">
<?php
// Ici, le code PHP qui va rechercher le code de la bannière.
// Ce code peut contenir des instructions javascript du type document.write('Bonjour'), etc...
?>
</body>
</html>

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.