2010-09-22 45 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,就像一个魅力!