我目前正在使用带有 DFP 的 google 发布商代码向一个很快就会响应的网站投放广告。我们有一个特定的广告位，它可以提供 2 个可能的宽度，728 或 960，根据提供的宽度，我想将广告呈现在导航上方或下方。
因此，显而易见的第一个问题是，这是否有点理智，而且是否可能？我怀疑我应该定义两个不同的广告位。
虽然可能更多的是学术问题，但主要问题是如何检测已投放的广告的尺寸？我怀疑这个解决方案对于广告平台来说是不可知的，因为我基本上检测到节点插入，然后检查容器元素的尺寸。
我一直在试验 DOMNodeInserted javascript 事件，但它似乎触发了所有“但”广告。我对此感到困惑，除非 gpt 以不会触发此事件的方式插入广告。
【问题讨论】：
标签： javascript responsive-design ads google-dfp
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 会告诉您是否返回了实际的广告素材。
【讨论】：
我以前做过类似的事情...我选择的方法是覆盖内部 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>
这可能不是您所追求的，但覆盖该功能应该可以让您到达您需要的地方...如果您有任何问题，请告诉我。
【讨论】：
我在 WiiMusic.net 上使用 Google AdSense 遇到了类似的问题。我最终做的是使用 JavaScript 检测包含广告的 div 的大小，然后加载广告。在这种情况下，一旦加载，就无法更改页面的分辨率或大小，所以这行得通。
在你的情况下，你的页面当然可以改变大小，什么不能。如果您希望根据您的响应式设计显示不同的广告版本，我认为您将不得不重新加载广告。如果您使用的是异步广告代码，这应该是可能的。
总而言之，是的，这对于 JavaScript 来说是合理的并且是可能的。无论如何，您的广告都需要 JavaScript 才能正常工作，因此这应该不是太大的障碍。
【讨论】：
所以像往常一样，我想太多了。我没有检测到 DOM 更改的原因是因为在我分配事件处理程序时已经插入了广告。当同步加载广告时，我可以立即测量容器 div 的尺寸并获取广告尺寸。异步加载时，我可以通过使用存储原始 html 并轮询更改并在更改发生时测量容器 div 来轮询内部 html 更改。感谢 Brad 抽出宝贵时间。
【讨论】：