DoubleClick for Publishers：ブラウザと広告のサイズを指定する

ブラウザのサイズに応じてバナーを読み込もうとしています。したがって、728x90のバナーがある場所では、モバイルの場合は300x250が表示されます。DoubleClick for Publishers：ブラウザと広告のサイズを指定する

問題は、728x90がデスクトップに読み込まれるという問題です。モバイルでは300x250は表示されません。

私は一例にhere

<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を使ってブラウザのサイズに合わせて表示/非表示を切り替えることができます。しかし、私はそれをしたくありません。複数のサイズを同じ場所に読み込むと、サイトの読み込みが遅くなります。

出典

2016-03-21 user2636556

おそらく、 'window.LeaderSlot'と何か関係がありますか？この例では配列ですが、ここでは置換する変数は1つだけです。 – jolmos

style='height:90px; width:728px;'は、DFPで画面サイズに応じて適切なバナーを読み込ませるため、必要ありません。

<!-- /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>

さまざまな画面サイズでブラウザでテストすると、バナーのサイズが自動的に変更されないことに注意してください。変更を確認するには、ページを更新する必要があります。

出典

2016-04-04 06:10:50

あなたが提供したサンプルを保存する機会は本当にありませんでしたので、私は完全に私のために働く例を作成しました。一番下に少し説明します。

<html> 
     <head> 
     <title>Async Responsive</title> 
     <script async src="http://www.googletagservices.com/tag/js/gpt.js"> 
     </script> 
     <script> 
      googletag = window.googletag || {cmd:[]}; 
      googletag.cmd.push(function() { 

      var sizeMapping = googletag.sizeMapping(). 
       addSize([1024, 768], [970, 250]). // Screens of any size smaller than infinite but bigger than 1024 x 768 
       addSize([980, 690], [728, 90]). // Screens of any size smaller than 1024x 768 but bigger than 980 x 690 
       addSize([640, 480], [120, 60]). // Screens of any size smaller than 980 x 690 but bigger than 640 x 480 
       addSize([0, 0],  [88, 31]). // Screens of any size smaller than 640 X 480 but bigger than 0 x 0 

       build(); 

      googletag.defineSlot(
       '/XXXXXX/ad-unit-inside-dfp/level2/level3', [320, 50], 'div-id'). 
       defineSizeMapping(sizeMapping). 
       addService(googletag.pubads()); 

      googletag.enableServices(); 
      }); 
     </script> 
     </head> 
     <body> 
     <h1>user2636556 Testpage</h1> 
     <div id="div-id"> 
      <script> 
      googletag.cmd.push(function() { googletag.display('div-id') }); 
      </script> 
     </div> 
     </body> 
</html>

まずあなたは、ブラウザのサイズに広告サイズをマッピングするために.sizeMapping（）を呼び出す必要があり、その後、あなたはマッピングを実装するために.defineSizeMapping（）を呼び出す必要があります。

addSizeに指定する最初のディメンションは画面サイズで、その後の各ディメンションは広告サイズです。たとえば、上記で定義された最初のaddSize（）では、[1024,768]はブラウザのサイズで、[970,250]は広告のサイズです。

マッピングにエラーがある場合、または何らかの理由で画面サイズを特定できない場合は、.defineSlot（）で指定されたサイズが使用されます。

GPT応答広告は、ブラウザのサイズの変更に応じてサイズ変更されません。独自のカスタムコードを追加して、サイズ変更時に広告スロットを更新することができます。これに順に

機能は、このいずれかになります。

googletag.pubads().refresh();

さらにご質問がある場合は、私にしてください教えてください。

出典

2016-03-31 16:28:05 AppRoyale

DoubleClick for Publishers：ブラウザと広告のサイズを指定する

答えて

関連する問題