DFP广告管理系统:显示自适应广告

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

大多数通过DFP广告投放管理的广告在传统意义上都没有响应,其原因在于广告基本上只是一个静态图片.因此,您需要做的是定义一个尺寸图,告诉DFP广告管理系统在加载时应按特定屏幕尺寸获取哪些广告.

在您的代码的这一部分中,您说这个广告位可以加载广告728x60或375x60大小广告,这可以随机选择,也可以选择具有特定优先级,具体取决于广告管理系统中的配置方式.

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

你可以找到尺寸变换的一些例子在这里和所有方法googletag的定义在这里.

或者,您可以选择投放具有响应性的原生广告,但您需要广告创意来支持它,因为大多数广告都不是以这种方式构建的.您可以在此处和此处详细了解原生广告.他们的服务非常相似.

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