DFP广告 - 如何根据屏幕尺寸在不同位置展示广告

Question

我正在使用Google DFP广告，并希望更改在移动设备上查看网站时所处的位置。

我曾尝试复制广告并展示一个/隐藏另一个广告，但仍会显示两个广告。

有没有办法实现这一目标，请参阅附图，了解我的目标。

Answer 1

嗯，这有点困难，但并非不可能。我将为您提供更复杂的示例，其中不仅横幅可以位于不同的位置，而且可能具有不同的尺寸，具体取决于设备。

场景：您有一个名为 adunit1 的广告单元。您希望在桌面上的内容中显示，但在移动设备上显示。在桌面上你想要300x250，在移动设备上你想要320x100或320x50。我们认为桌面的所有内容都是视口宽度为970px，移动设备的尺寸更小（可以增加更多的情况，但是不要让它过于复杂）。

第1步：转到DFP中的广告单元选项，然后添加此广告单元将显示的所有尺寸（在我们的方案中：300x250,320x100,320x50）。 步骤2：为每个子场景创建大小映射变量。如下：

var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();

这意味着：如果视口宽度大于970且视口高度大于0，请提供尺寸为300x250的横幅。如果更小，什么也不做。

现在让我们为具有不同变量名称的移动版本做同样的事情：     var adunit1mobile = googletag.sizeMapping（）。addSize（[970,0]，[]）。addSize（[0,0]，[[320,100]，[320,50]]）。build（）; 这意味着：如果视口宽度大于970且视口高度大于0，则不提供任何内容。如果较小，则提供320x100或320x50。

我们现在将定义广告单元，但这样做两次，为桌面和移动设备分配不同的尺寸映射。

对于桌面：

gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());

这里要关注的两个细节：div-banner-desktop - 这是我们想要显示桌面横幅的div id。 defineSizeMapping（adunit1desktop） - 这就是我们告诉DFP广告管理系统根据上面的尺寸规则显示此内容的方法（简要说明：仅当视口宽度至少为970像素时才显示桌面横幅）。

现在为移动设备：

gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());

注意三个细节：div-banner-mobile，defineSizeMapping（adunit1mobile）和gptAdSlots [1] - 我们为下一个插槽渲染增加了1。如果还有更多，每个也应该增加1。

现在转到您的网站，将以下代码放在要显示桌面横幅的位置：

<div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>

现在将此代码放在要显示移动横幅的位置：

<div id="div-banner-desktop">
<script>
googletag.cmd.push(function() { googletag.display('div-banner-desktop'); });
</script>
</div>

整个代码块看起来应该是这样的

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
var gptAdSlots = [];
googletag.cmd.push(function() {

    var adunit1desktop = googletag.sizeMapping().addSize([970, 0], [300, 250]).addSize([0, 0], []).build();

    var adunit1mobile = googletag.sizeMapping().addSize([970, 0],[]).addSize([0, 0], [[320,100],[320,50]]).build();

    gptAdSlots[0] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-desktop').defineSizeMapping(adunit1desktop).addService(googletag.pubads());

    gptAdSlots[1] = googletag.defineSlot('/XXX/adunit1', [[300, 250], [320, 100], [320, 50]], 'div-banner-mobile').defineSizeMapping(adunit1mobile).addService(googletag.pubads());

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