Как мы можем удержать OpenX от блокировки загрузки страницы?

Мы используем OpenX для показа рекламы на нескольких сайтах. Однако, если у сервера OpenX есть проблемы, он блокирует загрузку страниц на этих сайтах. Я бы предпочел, чтобы сайты отказывали изящно, т.е. загружали страницы без рекламы и заполняли их, когда они стали доступны.

Мы используем одностраничный вызов OpenX и даем явный размер div'ов в CSS, чтобы их можно было размещать без их содержимого, но при этом загрузка скриптовых блоков блокирует загрузку страницы. Существуют ли другие рекомендации по ускорению страниц с помощью OpenX?

Источник

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>
Источник

Мы загружаем нашу рекламу в iframes, чтобы избежать проблемы, с которой вы столкнулись. Размеры div и iframe одинаковы, при этом iframe указывает на страницу, которая содержит только фрагмент объявления (вы можете передать зону и другие необходимые параметры в качестве параметров этой странице).

ура

подветренный

Источник

Мы лениво загружаем код OpenX. Вместо того, чтобы помещать одностраничный вызов вверху страницы, мы помещаем его внизу. После загрузки страницы вызов получит данные баннера, а пользовательский код добавит правильные баннеры в правильные зоны.

Код ниже требует правильного DOM. Если у вас есть jQuery, DOMAssistant, FlowJS и т. Д., DOM должен быть исправлен для вас. Этот код будет работать с обычными баннерами с изображениями, flash или HTML-контентом. В некоторых случаях это может не работать, например, при использовании баннеров от внешних поставщиков (adform и т. Д.). Для этого вам может понадобиться немного взломать код.

Как это использовать?

  1. добавьте ваш код SinglePageCall к концу вашего HTML-кода
  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();
})();
Источник

Я искал это для загрузки рекламы с моего сервера openX только тогда, когда реклама должна быть видимой. Я использую iFrame версию 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, работает как шарм!

Источник

После превосходного ответа @Rafa, я использую этот код для вызова баннеров OpenX после загрузки страницы. Я также использую jquery и должен был добавить новый вызов замены для "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>
Источник
Другие вопросы по тегам