有没有办法在GPT（Google发布商代码）Safeframe中扩展窗口宽度以外的广告？

Question

我正在尝试创建一个广告，该广告将展开在页面的旁边。 使用GPT Safeframe预览工具我收到错误“Invalid EXPAND_REQUEST message。Reason：Viewport or document body not large to to to into。”

有没有覆盖此设置或者这是一种自我施加的限制，

这里是什么，我试图做一个例子： 您可以在这里测试一下：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