我們怎樣才能阻止OpenX阻止頁面加載？

Question

我們使用OpenX在多個網站上投放廣告。 但是，如果OpenX服務器出現問題，它會阻止這些站點上的頁面加載。 我寧願讓網站優雅地失敗，即加載沒有廣告的網頁，並在網站可用時填寫。

我們正在使用OpenX的單頁調用 ，我們在CSS中給div顯式大小，這樣它們可以在沒有內容的情況下布局，但仍然加載腳本塊頁面加載。 是否有其他使用OpenX加速頁面的最佳實踐？

Answer 1

我們在iframe中加載廣告，以避免您遇到的問題。 我們將div和iframe的大小相同，iframe指向一個只包含廣告代碼段的頁面（您可以將區域和其他必需的選項作為參數傳遞給該頁面）。

干杯

背風處

Answer 2

我們懶惰加載OpenX的代碼。 我們將其放在底部，而不是將單頁調用放在頁面頂部。 頁面加載后，調用將獲取橫幅數據，自定義代碼將在正確的區域中添加正確的橫幅。

下面的代碼需要一個合適的DOM。 如果您有jQuery，DOMAssistant，FlowJS等，那么應該為您修復DOM。 此代碼適用於包含圖像，Flash或HTML內容的普通橫幅。 在某些情況下，例如使用來自外部提供商（adform等）的橫幅時，它可能無效。 為此，您可能需要稍微破解代碼。

如何使用它？

1. 在HTML代碼的末尾添加SinglePageCall代碼
2. 在SPC代碼下添加此代碼。
3. 大約半秒后，您的OpenX代碼應該准備就緒，下面的代碼會將橫幅放在指定的DIV中。
4. 哦，是的，您需要在HTML代碼中添加一些DIV作為橫幅的占位符。 默認情況下，我將這些橫幅設置為CSS類“隱藏”，它完全隱藏了DIV（具有可見性，顯示和高度）。 然后，在成功加載給定DIV中的橫幅之后，我們刪除隱藏的類，並且DIV（以及其中的橫幅）變得可見。

使用風險自負！ ：） 希望能幫助到你

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

Answer 3

關於@Rafa優秀的答案，我正在使用此代碼在頁面加載后調用OpenX橫幅。 我也在使用jquery，並且必須為flash橫幅使用的“document.write”添加一個新的替換調用，並將其替換為“$（'＃”+ oDIV.id +“'）。附加”。 我正在使用自定義“my_openx（）”調用來替換“OA_show（）”。 我的橫幅區域由zone_id調用並包含在div中，如下所示：

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

它的工作:)

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

Answer 4

我正在尋找這個只在廣告應該可見時從我的openX服務器加載廣告。 我正在使用加載在div中的openX的iFrame版本。 這里的答案讓我開始解決這個問題，但是發布的解決方案有點過於簡單了。 首先，當頁面未從頂部加載時（如果用戶通過單擊“返回”進入頁面），則不會加載任何div。 所以你需要這樣的東西：

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

另外，你需要知道什么定義了一個可見的div。 這可以是完全可見或部分可見的div。 如果對象的底部大於或等於窗口的頂部並且對象的頂部小於或等於窗口的底部，則它應該是可見的（或者在這種情況下：加載）。 你的函數lazyload可能如下所示：

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

在所有主流瀏覽器上測試，甚至在我的iPhone上測試，就像一個魅力！

Answer 5

OpenX有一些關於如何異步加載標記的文檔： http ： //docs.openx.com/ad_server/adtagguide_synchjs_implementing_async.html

我測試了它，它在當前的Chrome / Firefox中運行良好。

它需要手動調整廣告代碼。 他們應該如何結束廣告代碼的示例：

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