2

我正在尝试创建一个将扩展到页面一侧的广告。使用 GPT Safeframe 预览工具时，我收到错误“无效的 EXPAND_REQUEST 消息。原因：视口或文档正文不够大，无法展开。”

是否有一个设置来覆盖这个或者这是一个自我强加的限制，

这是我想要做的一个例子：你可以在这里测试它：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>
4

1 回答 1

0

不幸的是，不可能避免这种行为，但我做了一个解决方法，它会“等待”，直到用户滚动到位，适合展开，检查这个例子，当用户有足够的时候，它将从底部推送横幅从底部扩展整个创意的空间：

<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>

希望能帮助到你！

编辑：

我在这里找到了更好的解决方案： 无法访问 Google adx 返回的安全框架的内容

于 2017-09-08T16:27:24.283 回答