Wie können wir OpenX verhindern Laden der Seite blockiert?

StackOverflow https://stackoverflow.com/questions/3770570

Frage

Wir sind mit OpenX-Anzeigen auf einer Reihe von Websites zu dienen. Wenn der OpenX-Server hat Probleme, aber es blockiert Seite geladen wird auf diesen Seiten. Ich würde eher die Seiten ordnungsgemäß fehlschlagen haben, das heißt laden die Seiten ohne die Anzeigen und füllen sie in, wenn sie verfügbar sind.

Wir verwenden OpenX einzelne Seite Anruf , und wir geben divs explizite Größe in CSS, so dass sie ohne ihren Inhalt angelegt werden, aber immer noch die Skriptblocks Laden der Seite zu laden. Gibt es andere Best Practices für die Beschleunigung Seiten mit OpenX?

War es hilfreich?

Lösung

OpenX hat eine Dokumentation, wie sie ihre Tags asynchron geladen zu machen: http://docs.openx.com/ad_server/adtagguide_synchjs_implementing_async.html

Ich habe es getestet und es funktioniert gut in der aktuellen Chrome / Firefox.

Es dauert einige manuelle Feinabstimmung ihres Anzeigencode. Ihr Beispiel dafür, wie die Anzeigen-Tags am Ende sollen: 

<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>

Andere Tipps

Wir haben unsere Anzeigen in Iframes geladen, das Problem zu vermeiden Sie haben. Wir Größe div und iframe die gleiche, mit dem iframe auf eine Seite verweisen, die nur den Anzeigen-Snippet enthält (Sie die Zone und andere erforderliche Optionen als Parameter an der Seite passieren können).

cheers

Lee

Wir faul Last OpenX Code. Statt an der Spitze der Seite der Single-Page-Anruf setzen wir es am Ende setzen. Nachdem die Seite geladen ist, wird der Anruf wird das Banner Daten erhalten und eine benutzerdefinierte Code der richtigen Banner in den richtigen Zonen hinzuzufügen.

Der folgende Code erfordert einen richtigen DOM. Wenn Sie jQuery, DOMAssistant, FlowJS, usw., sollte das DOM für Sie festgelegt werden. Dieser Code wird mit normalen Bannern mit Bildern, Flash oder HTML-Inhalt arbeiten. Es kann in einigen Fällen nicht wie funktionieren, wenn Banner von externen Anbietern (Adform, usw.) verwendet wird. Dafür können Sie den Code ein bisschen hacken müssen.

Wie es zu benutzen?

  1. fügen Sie Ihre SinglePageCall Code zum Ende des HTML-Code
  2. fügen Sie diesen Code unter dem SPC-Code.
  3. nach einer zweiten Hälfte oder so, Ihre OpenX Code sollte bereit sein, und der folgende Code wird die Banner innerhalb der angegebenen DIVs setzen.
  4. Oh, ja, müssen Sie Ihren HTML-Code einige DIVs als Platzhalter für Ihre Banner hinzuzufügen. Standardmäßig habe ich diese Banner mit CSS-Klasse „versteckt“ gesetzt, die völlig die DIVs versteckt (mit Sichtbarkeit, Anzeige und Höhe). Dann, nachdem das Banner in einem bestimmten DIV erfolgreich geladen ist, entfernen wir die versteckte Klasse und die DIV (und das Banner innerhalb) sichtbar werden.

Benutzung auf eigene Gefahr! :) Hoffe, es hilft 

(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();
})();

Nach @Rafa ausgezeichnete Antwort, ich verwende diesen Code OpenX Banner nach dem Laden der Seite aufzurufen. Ich bin mit jquery so gut und hatte einen neuen ersetzen Aufruf für den „document.write“ hinzufügen, dass Flash-Banner verwenden und es mit „$ (‚# ‚+ oDIV.id +‘‘). Append“ statt ersetzen. Ich bin mit einem benutzerdefinierten „my_openx ()“ Anruf „OA_show ()“ zu ersetzen. Meine Banner Bereich der zone_id genannt und ist in einem div, wie diese gewickelt: 

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

Es funktioniert:) 

<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>

Ich war für diese Werbung von meinem openX Server laden nur, wenn die Werbung sichtbar sein soll. Ich bin mit der iFrame Version von openX, die in einem div geladen wird. Die Antwort hat mich auf meinem Weg, um dieses Problem zu lösen, aber die geposteten Lösung ist ein bisschen zu einfach. Vor allem, wenn die Seite nicht von oben (im Fall gibt der Benutzer die Seite durch Klicken auf ‚zurück‘) keiner der divs geladen geladen wird. So können Sie so etwas wie diese brauchen werden: 

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

auch, müssen Sie wissen, was ein sichtbares div definiert. Das kann ein div sein, die vollständig sichtbar oder teilweise sichtbar ist. Wenn der Boden des Objekts an den oberen Rand des Fensters größer oder gleich ist und die Oberseite des Objekts kleiner oder gleich dem unteren Rand des Fensters sollte sichtbar sein (oder in diesem Fall: geladene). Ihre Funktion lazyload wie folgt aussehen: 

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);
      }
   });
}

Getestet auf allen gängigen Browsern und sogar auf meinem iPhone, wirkt wie ein Zauber !!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top