13

这是我当前的代码。

// 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

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

4

2 回答 2

10

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

在这部分代码中，您是说此广告位可以加载一个728x60或一个375x60尺寸的广告，这将是随机选择的，也可以根据 DFP 中的配置方式以特定优先级选择。

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

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

您可以使用谷歌标签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您可以将高度设置为），第二个参数告诉 DFP 它应该加载一个或满足浏览器尺寸要求时的广告。0320x50300x50

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>

您可以在此处找到更多大小映射示例，并在此处找到所有 googletag 方法的定义。

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

googletag.defineSlot('/6355419/travel', 'fluid', 'ad-slot')
于 2019-01-16T17:39:13.707 回答
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>

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

于 2019-01-14T00:26:11.150 回答