DFP响应式广告

时间：2016-10-25 14:52:46

标签： google-dfp

我在网站上运行自适应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);

你可以请一些明确的方法让它在移动设备上运行完美吗？ 感谢

6 个答案:

答案 0 :(得分：3)

您的代码不正确，因为它没有将尺寸映射与广告单元相关联。 请注意我的代码中的粗体部分： 'DIV-GPT-AD-1431019765846-0'）的 .defineSizeMapping（映射） .addService（googletag的 另外，我认为每个广告位都需要不同大小的映射。 我举个例子： 1.您的网站顶部有一个大横幅，假设广告单元（广告位）名为广告牌。因此，如果它是桌面，你想要提供一个大横幅 - 1000x300，如果大平板电脑或小型桌面 - 728x90，如果它是移动设备移动排行榜 - 320x100。 2.比你有另一个广告单元，假设它叫做矩形。您希望它在桌面上提供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>

答案 1 :(得分：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.从第一个插槽开始创建广告插槽的数组。但是如果要调用第二个插槽，则应在第一个插槽之后添加类似的内容（注意[1]，接下来将是[2]等等）：

gptAdSlots[1] = googletag.defineSlot('/4421777/Textlink2', [300, 250], 'div-gpt-ad-1431019765846-1').defineSizeMapping(mapping2).addService(googletag.pubads());
  1. 您还应该在广告单元尺寸中列出尺寸映射中定义的所有尺寸。 DFP广告管理系统广告单元设置和DefineSlot调用（我已在上面完成）。

答案 2 :(得分：0)

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

＆＃13;
＆＃13; 
    <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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

.defineSizeMapping(mapping2)

答案 4 :(得分：0)

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

完整示例：

let
    Source = Excel.CurrentWorkbook(){[Name="Table1"]}[Content],
    #"Changed Type" = Table.TransformColumnTypes(Source,{{"Column 1", type text}, {"Column 2", type text}}),
    #"Sorted Rows" = Table.Sort(#"Changed Type",{{"Column 2", Order.Ascending}, {"Column 1", Order.Ascending}}),
    #"Merged Queries" = Table.NestedJoin(#"Sorted Rows", {"Column 1"}, #"Sorted Rows", {"Column 1"}, "Filtered Rows", JoinKind.LeftOuter),
    #"Expanded Filtered Rows" = Table.ExpandTableColumn(#"Merged Queries", "Filtered Rows", {"Column 2"}, {"Filtered Rows.Column 2"}),
    #"Pivoted Column" = Table.Pivot(#"Expanded Filtered Rows", List.Distinct(#"Expanded Filtered Rows"[#"Filtered Rows.Column 2"]), "Filtered Rows.Column 2", "Column 1", List.Count)
in
    #"Pivoted Column"

答案 5 :(得分：0)

您只需要定义adSlot变量

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