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

时间:2019-01-09 09:47:10

标签: javascript css html5 google-dfp gpt

这是我当前的代码。

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

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

2 个答案:

答案 0 :(得分:8)

大多数通过DFP广告管理系统投放的广告在传统意义上都没有响应,原因是因为广告本质上只是静态图像。因此,您需要定义一个尺寸图,告诉DFP广告管理系统哪个广告会在加载时以特定的屏幕尺寸获取广告。

在您的代码的这一部分中,您说的是此广告位可以加载728x60375x60尺寸的广告,该广告将随机选择或具有特定的优先级,具体取决于在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广告管理系统DFP应该在浏览器的宽度/高度375 / 60(如果只在意宽度的情况下将高度设置为0)中使用此sizemap,第二个参数是告诉DFP广告管理系统,当满足浏览器大小要求时,应加载320x50300x50广告。

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

或者,您可以选择投放具有响应性的原生广告,,但是由于大多数广告不是以这种方式制作的,因此您需要广告素材来支持它。您可以了解有关原生广告herehere的更多信息。他们的服务非常相似。

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

答案 1 :(得分:1)

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

IndexOutOfBoundsException

在您的情况下,我编辑了您的代码,因此它应以这种方式工作。您可以根据要定位的屏幕进行调整:

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);

有关更多信息,您可以检查以下链接: https://developers.google.com/doubleclick-gpt/reference#googletagslot