DFP 自适应广告

Question

我在网站上运行响应式 DFP 广告时遇到了问题。我阅读了所有 google 规范，但仍然无法理解。

<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

这是您要实现的目标的简化版本（考虑到您的尺寸映射很奇怪，因为您将在视口为 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());

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

Answer 2

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

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

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

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

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

DFP 自适应广告

DFP responsive ads

google-dfp