Как мы можем удержать OpenX от блокировки загрузки страницы? - PullRequest
9 голосов
/ 22 сентября 2010

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

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

Ответы [ 5 ]

5 голосов
/ 29 октября 2010

Мы лениво загружаем код 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();
})();
5 голосов
/ 01 октября 2010

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

cheers

Lee

1 голос
/ 04 июня 2014

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 голос
/ 25 февраля 2013

Я искал это для загрузки рекламы с моего сервера 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, работает как шарм !!

1 голос
/ 04 июля 2012

После превосходного ответа @Rafa, я использую этот код для вызова баннеров OpenX после загрузки страницы.Я также использую jquery и должен был добавить новый вызов замены для «document.write», который используют флэш-баннеры, и заменил его на «$ ('#" + oDIV.id + "').Я использую пользовательский вызов 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...