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>

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

DFP Adverts - How to show adverts in different places depending on screen size

google-dfp