2010-09-22 22 views
9

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

我們使用OpenX的single page call,我們在CSS中給出了div的顯式大小,因此可以在沒有內容的情況下對其進行佈局,但仍然會加載腳本塊頁面加載。使用OpenX加快頁面的其他最佳做法是否還有其他的最佳做法?

+0

看到http://stackoverflow.com/questions/3106782/openx-aysnc-tags – 2010-09-30 18:35:26

回答

1

的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> 
+1

嘿,那是個好消息! 2年來我一直沒有與OpenX合作過,但很高興看到他們正在趕上像這樣的表現。 – pjmorse 2014-06-06 12:49:36

5

我們將我們的廣告加載到iframe中以避免您遇到的問題。我們將div和iframe的大小設置爲相同,iframe指向僅包含廣告片段的頁面(您可以將區域和其他必需的選項作爲參數傳遞給該頁面)。

歡呼

+0

是否在iframe中加載廣告有任何缺點,如丟失背景? (即廣告不能「看到」頁面的其餘部分)。或者您是否在iframe網址中傳遞了所需的上下文參數? – cherouvim 2010-10-01 07:03:35

+0

我們向頁面添加關鍵字和內容(從外部頁面不可見)以及代碼片段,所以如果他們掃描引用的URL,他們會得到相關的內容。 – leebutts 2010-10-01 09:37:13

5

我們延遲加載OpenX的代碼。我們不是將單頁呼叫放在頁面的頂部,而是放在頁面底部。頁面加載後,該調用將獲得橫幅數據,而自定義代碼將在正確的區域中添加正確的橫幅。

下面的代碼需要一個適當的DOM。如果你有jQuery,DOMAssistant,FlowJS等,DOM應該爲你解決。 此代碼將與圖片,Flash或HTML內容的普通橫幅一起使用。在某些情況下,如使用來自外部提供商的橫幅(廣告等)時,它可能不起作用。爲此,您可能需要稍微破解代碼。

如何使用它?

  1. 添加SinglePageCall代碼對你的HTML代碼
  2. 到底SPC代碼下添加以下代碼。
  3. 大約半秒鐘左右之後,你的OpenX代碼應該準備好了,下面的代碼將把橫幅放在指定的DIV中。
  4. 哦,是的,你需要添加一些DIV作爲你的橫幅廣告的HTML代碼。默認情況下,我將這些橫幅設置爲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(); 
})(); 
+0

您能否提供該自定義代碼的示例?我已經玩弄了替換document.write函數,但在將內容加載到適當的容器時遇到了一些問題,因爲我們在同一頁面上有幾個橫幅。 – 2010-10-29 07:01:58

+0

Rafa,是這樣的自定義代碼:http://jqueryad.web2ajax.fr/?我們最近發現但尚未實施它作爲測試。 – pjmorse 2010-10-29 11:41:10

+0

pjmorse>我剛剛意識到我從未回覆您的評論,只是更新了答案。我想知道你是否有某種類型的通知。如果沒有,這裏是一個「平」/「戳」評論,以防萬一......一年後;-) – Rafa 2011-11-23 16:45:52

1

繼@Rafa出色答卷,我使用這個代碼在頁面加載後調用OpenX的橫幅。我也使用jquery,並且必須爲flash橫幅使用的「document.write」添加一個新的替換調用,並用「$('#」+ oDIV.id +「')。append」替換它。我使用自定義的「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> 
1

我一直在尋找這樣從我的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,就像一個魅力!