DFP Small Business / DoubleClick で、3 つの異なるサイズの広告ユニットと、指定されたサイズごとに 1 つのクリエイティブの次の広告タグを生成しました。したがって、広告ユニットには 3 つの異なるサイズがあり、更新を押すと、広告は指定した 3 つの広告サイズのいずれかに変わります。これは問題なく機能しますが、広告でやりたいことではありません。
広告でこれを行いたい：
ブラウザの幅に基づいて広告のサイズを変更したいので、たとえば、閲覧者のブラウザの幅が 800px より大きい場合は指定された最大サイズで広告を表示し、ブラウザの幅が 600 ～ 800 の場合は 2 番目に大きいサイズを使用します。広告のサイズを指定し、最後に、広告が 600px より小さい場合は、最小の広告サイズを使用します...広告はブラウザの幅の変更に応じてサイズを変更する必要があります。800、600-800、および 600 未満は実際のサイズではなく、サイズの例にすぎませんが、とにかく、3 つの広告サイズは次の行で指定されています。
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 は次のとおりです (広告のサイズがランダムに変化することを確認するには、実行または更新を押します)。
繰り返しますが、ブラウザの幅のサイズ/変更に応じて広告のサイズを変更したいと思います。誰かがこれを達成する方法を考え出すのを手伝ってくれるなら、それは私にとって本当に大きな意味があります! :)