DFP 自适应广告

Question

我无法在我的网站上投放自适应 DFP 广告。 我阅读了所有的谷歌规范，但仍然无法弄清楚。

<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') + 
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>

<script type='text/javascript'>
googletag.cmd.push(function() {
  googletag.defineSlot('/4421777/Textlink', [468, 60], 'div-gpt-ad-1431019765846-0').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.companionAds().setRefreshUnfilledSlots(true);
googletag.pubads().enableVideoAds();
googletag.enableServices();
});

这是我的映射代码：

var mapping = googletag.sizeMapping().
  addSize([1024, 768], [970, 250]).
  addSize([980, 690], [[1000, 300],[320, 50]]).
  addSize([640, 480], [[120, 60],[1000, 300],[320, 50], [468, 60]]).
  addSize([0, 0], [88, 31],).
  // Fits browsers of any size smaller than 640 x 480
  build();
adSlot.defineSizeMapping(mapping);

您能否提供一些明确的方法使其在移动设备等设备上完美运行？ 谢谢

Answer 1

您的代码不正确，因为它没有将尺寸映射与广告单元相关联。 请注意我的代码中的粗体部分： 'div-gpt-ad-1431019765846-0').defineSizeMapping(mapping).addService(googletag 另外，我认为每个广告位都需要不同的尺寸映射。 我举个例子： 1. 您的网站顶部有一个大横幅，假设广告单元（广告位）称为Billboard。因此，如果是桌面设备，您希望投放大横幅 - 1000x300，如果是大型平板电脑或小型桌面设备 - 728x90，如果是移动设备，则投放移动排行榜 - 320x100。 2. 比您有另一个广告单元，假设它称为矩形。您希望它在桌面上投放 300x250 或 300x600。 300x250 在平板电脑和手机上。 3. 然后你有第三个广告单元，假设它叫做Smallbanner。您希望它在台式机和平板电脑上投放 468x60，而在手机上没有横幅广告。

您需要为每个广告单元创建一个尺寸映射，然后在调用时附加它。所以在我的示例中，输出代码将是这样的。我正在添加内联 cmets，以便您可以更好地理解它。

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script type='text/javascript'>
var gptAdSlots = [];
    googletag.cmd.push(function() {
    // Create size mapping for Billboard position. If viewport is above 1000x768 show banner 1000x300. If viewport is above 728x300 (but bellow 1000x768) show banner 728x90, if viewport is lower than 728x300 show banner 320x100
    var billboardsizes = googletag.sizeMapping().addSize([1000, 768], [1000, 300]).addSize([728, 300], [728, 90]).addSize([0, 0], [320, 100]).build();

    // Create size mapping for Rectangle position. If viewport is above 1000x768 (considered as desktop, you may lower the height) show 300x250 OR 300x600. If the viewport is smaller than 1000x768 show 300x250 only.
    var rectanglesizes = googletag.sizeMapping().addSize([1000, 768], [[300, 60], [300, 250]]).addSize([0, 0], [300, 250]).build();

    // Create size mapping for Smallbanner position. If viewport is above 468x300 (considered as desktop + bigger tablets) show 468x60. If smaller, don't show banner.
    var smallbannersizes = googletag.sizeMapping().addSize([468, 300], [468, 60]).addSize([0, 0], []).build();  

    // Now create the first slot. Please note that we add all the sizes described in the size mapping. This should be set in the DFP Ad Unit configuration as well. Please also note the part of the code: .defineSizeMapping(billboardsizes) - it tells DFP what banner to serve on what device size.
    gptAdSlots[0] = googletag.defineSlot('/4421777/billboard', [[1000, 300], [320, 100], [728, 90]], 'div-gpt-ad-1431019765846-0').defineSizeMapping(billboardsizes).addService(googletag.pubads());

    // Now create the second slot. Please note that we add all the sizes described in the size mapping. This should be set in the DFP Ad Unit configuration as well. Please also note the part of the code: .defineSizeMapping(rectanglesizes) - it tells DFP what banner to serve on what device size. We also incremented gptAdSlots[1] by one and the last number of the div id by 1.
    gptAdSlots[1] = googletag.defineSlot('/4421777/rectangle', [[300, 600], [300, 250]], 'div-gpt-ad-1431019765846-1').defineSizeMapping(rectanglesizes).addService(googletag.pubads());

    // Now create the third slot. Please note that we add all the sizes described in the size mapping. This should be set in the DFP Ad Unit configuration as well. Please also note the part of the code: .defineSizeMapping(smallbannersizes) - it tells DFP what banner to serve on what device size. We also incremented gptAdSlots[1] by one and the last number of the div id by 1.   
    gptAdSlots[2] = googletag.defineSlot('/4421777/smallbanner', [468, 60], 'div-gpt-ad-1431019765846-2').defineSizeMapping(smallbannersizes).addService(googletag.pubads());

    googletag.pubads().enableSingleRequest();
    googletag.companionAds().setRefreshUnfilledSlots(true); 
    googletag.pubads().enableVideoAds();    
    googletag.enableServices();
  });   
</script>

Answer 2

这是您尝试实现的简化版本（考虑到您的尺寸映射很奇怪，因为您将在视口为 640x480 的设备上显示 1000x300 的横幅？）。

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script type='text/javascript'>
var gptAdSlots = [];
    googletag.cmd.push(function() {
    var mapping = googletag.sizeMapping().addSize([1024, 768], [970, 250]).addSize([980, 690], [[1000, 300],[320, 50]]).addSize([640, 480], [[120, 60],[1000, 300],[320, 50], [468, 60]]).addSize([0, 0], [88, 31],).build();
    gptAdSlots[0] = googletag.defineSlot('/4421777/Textlink', [[970, 250], [1000, 300], [320, 50], [120, 60], [468, 60], [88, 31]], 'div-gpt-ad-1431019765846-0').defineSizeMapping(mapping).addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.companionAds().setRefreshUnfilledSlots(true); 
    googletag.pubads().enableVideoAds();    
    googletag.enableServices();
  });   
</script>

请注意，有一些小的变化： 1. 从第一个为 0 开始创建一个广告位数组。但如果您想调用第二个广告位，您应该在第一个广告位之后添加类似这样的内容（注意 [1]，下一个将是 [2]等等）：

gptAdSlots[1] = googletag.defineSlot('/4421777/Textlink2', [300, 250], 'div-gpt-ad-1431019765846-1').defineSizeMapping(mapping2).addService(googletag.pubads());

1. 您还应该在广告单元尺寸中列出在尺寸映射中定义的所有尺寸。在 DFP 广告单元设置和 DefineSlot 调用中（我已经在上面完成了）。

Answer 3

我的代码现在是正确的吗？

    <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() {
      var mapping = googletag.sizeMapping().addSize([1600, 1024], [1000, 300]).addSize([980, 690], [[1000, 300],[320, 50]]).addSize([640, 480], [[120, 60],[1000, 300],[320, 50], [468, 60]]).addSize([0, 0], [88, 31],).build();

     gptAdSlots[0] =  googletag.defineSlot('/15076752/300x250_Fifth', [300, 250], 'div-gpt-ad-1476951614543-0').addService(googletag.pubads());
      gptAdSlots[1] = googletag.defineSlot('/15076752/300x250_First', [300, 250], 'div-gpt-ad-1476951614543-1').addService(googletag.pubads());
     gptAdSlots[2] =  googletag.defineSlot('/15076752/300x250_Fourth', [300, 250], 'div-gpt-ad-1476951614543-2').addService(googletag.pubads());
     gptAdSlots[3] =  googletag.defineSlot('/15076752/300x250_Second', [300, 250], 'div-gpt-ad-1476951614543-3').addService(googletag.pubads());
     gptAdSlots[4] =  googletag.defineSlot('/15076752/300x250_Third', [300, 250], 'div-gpt-ad-1476951614543-4').addService(googletag.pubads());
     gptAdSlots[5] =  googletag.defineSlot('/15076752/300x600', [300, 600], 'div-gpt-ad-1476951614543-5').addService(googletag.pubads());
     gptAdSlots[6] =  googletag.defineSlot('/15076752/728x90_Second', [728, 90], 'div-gpt-ad-1476951614543-6').addService(googletag.pubads());
     gptAdSlots[7] =  googletag.defineSlot('/15076752/BillBoard-2-1000x300', [1000, 300], 'div-gpt-ad-1476951614543-7').addService(googletag.pubads());
     gptAdSlots[8] =  googletag.defineSlot('/15076752/Billboard1000x300', [1000, 300], 'div-gpt-ad-1476951614543-8').addService(googletag.pubads());
     gptAdSlots[9] =  googletag.defineSlot('/15076752/Skin_bg', [1600, 1024], 'div-gpt-ad-1476951614543-9').addService(googletag.pubads());
     gptAdSlots[10] =  googletag.defineSlot('/15076752/Text_link', [468, 60], 'div-gpt-ad-1476951614543-10').addService(googletag.pubads());
     gptAdSlots[11] =  googletag.defineSlot('/15076752/Text_link2', [468, 60], 'div-gpt-ad-1476951614543-11').addService(googletag.pubads());
     gptAdSlots[12] =  googletag.defineSlot('/15076752/Text_link3', [468, 60], 'div-gpt-ad-1476951614543-12').addService(googletag.pubads());
     gptAdSlots[13] =  googletag.defineSlot('/15076752/Top_728x90', [728, 90], 'div-gpt-ad-1476951614543-13').addService(googletag.pubads());
  googletag.pubads().enableSingleRequest();
    googletag.companionAds().setRefreshUnfilledSlots(true); 
    googletag.pubads().enableVideoAds();    
    googletag.enableServices();
  });   
</script>

Answer 4

看起来您仍然缺少每个 gptAdSlots[x]

.defineSizeMapping(mapping2)

Answer 5

您可以使用 javascript 检测浏览器宽度

完整示例：

  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    var w = Math.max(
     document.body.scrollWidth,
     document.documentElement.scrollWidth,
     document.body.offsetWidth,
     document.documentElement.offsetWidth,
     document.documentElement.clientWidth
    );
    if(w>=970) {
        googletag.defineSlot('/00000000000/ad', [[970, 90], [728, 90], [468, 60], [320, 50], [300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=728) {
        googletag.defineSlot('/00000000000/ad', [[728, 90], [468, 60], [320, 50], [300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=468) {
        googletag.defineSlot('/00000000000/ad', [[468, 60], [320, 50], [300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=320) {
        googletag.defineSlot('/00000000000/ad', [[320, 50], [300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=300) {
        googletag.defineSlot('/00000000000/ad', [[300, 100], [234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else if(w>=234) {
        googletag.defineSlot('/00000000000/ad', [[234, 60]], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    } else {
        googletag.defineSlot('/00000000000/ad', [], 'div-gpt-ad-00000000000000-0').addService(googletag.pubads());
    }
    googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
  });

Answer 6

您只需要定义 adSlot 变量

var adSlot = googletag.defineSlot('/4421777/Textlink', [468, 60], 'div-gpt-ad-1431019765846-0').addService(googletag.pubads());