DoubleClick for Publishers：显示自适应广告

Question

这是我当前的代码。

// Head
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
    var googletag = googletag || {};
    googletag.cmd = googletag.cmd || [];
</script>
<script>
    googletag.cmd.push(function() {
        googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });
</script>

// Body
<div style="width:100%;text-align:center;margin-bottom:10px">
    <div id='div-gpt-ad-1545041384304-0'>
        <script>
             googletag.cmd.push(function() { googletag.display('div-gpt-ad-1545045413584304-0'); });
        </script>
    </div>
</div>

但是它在 iframe 侧以固定宽度和高度显示横幅。

我怎样才能让它响应？以前我使用自定义 html 同步渲染，但现在已弃用。

实现此目标的最佳方法是什么？

我已关注 - https://support.google.com/admanager/answer/3423562?visit_id=636827968345729217-1005578671&hl=en&rd=2

但是为此我不得不提到屏幕的每个高度和宽度。

Answer 1

我阅读了文档并找到了问题的解决方案，这是文档中的示例解决方案：

var slot = googletag.defineSlot('/1234567/sports', [160, 600], 'div-1').
    addService(googletag.pubads());
var mapping = googletag.sizeMapping().
    addSize([100, 100], [88, 31]).
    addSize([320, 400], [[320, 50], [300, 50]]).
    build();
slot.defineSizeMapping(mapping);

在你的情况下，我编辑了你的代码，所以它应该以这种方式工作。您可以根据您要定位的屏幕进行调整：

<script>
    googletag.cmd.push(function () {
     var adSlot = googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads());
      var mapping = googletag.sizeMapping().
        addSize([1024, 768], [970, 250]).
        addSize([980, 690], [728, 90]).
        addSize([640, 480], [120, 60]).
        addSize([0, 0], [88, 31]).
        // Fits browsers of any size smaller than 640 x 480
        build();
      adSlot.defineSizeMapping(mapping);

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

有关更多信息，您可以查看此 link： https://developers.google.com/doubleclick-gpt/reference#googletagslot

Answer 2

大多数通过 DFP 投放的广告都不是传统意义上的响应式广告，这是因为广告本质上只是一张静态图片。因此，您需要做的是定义一个尺寸图，告诉 DFP 在加载时它应该以特定屏幕尺寸获取哪些广告。

在您的这部分代码中，您说此广告位可以加载 728x60 或 375x60 大小的广告，这将随机选择或根据特定优先级选择关于它在 DFP 中的配置方式。

googletag.defineSlot('/xxxxxx/Mobile_ad', [[375, 60], [728, 60]], 'div-gpt-ad-154504231384304-0').addService(googletag.pubads())

您需要更新代码以包含尺寸映射，让它知道它应该根据正在查看内容的屏幕尺寸获取适当尺寸的广告。

您可以使用 google 标签 defineSizeMapping 方法来做到这一点。

var mapping = googletag.sizeMapping().
  addSize([100, 100], [88, 31]). 
  addSize([320, 400], [[320, 50], [300, 50]]). 
  addSize([320, 700], [300, 250]).
  addSize([750, 200], [728, 90]). 
  addSize([1050, 200], [1024, 120]).build();

googletag.defineSlot('/6355419/travel', [[980, 250], [728, 90], [460, 60], [320, 50]], 'ad-slot')
  .defineSizeMapping(mapping)
  .addService(googletag.pubads())
  .setTargeting('test', 'responsive'); // Targeting is only required for this example.

每个 addSize 调用需要两个参数。在下面的示例中，第一个是一个数组，告诉 DFP 它应该在 375 / 60 的浏览器 width/height 上使用此尺寸图（如果您只关心宽度，可以将高度设置为 0），第二个参数告诉 DFP 在满足浏览器大小要求时应该加载 320x50 或 300x50 广告。

addSize([320, 400], [[320, 50], [300, 50]])

浏览器尺寸是最小值，这意味着在下面的示例中，如果浏览器尺寸为 1028 宽或更大，它将加载 728x90 广告，低于 1028 宽的任何内容都将加载 320x50广告。

.addSize([1028, 0], [[728, 90]])
.addSize([0, 0], [[320, 50]])

DFP 只会在初始加载时检查浏览器大小，在您调整屏幕大小时默认情况下不会刷新。您可以使用另一种 DFP 帮助程序方法来刷新广告位，但您需要编写额外的逻辑来首先检查屏幕的尺寸。

googletag.pubads().refresh(['ad-slot'])

这是一个如何与多个 sizemap 断点一起工作的示例，您需要将其保存为 HTML 文件并在本地尝试它，因为 JSFiddle 和 Codepen 使用的 iFrame 会导致它运行不正确。加载页面，调整屏幕大小，然后再次重新加载，您将根据浏览器的当前大小获得适当大小的广告。

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

<script type='text/javascript'>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];

</script>

<script type='text/javascript'>
  googletag.cmd.push(function() {
  // Defines the size mapping, there are multiple examples here.
  var mapping = googletag.sizeMapping().
    addSize([100, 100], [[88, 31]]). 
    addSize([320, 400], [[320, 50], [300, 50]]). 
    addSize([320, 700], [[300, 250]]).
    addSize([750, 200], [[728, 90]]). 
    addSize([1050, 200], [[1024, 120]]).build();

    // Enables async rendering and single request.
    googletag.pubads().enableSingleRequest();
    googletag.pubads().enableAsyncRendering();

    // Here the slot is defined, the smallest advert should be defined as the slot value
    // as this gets overwritten by the defineSizeMapping call.
    googletag.defineSlot('/6355419/travel', [320, 50], 'ad-slot')
      .defineSizeMapping(mapping)
      .addService(googletag.pubads())
      .setTargeting('test', 'responsive'); // Targeting is only required for this example.

    // Tells the advert to display.
    googletag.enableServices();

  });

</script>


<div id='ad-slot'>
  <script type='text/javascript'>
    googletag.cmd.push(function() {
      googletag.display('ad-slot');
    });
  </script>
</div>

您可以找到更多尺寸映射示例 here and a definition of all googletag methods here。

或者，您可以选择投放响应式原生广告，但您需要广告素材支持它，因为大多数广告并非以这种方式构建。您可以了解有关原生广告的更多信息 here and here。他们得到的服务非常相似。

googletag.defineSlot('/6355419/travel', 'fluid', 'ad-slot')

DoubleClick for Publishers：显示自适应广告

DoubleClick for publishers: Displaying responsive ads

html

javascript

css

google-dfp

gpt