发布者双击:显示响应式广告

大多数通过DFP交易的广告在传统意义上没有反应,原因是广告本质上只是一个静态图像。因此,您需要做的是定义一个大小映射,它告诉DFP在加载特定屏幕大小时,它应该获取哪些广告。

在代码的这一部分中,您说这个槽可以加载 728x60 或A 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 (您可以将高度设置为 0 如果您只关心宽度),第二个参数是告诉DFP它应该加载 320x50 或A 300x50 满足浏览器大小要求时发出广告。

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

浏览器大小是最小值,这意味着在下面的示例中,如果浏览器大小为1028宽或更大,它将加载 728x90 如果宽度低于1028,则加载 32×50 广告。

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

DFP将只在初始加载时检查浏览器大小,它将 不 默认情况下,调整屏幕大小时刷新。您可以使用另一个dfp helper方法刷新广告槽,但您需要编写额外的逻辑,首先检查屏幕的大小。

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 以及所有googletag方法的定义 here .

或者,你可以选择通过本地的响应性广告, 但是你需要广告创意来支持它,因为大多数广告不是这样建立的 . 你可以了解更多关于本土广告的信息 here 和 here . 他们得到的服务非常相似。

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

我阅读了文档,得到了问题的解决方案,这是文档中的示例解决方案:

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