如何检测投放的广告尺寸

时间:2012-09-11 17:20:05

标签: javascript responsive-design ads google-dfp

我目前正在使用DFP广告管理系统发布商代码将广告投放到即将响应的网站上。我们有一个特定的广告位,可以提供2个潜在宽度,728或960,并且根据提供的宽度,我想要在导航上方或下方呈现广告。

所以显而易见的第一个问题是,这是否是远程理智,而且是否可能?我怀疑我应该定义两个不同的广告位。

主要问题可能更多是学术问题,我如何才能检测到已投放广告的尺寸?我怀疑这个解决方案与广告平台无关,因为我基本上检测到节点插入,然后检查容器元素的尺寸。

我一直在尝试使用DOMNodeInserted javascript事件,但它似乎触发了所有“广告”。除非gpt以不触发此事件的方式插入广告,否则我对此感到困惑。

4 个答案:

答案 0 :(得分:11)

已经对GPT进行了更新,允许以更优雅的方式完成此操作。 该活动将告诉您是否返回了广告素材,如果是,则会告知您尺寸以及其他信息。

googletag.pubads().addEventListener('slotRenderEnded', function(event) {
 console.log('Creative with id: ' + event.creativeId +
  ' is rendered to slot of size: ' + event.size[0] + 'x' + event.size[1]);
});

还有event.isEmpty会告诉您是否返回了实际的广告素材。

答案 1 :(得分:4)

之前我已经做过类似的事情了......我确定的方法是覆盖内部DFP功能(renderEnded),以便我可以看到广告在屏幕上呈现的位置......

例如,为了获得广告的尺寸,您可以执行以下操作(我只在Chrome中对其进行了测试,但它不应该与完全跨浏览器相距太远):

<html>
<head>
    <title>DFP test</title>

    <script type='text/javascript'>
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
        (function() {
            var gads = document.createElement('script');
            gads.async = true;
            gads.type = 'text/javascript';
            var useSSL = 'https:' == document.location.protocol;
            gads.src = (useSSL ? 'https:' : 'http:') +
            '//www.googletagservices.com/tag/js/gpt.js';
            var node = document.getElementsByTagName('script')[0];
            node.parentNode.insertBefore(gads, node);
        })();
    </script>


    <script type="text/javascript">
        googletag.cmd.push(function() {
            var slot1 = googletag.defineSlot('/12345678/TEST', [266, 115], 'div-gpt-ad-1340819095858-0').addService(googletag.pubads());

            slot1.oldRenderEnded = slot1.renderEnded;
            slot1.renderEnded = function(){
                window.console.log('width: '+document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.width);
                window.console.log('height: '+document.getElementById('div-gpt-ad-1340819095858-0').getElementsByTagName('iframe')[0].contentWindow.document.height);
                slot1.oldRenderEnded();
            };

            googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
    </script>

</head>
<body>

    <div id='div-gpt-ad-1340819095858-0' style='width:266px; height:115px;'>
        <script type='text/javascript'>
            googletag.cmd.push(function() {
                googletag.display('div-gpt-ad-1340819095858-0');
            });
        </script>
    </div>

</body>
</html>

这可能不是你想要的,但是重写那个功能应该让你到达你需要的地方......如果你有任何问题,请告诉我。

答案 2 :(得分:0)

我在使用Google AdSense的WiiMusic.net上遇到了类似的问题。我最终做的是使用JavaScript检测包含广告的div的大小,然后加载广告。在这种情况下,加载后无法更改页面的分辨率或大小,因此这很有效。

在您的情况下,您的网页肯定会改变大小,而不是。如果您希望根据响应式设计看到不同的广告版本,我认为您必须在此时重新加载广告。如果您使用异步广告代码,则应该可以这样做。

总结一下,是的,这是理智的,并且可以使用JavaScript。无论如何,您的广告都需要使用JavaScript,因此这不应该是一个太大的障碍。

答案 3 :(得分:0)

像往常一样,我想到了这一点。我没有检测到DOM更改的原因是因为我在分配事件处理程序时已经插入了广告。在同步加载广告时,我可以立即测量容器div的尺寸并获取广告尺寸。当异步加载时,我可以通过存储原始html使用和轮询更改并在发生更改时进行容器div的测量来轮询内部html更改。感谢布拉德的时间。