多くのサイトで広告を配信するために OpenX を使用しています。ただし、OpenX サーバーに問題がある場合は、これらのサイトでページの読み込みがブロックされます。私はむしろ、サイトが正常に機能しないようにしたいと考えています。つまり、広告なしでページをロードし、広告が利用可能になったときにページを埋めます。
OpenX の単一ページ呼び出しを使用しており、CSS で div に明示的なサイズを指定しているため、コンテンツなしでレイアウトできますが、スクリプトをロードするとページのロードがブロックされます。OpenX を使用してページを高速化するためのベスト プラクティスは他にありますか?
問題を回避するために、広告をiframeにロードします。divとiframeのサイズを同じにし、iframeが広告スニペットのみを含むページを指すようにします（ゾーンやその他の必要なオプションをパラメーターとしてそのページに渡すことができます）。
乾杯
リー
OpenXのコードを遅延読み込みします。単一ページの呼び出しをページの上部に配置する代わりに、下部に配置します。ページが読み込まれた後、呼び出しはバナーデータを取得し、カスタムコードは正しいゾーンに正しいバナーを追加します。
以下のコードには、適切なDOMが必要です。jQuery、DOMAssistant、FlowJSなどがある場合は、DOMを修正する必要があります。このコードは、画像、フラッシュ、またはHTMLコンテンツを含む通常のバナーで機能します。外部プロバイダーのバナー（広告など）を使用する場合など、動作しない場合があります。そのためには、コードを少しハックする必要があるかもしれません。
それの使い方？
自己責任！：） それが役に立てば幸い
(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();
})();
@Rafaの優れた回答に続いて、ページの読み込み後にこのコードを使用してOpenXバナーを呼び出しています。私もjqueryを使用しており、フラッシュバナーが使用する「document.write」の新しいreplace呼び出しを追加し、代わりに「$（'＃ "+ oDIV.id +"'）。append」に置き換える必要がありました。「OA_show（）」の代わりに、カスタムの「my_openx（）」呼び出しを使用しています。私のバナー領域は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>
広告が表示される必要がある場合にのみ、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 でもテスト済みで、魅力的に動作します!!
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>