2010-09-22 32 views
9

Nous utilisons OpenX pour diffuser des annonces sur plusieurs sites. Cependant, si le serveur OpenX a des problèmes, il bloque le chargement des pages sur ces sites. Je préfère que les sites échouent gracieusement, c'est-à-dire que je charge les pages sans les annonces et que je les remplisse lorsqu'elles deviennent disponibles.Comment empêcher OpenX de bloquer le chargement de la page?

Nous utilisons single page call d'OpenX, et nous donnons la taille explicite de divs en CSS afin qu'ils puissent être mis en page sans leur contenu, mais en chargeant toujours le chargement des pages de blocs de script. Existe-t-il d'autres bonnes pratiques pour accélérer les pages avec OpenX?

+0

voir http://stackoverflow.com/questions/3106782/openx-aysnc-tags –

Répondre

1

OpenX a une documentation sur la façon de rendre leur charge tags de manière asynchrone: http://docs.openx.com/ad_server/adtagguide_synchjs_implementing_async.html

Je l'ai testé et il fonctionne bien en cours Chrome/Firefox.

Il faut un ajustement manuel de leur code d'annonce. Leur exemple de la façon dont les balises d'annonce devraient finir par:

<html> 
<head></head> 

<body> 

Some content here. 

Ad goes here. 

<!-- Preserve space while the rest of the page loads. --> 

<div id="placeholderId" style="width:728px;height:90px"> 

<!-- Fallback mechanism to use if unable to load the script tag. --> 

<noscript> 
<iframe id="4cb4e94bd5bb6" name="4cb4e94bd5bb6" 
src="http://d.example.com/w/1.0/afr?auid=8&target= 
_blank&cb=INSERT_RANDOM_NUMBER_HERE" 
frameborder="0" scrolling="no" width="728" 
height="90"> 
<a href="http://d.example.com/w/1.0/rc?cs= 
4cb4e94bd5bb6&cb=INSERT_RANDOM_NUMBER_HERE" 
target="_blank"> 
<img src="http://d.example.com/w/1.0/ai?auid=8&cs= 
4cb4e94bd5bb6&cb=INSERT_RANDOM_NUMBER_HERE" 
border="0" alt=""></a></iframe> 
</noscript> 
</div> 

<!--Async ad request with multiple parameters.--> 

<script type="text/javascript"> 
    var OX_ads = OX_ads || []; 
    OX_ads.push({ 
     "slot_id":"placeholderId", 
     "auid":"8", 
     "tid":"4", 
     "tg":"_blank", 
     "r":"http://redirect.clicks.to.here/landing.html", 
     "rd":"120", 
     "rm":"2", 
     "imp_beacon":"HTML for client-side impression beacon", 
     "fallback":"HTML for client-side fallback" 
    }); 
</script> 

<!-- Fetch the Tag Library --> 

<script type="text/javascript" src="http://d.example.com/w/1.0/jstag"></script> 

Some other content here. 

</body> 
</html> 
+1

Hey, c'est une bonne nouvelle! Je ne travaille plus avec OpenX depuis plus de 2 ans maintenant, mais c'est bon de voir qu'ils rattrapent des performances comme celle-ci. – pjmorse

5

Nous chargeons nos annonces dans les iframes pour éviter le problème que vous rencontrez. Nous avons la même taille que div et l'iframe, avec l'iframe pointant vers une page qui contient uniquement l'extrait d'annonce (vous pouvez passer la zone et les autres options requises en tant que paramètres à cette page).

acclamations

Lee

+0

Est-ce que l'annonce du chargement dans un iframe ont des inconvénients tels que la perte de le contexte? (c'est-à-dire que l'annonce ne peut pas "voir" le reste de la page). Ou passez-vous les paramètres de contexte requis dans l'URL iframe? – cherouvim

+0

Nous ajoutons des mots-clés et du contenu à la page (non visible depuis la page externe) ainsi que l'extrait de code. Ainsi, s'ils scannent l'URL de référence, ils obtiennent un contenu pertinent. – leebutts

5

We-charge paresseux Code de OpenX. Au lieu de placer l'appel d'une seule page en haut de la page, nous le mettons en bas. Une fois la page chargée, l'appel reçoit les données de la bannière et un code personnalisé ajoute les bonnes bannières dans les zones correctes.

Le code ci-dessous nécessite un DOM approprié. Si vous avez jQuery, DOMAssistant, FlowJS, etc, le DOM doit être réparé pour vous. Ce code fonctionnera avec les bannières normales avec des images, un contenu Flash ou HTML. Cela peut ne pas fonctionner dans certains cas, comme lorsque vous utilisez des bannières de fournisseurs externes (adform, etc). Pour cela, vous devrez peut-être pirater un peu le code.

Comment l'utiliser?

  1. ajoutez votre code SinglePageCall vers la fin de votre code HTML
  2. ajouter ce code sous le code de la CPS.
  3. après une demi-seconde environ, votre code OpenX devrait être prêt, et le code ci-dessous mettra les bannières dans les DIVs spécifiés.
  4. Oh, oui, vous devez ajouter à votre code HTML des DIVs comme des espaces pour vos bannières. Par défaut j'ai ces bannières définies avec la classe CSS "cachée" qui masque totalement les DIVs (avec visibilité, affichage et hauteur). Ensuite, après que la bannière dans un DIV donné soit chargée avec succès, nous retirons la classe cachée et la DIV (et la bannière à l'intérieur) devient visible.

Utilisez à vos risques et périls! :) Espérons que cela aide

(function(){ 
if (!document || !document.getElementById || !document.addEventListener || !document.removeClass) { 
return; // No proper DOM; give up. 
} 
var openx_timeout = 1, // limit the time we wait for openx 
oZones = new Object(), // list of [div_id] => zoneID 
displayBannerAds; // function. 


// oZones.<divID> = <zoneID> 
// eg: oZones.banner_below_job2 = 100; 
// (generated on the server side with PHP) 
oZones.banner_top = 23; 
oZones.banner_bottom = 34; 



displayBannerAds = function(){ 
if(typeof(OA_output)!='undefined' && OA_output.constructor == Array){ 
    // OpenX SinglePageCall ready! 

    if (OA_output.length>0) { 

    for (var zone_div_id in oZones){ 
     zoneid = oZones[zone_div_id]; 

     if(typeof(OA_output[zoneid])!='undefined' && OA_output[zoneid]!='') { 

     var flashCode, 
      oDIV = document.getElementById(zone_div_id); 

     if (oDIV) { 

      // if it's a flash banner.. 
      if(OA_output[zoneid].indexOf("ox_swf.write")!=-1) 
      { 

      // extract javascript code 
      var pre_code_wrap = "<script type='text/javascript'><!--// <![CDATA[", 
       post_code_wrap = "// ]]> -->"; 

      flashCode = OA_output[zoneid].substr(OA_output[zoneid].indexOf(pre_code_wrap)+pre_code_wrap.length); 
      flashCode = flashCode.substr(0, flashCode.indexOf(post_code_wrap)); 


      // replace destination for the SWFObject 
      flashCode = flashCode.replace(/ox\_swf\.write\(\'(.*)'\)/, "ox_swf.write('"+ oDIV.id +"')"); 


      // insert SWFObject 
      if(flashCode.indexOf("ox_swf.write")!=-1){ 
       eval(flashCode); 
       oDIV.removeClass('hidden'); 
      }// else: the code was not as expected; don't show it 


      }else{ 
      // normal image banner; just set the contents of the DIV 
      oDIV.innerHTML = OA_output[zoneid]; 
      oDIV.removeClass('hidden'); 
      } 
     } 
     } 
    } // end of loop 
    }//else: no banners on this page 
}else{ 
    // not ready, let's wait a bit 
    if (openx_timeout>80) { 
    return; // we waited too long; abort 
    }; 
    setTimeout(displayBannerAds, 10*openx_timeout); 
    openx_timeout+=4; 
} 
}; 
displayBannerAds(); 
})(); 
+0

Pourriez-vous fournir un échantillon de ce code personnalisé? J'ai joué avec le remplacement de la fonction document.write mais j'ai eu quelques problèmes avec le chargement du contenu dans des conteneurs appropriés car nous avons plusieurs bannières sur la même page. –

+0

Rafa, est le code personnalisé quelque chose comme ça: http://jqueryad.web2ajax.fr/? Nous l'avons trouvé récemment mais nous ne l'avons pas encore implémenté comme test. – pjmorse

+0

pjmorse> Je viens de réaliser que je n'ai jamais répondu à votre commentaire et que j'ai juste mis à jour la réponse. Je me demande si vous avez reçu un type de notification. Si non, voici un "ping"/"poke" commentaire, juste au cas où ... un an plus tard ;-) – Rafa

1

Après @Rafa excellente réponse, je suis en utilisant ce code pour appeler bannières OpenX après le chargement de la page. J'utilise aussi jquery et j'ai dû ajouter un nouvel appel de remplacement pour le "document.write" que les bannières flash utilisent, et le remplacer par "$ ('#" + oDIV.id + "'). Append" à la place. J'utilise un appel "my_openx()" personnalisé, pour remplacer "OA_show()". Mes bannières zone appelée par le zone_id et sont enveloppés dans un div, comme ceci:

<div id="openx-4"><script>wm_openx(4);</script></div> 

Il travaille :)

<script type="text/javascript">    
$is_mobile = false; 
$document_ready = 0; 
$(document).ready(function() { 
    $document_ready = 1; 
    if($('#MobileCheck').css('display') == 'inline') { 
     $is_mobile = true; 
     //alert('is_mobile: '+$is_mobile); 
    } 
}); 

function wm_openx($id) { 
    if($is_mobile) return false; 
    if(!$document_ready) { 
     setTimeout(function(){ wm_openx($id); },1000); 
     return false; 
    } 

    if(typeof(OA_output[$id])!='undefined' && OA_output[$id]!='') { 

     var flashCode, 
      oDIV = document.getElementById('openx-'+$id); 

     if (oDIV) { 

      // if it's a flash banner.. 
      if(OA_output[$id].indexOf("ox_swf.write")!=-1) { 

       // extract javascript code 
       var pre_code_wrap = "<script type='text/javascript'><!--// <![CDATA[", 
        post_code_wrap = "// ]]> -->"; 

       flashCode = OA_output[$id].substr(OA_output[$id].indexOf(pre_code_wrap)+pre_code_wrap.length); 
       flashCode = flashCode.substr(0, flashCode.indexOf(post_code_wrap)); 

       // replace destination for the SWFObject 
       flashCode = flashCode.replace(/ox\_swf\.write\(\'(.*)'\)/, "ox_swf.write('"+ oDIV.id +"')"); 
       flashCode = flashCode.replace(/document.write/, "$('#"+ oDIV.id +"').append"); 


       // insert SWFObject 
       if(flashCode.indexOf("ox_swf.write")!=-1) { 
        //alert(flashCode); 
        eval(flashCode); 
        //oDIV.removeClass('hidden'); 
       }// else: the code was not as expected; don't show it 


      }else{ 
       // normal image banner; just set the contents of the DIV 
       oDIV.innerHTML = OA_output[$id]; 
       //oDIV.removeClass('hidden'); 
      } 
     } 
    } 
    //OA_show($id); 
} 
</script> 
1

que je cherchais cette option pour charger la publicité de mon serveur OpenX que lorsque le la publicité devrait être visible. J'utilise la version iFrame d'openX qui est chargée dans un div.La réponse ici m'a mis sur mon chemin pour résoudre ce problème, mais la solution affichée est un peu trop simple. Tout d'abord, lorsque la page n'est pas chargée par le haut (au cas où l'utilisateur accède à la page en cliquant sur 'retour') aucun des divs n'est chargé. Donc, vous aurez besoin de quelque chose comme ceci:

$(document).ready(function(){ 
    $(window).scroll(lazyload); 
    lazyload(); 
}); 

aussi, vous aurez besoin de savoir ce qui définit un div visible. Cela peut être une div entièrement visible ou partiellement visible. Si le bas de l'objet est supérieur ou égal au haut de la fenêtre ET que le haut de l'objet est plus petit ou égal au bas de la fenêtre, il devrait être visible (ou dans ce cas: chargé). Votre fonction lazyload peut ressembler à ceci:

function lazyload(){ 
    var wt = $(window).scrollTop(); //* top of the window 
    var wb = wt + $(window).height(); //* bottom of the window 

    $(".ads").each(function(){ 
     var ot = $(this).offset().top; //* top of object (i.e. advertising div) 
     var ob = ot + $(this).height(); //* bottom of object 

     if(!$(this).attr("loaded") && wt<=ob && wb >= ot){ 
     $(this).html("here goes the iframe definition"); 
     $(this).attr("loaded",true); 
     } 
    }); 
} 

Testé sur tous les principaux navigateurs et même sur mon iPhone, fonctionne comme un charme !!