Есть ли способ расширить объявление за пределами ширины окна в теге GPT (тег издателя Google) Safeframe?

Question

Я пытаюсь создать объявление, которое будет расширяться за пределами страницы. Использование инструмента предварительного просмотра GPT Safeframe Я получаю сообщение об ошибке «Недопустимое сообщение EXPAND_REQUEST. Причина: Viewport или тело документа не достаточно большое, чтобы расширяться».

Есть ли настройки, чтобы изменить это, или это само накладывается ограничение,

Вот пример того, что я пытаюсь сделать: вы можете проверить его здесь: http://publisherconsole.appspot.com/safeframe/creative-preview.html

<div id="container"> 
    <style type="text/css"> 
     #container { 
      background-color: #EEF; 
      width: 500px; 
      height: 500px; 
     } 

     button { 
      width: 50px; 
      height: 50px; 
      font-size: 30px; 
      padding: 0px; 
     } 

     #info { 
      position: relative; 
      top: 10%; 
      width: 390px; 
      margin: auto; 
     } 

     #left { 
      left: 0px; 
      bottom: 50%; 
      position: fixed; 
     } 

     #right { 
      right: 0px; 
      top: 50%; 
      position: fixed; 
     } 

     #top { 
      top: 0px; 
      left: 50%; 
      position: fixed; 
     } 

     #bottom { 
      bottom: 0px;; 
      right: 50%; 
      position: fixed; 
     } 

     #central-buttons { 
      margin: 10px auto; 
      display: block; 
      width: 210px; 
     } 

     #central-buttons button { 
      font-size: 15px; 
      width: 100px; 
     } 
    </style> 
    <script> 
     function expand(direction) { 
     var allowedExp= $sf.ext.geom().exp; 
     var config = { 
      push: false, 
      t: 0, 
      l: 0, 
      r: 0, 
      b: 0 
     }; 
     var all = direction === 'all'; 
     if (direction === 'left' || all) { 
      config.l = allowedExp.l/2; 
     } 
     if (direction === 'right' || all) { 
      config.r = 900; 
     } 
     if (direction === 'top' || all) { 
      config.t = allowedExp.t/2; 
     } 
     if (direction === 'bottom' || all) { 
      config.b = allowedExp.b/2; 
     }; 
     $sf.ext.expand(config); 
     } 

     function collapse() { 
     $sf.ext.collapse(); 
     } 

     function adjustDivContainerSize() { 
     var self = $sf.ext.geom().self; 
     var el = document.getElementById('container'); 
     el.style.width = (self.r - self.l) + 'px'; 
     el.style.height = (self.b - self.t) + 'px'; 
     } 

     $sf.ext.register(500, 500, function(status, data) { 
     if (status === 'geom-update') { 
      return; 
     } 
     var message = 'Status: ' + status + '. Data: <pre>' + JSON.stringify(data, null, ' ') + '</pre>'; 
     document.getElementById('status').innerHTML = message; 
     adjustDivContainerSize(); 
     }); 

     adjustDivContainerSize(); 
    </script> 
    <div id="info"> 
     <span> 
      <strong> $sf.ext.expand by overlay and $sf.ext.collapse</strong> 
      <br>Creative should be expanded when buttons are clicked. Expansion can be performed 
      only from collapsed state so subsequent expansion won't work until creative is collapsed. 
     </span> 
     <div id="central-buttons"> 
      <button id="collapse" onclick="collapse();">Collapse</button> 
      <button onclick="expand('all');">Expand all</button> 
     </div> 
     <div id="status"></div> 
    </div> 
    <button id="left" onclick="expand('left');">&#8656</button> 
    <button id="top" onclick="expand('top');">&#8657;</button> 
    <button id="right" onclick="expand('right');">&#8658</button> 
    <button id="bottom" onclick="expand('bottom');">&#8659</button> 
</div> 

Answer 1

К сожалению, этого нельзя избежать, но я сделал обходной путь, который будет «ждать», пока пользователь не будет прокручен на месте, что подходит для расширения, проверьте этот пример, который будет выталкивать баннер снизу, когда пользователь достаточно пространства от дна до полного объявления цели:

<div id="container"> 
    some lines to make container height<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 
    line<br> 

    <script> 
     // global expanded indicator variable, because API don't have any 
     var expanded = false; 
     function expand() { 
      var self= $sf.ext.geom().self; 
      var config = { 
       push: true, 
       b: 0 
      }; 

      var el = document.getElementById('container'); 
      var containerHeight = el.offsetHeight; 

      // get height from bottom, that need to be expanded 
      var expandBottom = containerHeight - self.h; 

      // if container is whole inside a SafeFrame, it will not expand 
      if(expandBottom < 0) return; 

      config.b = expandBottom; 
      $sf.ext.expand(config); 
     } 

     function expandDelayed(forceExpand) { 
      // expand will run just once, or you can force it to run again 
      // but collapse first is needed 
      if(expanded && forceExpand || !expanded) { 
       $sf.ext.collapse(); 
       expanded = false; 
       // there must be some timeout, because .collapse(); method is deplayed somehow 
       setTimeout(expand, 0); 
      } 
     } 

     $sf.ext.register(160, 150, function(status, data) { 
      // this code will do whole magic of "waiting" for right moment 
      if (status === 'geom-update') { 
       expandDelayed(); 
      } 

      // change global expanded status 
      if (status === 'expanded') { 
       expanded = true; 
      } 
     }); 

     // init 
     expandDelayed(); 
    </script> 
</div> 

надеюсь, что это поможет!

редактировать:

Я нашел лучшее решение здесь: Unable to access contents of a safeframe returned by Google adx