Is there a way to expand an advert outside of the window width within a GPT (Google Publisher Tag) Safeframe?

半城伤御伤魂 提交于 2019-12-01 23:51:33

unfortunately, it's not possible to avoid this behaviour, but i made a workaround, that will "wait", until user is scrolled in place, that is suitable to expand, check this example, that will push banner from bottom, when user have enought space from bottom to expand whole creative:

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

hope it helps!

edit:

I found better solution here: Unable to access contents of a safeframe returned by Google adx

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!