ブラウザのサイズに応じてバナーをロードしようとしています。したがって、728x90 のバナーがある場所では、モバイルでは 300x250 が表示されます。
問題は、728x90 がデスクトップに読み込まれることです。しかし、モバイルでは 300x250 は表示されません。
ここの例に従ってみました
<script type='text/javascript'>
googletag.cmd.push(function() {
// This mapping will only display ads when user is on desktop sized viewport
var mapLeader = googletag.sizeMapping().
addSize([0, 0], []).
addSize([768, 200], [728, 90]).
build();
// This mapping will only display ads when user is on mobile or tablet sized viewport
var mapLeader2 = googletag.sizeMapping().
addSize([0, 0], []).
addSize([768, 200], []). // Desktop
addSize([300, 200], [300, 250]). // Tablet
build();
window.LeaderSlot= googletag.defineSlot('/XXXXXXX/leaderboard-1', [728, 90], 'div-gpt-ad-1455251022145-0').
defineSizeMapping(mapLeader).
setCollapseEmptyDiv(true).
addService(googletag.pubads());
window.LeaderSlot= googletag.defineSlot('/XXXXXXX/medium-rectangle-1', [300, 250], 'div-gpt-ad-1458546777123-0').
defineSizeMapping(mapLeader2).
setCollapseEmptyDiv(true).
addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.pubads().enableSyncRendering();
// Start ad fetching
googletag.enableServices();
});
</script>
そして私のHTMLで
<!-- /XXXXXX/leaderboard-1 -->
<div id='div-gpt-ad-1455251022145-0' style='height:90px; width:728px;' class="center">
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1455251022145-0'); });
</script>
</div>
<!-- /XXXXXX/medium-rectangle-1 -->
<div id='div-gpt-ad-1458546777123-0' style='height:250px; width:300px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1458546777123-0'); });
</script>
</div>
<div>
各サイズを同じ場所に配置する必要がありますか? 300x250 のバナーをロードするにはどうすればよいですか? 728x90 は正常に動作します。CSSを使用してブラウザのサイズに応じて非表示/表示できることを知っています。しかし、私はそれをしたくありません。同じ場所に複数のサイズを読み込むと、サイトの読み込みが遅くなります。