根據DFP廣告管理系統中的瀏覽器寬度更改廣告尺寸

Question

在DFP廣告管理系統標準版/ DoubleClick中，我爲具有三種不同尺寸的廣告單元以及每種指定尺寸的一種廣告單元生成了以下廣告代碼。因此，廣告單元有三種不同尺寸，當您點擊刷新廣告時，廣告會變爲我指定的三種廣告尺寸中的一種。這工作得很好，但它不是我想要的廣告做的，

我自己的廣告做到這一點：

我想基於瀏覽器的寬度上的廣告來改變大小，因此，例如，如果瀏覽器寬度大於800像素，然後以最大指定尺寸顯示廣告，如果瀏覽器寬度在600-800之間，則使用廣告的第二大指定尺寸，最後如果廣告小於600像素，則使用最小的廣告尺寸...廣告應根據瀏覽器寬度變化相應地更改尺寸。 800，600-800和小於600不是實際大小，只例如大小，但不管怎麼說這三個廣告尺寸都在此行中指定：

googletag.defineSlot('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207], [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads()); 

下面是完整的代碼：

<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('/16569348/Different-Sizes-Unit-Test', [[292, 195], [310, 207],  [345, 230]], 'div-gpt-ad-1363309773051-0').addService(googletag.pubads()); 
googletag.pubads().enableSingleRequest(); 
googletag.enableServices(); 
}); 
</script> 

<!-- Different-Sizes-Unit-Test --> 
<div id='div-gpt-ad-1363309773051-0'> 
<script type='text/javascript'> 
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1363309773051-0'); }); 
</script> 

`

下面是該代碼的jsfiddle（命中運行或刷新看廣告隨意改變大小）：

http://jsfiddle.net/Zkm5j/

因此，我希望廣告根據瀏覽器寬度大小/更改相應地更改大小。如果有人能夠幫助我想出一個方法來實現這一點，那對我來說真的意義重大！ :)

Answer 1

根據dfp配置中的設備寬度/高度，您無法真正控制將向用戶提供的訂單項的寬度。

你可以做的是 - 。 觸發廣告時根據設備寬度/高度指定尺寸。例如，如果設備的寬度小於600像素，則只能使用最小的廣告尺寸觸發。例如

if(window.innerWidth < 800){ 
    googletag.defineSlot('ADID', [[292, 195]], 'domid') 
    } 

檢查這兩個演示鏈接，它們觸發不同尺寸的同一個adunit。

爲320x50 - http://tinyurl.com/q2x3562

的300x250 - http://tinyurl.com/o3vx4qk

Answer 2

對於我這個帖子總結的最佳選擇：http://exisweb.net/how-to-use-google-adsense-on-a-responsive-website

我做了一個WordPress插件基於＃3：https://wordpress.org/plugins/responsive-ad-shortcodes/

Answer 3

您應該使用由DFP提供的地圖功能

以下是一個頁面上有5個廣告單元的示例。 第1步：爲每個廣告單元定義所有可能的尺寸。在DFP廣告管理系統的廣告單元設置中定義這些尺寸。 第2步：決定哪個廣告單元將在哪個視口上使用哪些尺寸。代碼如下代碼所示創建大小映射，其變量megaboardsize firstsize等。 步驟3：定義插槽和相應的定義映射，如下所示。

在該示例中，尺寸將在廣告單元送達如下： 廣告單元 - 例如-megaboard：在與視口的設備寬度超過970像素：970x90,970x250,728x90。在視口寬度超過728px：728​​x90的設備上。在視口較小的所有設備上：320x100,320x50 廣告單元 -/XXX/example-300x250-1st：視頻寬度大於920px：300x250,300x600的設備上。在視口寬度超過300px：300x250的設備上。在視口較小的所有設備上：無廣告。

等等......

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

<script> 
var gptAdSlots = []; 
googletag.cmd.push(function() { 

    var megaboardsize = googletag.sizeMapping().addSize([970, 0], [[970,90],[970,250],[728,90]]).addSize([728, 0], [728, 90]).addSize([0, 0], [[320, 100],[320,50]]).build(); 
    var firstsize = googletag.sizeMapping().addSize([920, 0], [[300,250],[300,600]]).addSize([300, 0],[300,250]).addSize([0, 0], []).build(); 
    var secondsize = googletag.sizeMapping().addSize([920, 0], [300,250]).addSize([0, 0],[]).build(); 
    var thirdsize = googletag.sizeMapping().addSize([920, 0], [300,250]).build(); 
    var fourthsize = googletag.sizeMapping().addSize([690, 0], [300,250]).addSize([0, 0],[]).build(); 

    gptAdSlots[0] = googletag.defineSlot('/XXX/example-megaboard', [[970, 90], [320, 100], [320, 50], [728, 90], [970, 250]], 'gpt-megaboard').defineSizeMapping(megaboardsize).addService(googletag.pubads()); 

    gptAdSlots[1] = googletag.defineSlot('/XXX/example-300x250-1st', [[300, 600], [300, 250]], 'gpt-1st').defineSizeMapping(firstsize).addService(googletag.pubads()); 

    gptAdSlots[2] = googletag.defineSlot('/XXX/example-300x250-2nd', [300, 250], 'gpt-2nd').defineSizeMapping(secondsize).addService(googletag.pubads()); 

    gptAdSlots[3] = googletag.defineSlot('/XXX/example-300x250-3rd', [300, 250], 'gpt-3rd').defineSizeMapping(thirdsize).addService(googletag.pubads()); 

    gptAdSlots[4] = googletag.defineSlot('/XXX/example-300x250-4th', [300, 250], 'gpt-4th').defineSizeMapping(fourthsize).addService(googletag.pubads()); 

    googletag.pubads().enableSingleRequest(); 
    googletag.pubads().collapseEmptyDivs(); 
    googletag.enableServices(); 
    }); 
</script>