2010-09-22 13 views
9

हम कई साइटों पर विज्ञापन देने के लिए ओपनएक्स का उपयोग कर रहे हैं। यदि ओपनएक्स सर्वर में समस्याएं हैं, हालांकि, यह इन साइटों पर पेज लोड को अवरुद्ध करता है। मैं साइटों को गर्व से असफल कर दूंगा, यानी विज्ञापन के बिना पृष्ठों को लोड करें और जब वे उपलब्ध हों तो उन्हें भरें।हम ओपनएक्स को पेज लोड को अवरुद्ध करने से कैसे रोक सकते हैं?

हम ओपनएक्स के single page call का उपयोग कर रहे हैं, और हम सीएसएस में स्पष्ट आकार दे रहे हैं ताकि उन्हें उनकी सामग्री के बिना बाहर रखा जा सके, लेकिन फिर भी स्क्रिप्ट ब्लॉक पेज लोड लोड हो रहा है। ओपनएक्स के साथ पृष्ठों को तेज़ करने के लिए क्या अन्य सर्वोत्तम अभ्यास हैं?

+0

देखना है http://stackoverflow.com/questions/3106782/openx-aysnc-tags –

उत्तर

1

OpenX कैसे उनके टैग लोड एसिंक्रोनस रूप से बनाने के लिए पर कुछ प्रलेखन है: http://docs.openx.com/ad_server/adtagguide_synchjs_implementing_async.html

मैं इसे परीक्षण किया है, और यह वर्तमान क्रोम/फ़ायरफ़ॉक्स में अच्छी तरह से काम करता है।

यह उनके विज्ञापन कोड का कुछ मैन्युअल tweaking लेता है। कैसे विज्ञापन टैग पहुंचना चाहिए की उनकी उदाहरण:

<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+ सालों से काम नहीं कर रहा हूं लेकिन यह देखना अच्छा लगता है कि वे इस तरह के प्रदर्शन पर पकड़ रहे हैं। – pjmorse

5

हम आपके विज्ञापनों को आपके द्वारा होने वाली समस्या से बचने के लिए iframes में लोड करते हैं। हम आकार div और iframe वही हैं, iframe उस पृष्ठ पर इशारा करते हुए जिसमें केवल विज्ञापन स्निपेट होता है (आप ज़ोन और अन्य आवश्यक विकल्पों को उस पृष्ठ के पैरामीटर के रूप में पास कर सकते हैं)।

चियर्स

ली

+0

एक iframe में विज्ञापन लोड हो रहा है इस तरह के के नुकसान के रूप में किसी भी नुकसान संदर्भ? (यानी विज्ञापन शेष पृष्ठ को "देख" नहीं सकता है)। या आप iframe यूआरएल में किसी भी आवश्यक संदर्भ पैरामीटर पास करते हैं? – cherouvim

+0

हम पृष्ठ पर कीवर्ड और सामग्री (बाहरी पृष्ठ से दिखाई नहीं दे रहे हैं) के साथ-साथ स्निपेट भी जोड़ते हैं ताकि यदि वे संदर्भित URL को स्कैन करते हैं तो वे सामग्री को रिलीज़ करते हैं। – leebutts

5

हम आलसी लोड OpenX के कोड। पृष्ठ के शीर्ष पर सिंगल-पेज कॉल डालने के बजाय, हम इसे नीचे रख देते हैं। पृष्ठ लोड होने के बाद, कॉल बैनर डेटा प्राप्त करेगा और एक कस्टम कोड सही क्षेत्र में सही बैनर जोड़ देगा।

नीचे दिए गए कोड को उचित डॉम की आवश्यकता है। यदि आपके पास jQuery, DOMAssistant, FlowJS, आदि हैं, तो DOM आपके लिए तय किया जाना चाहिए। यह कोड छवियों, फ़्लैश, या एचटीएमएल सामग्री के साथ सामान्य बैनर के साथ काम करेगा। यह कुछ मामलों में काम नहीं कर सकता है जैसे बाहरी प्रदाताओं (विज्ञापन, आदि) से बैनर का उपयोग करते समय। इसके लिए आपको थोड़ा सा कोड हैक करने की आवश्यकता हो सकती है।

इसका उपयोग कैसे करें?

  1. अपने HTML कोड
  2. के अंत में अपने SinglePageCall कोड जोड़ने के लिए छठे वेतन आयोग कोड के तहत इस कोड जोड़ें।
  3. आधा सेकेंड या उसके बाद, आपका ओपनएक्स कोड तैयार होना चाहिए, और नीचे दिया गया कोड बैनर को निर्दिष्ट डीआईवी में रखेगा।
  4. ओह, हाँ, आपको अपने एचटीएमएल कोड में कुछ डीवी को अपने बैनर के लिए प्लेसहोल्डर के रूप में जोड़ना होगा। डिफ़ॉल्ट रूप से मेरे पास इन बैनर सीएसएस वर्ग "छिपे हुए" के साथ सेट हैं जो पूरी तरह से डीआईवी (दृश्यता, प्रदर्शन और ऊंचाई के साथ) को छुपाता है। फिर, दिए गए डीआईवी में बैनर सफलतापूर्वक लोड होने के बाद, हम छिपे हुए वर्ग को हटाते हैं और डीआईवी (और भीतर बैनर) दिखाई देते हैं।

अपने जोखिम पर उपयोग करें! :) आशा है कि यह मदद करता है

(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 फ़ंक्शन को प्रतिस्थापित करने के साथ खिलवाड़ किया है लेकिन सामग्री को उचित कंटेनर में लोड करने में कुछ समस्याएं थीं क्योंकि हमारे पास एक ही पृष्ठ पर कई बैनर हैं। –

+0

राफा, कस्टम कोड इस तरह से कुछ है: http://jqueryad.web2ajax.fr/? हमने हाल ही में पाया लेकिन अभी तक इसे एक परीक्षण के रूप में लागू नहीं किया है। – pjmorse

+0

pjmorse> मुझे अभी एहसास हुआ कि मैंने कभी आपकी टिप्पणी का जवाब नहीं दिया और सिर्फ जवाब अपडेट किया। मुझे आश्चर्य है कि आपको कुछ प्रकार की अधिसूचना मिली है। यदि नहीं, तो यहां एक "पिंग"/"पोक" टिप्पणी है, बस मामले में ... एक साल बाद ;-) – Rafa

1
@Rafa उत्कृष्ट जवाब के बाद

, मैं पृष्ठ लोड के बाद OpenX बैनर आह्वान करने के लिए इस कोड का उपयोग कर रहा हूँ। मैं jquery का भी उपयोग कर रहा हूं और "document.write" के लिए एक नया प्रतिस्थापन कॉल जोड़ना था जो फ्लैश बैनर का उपयोग करता है, और इसे "$ ('#" + oDIV.id + "' के साथ बदलता है)।" इसके बजाय "संलग्न करें। मैं "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> 
1

काम कर रहा है मैं इस लिए देख रहा था मेरी OpenX सर्वर से विज्ञापन लोड करने के लिए केवल जब विज्ञापन दिखाना चाहिए। मैं ओपनएक्स के आईफ्रेम संस्करण का उपयोग कर रहा हूं जो एक div में लोड किया गया है।यहां जवाब ने मुझे इस समस्या को हल करने के लिए मेरे रास्ते पर रखा, लेकिन पोस्ट किया गया समाधान थोड़ा सा सरल है। सबसे पहले, जब पृष्ठ शीर्ष से लोड नहीं होता है (यदि उपयोगकर्ता 'बैक' पर क्लिक करके पृष्ठ में प्रवेश करता है) तो कोई भी 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 पर परीक्षण किया गया है, एक आकर्षण की तरह काम करता !!

संबंधित मुद्दे

 संबंधित मुद्दे