DoubleClick per i publisher: specifica il browser e le dimensioni dell'annuncio

Sto cercando di caricare i banner in base alle dimensioni del browser. Quindi, in un luogo in cui ho un banner 728x90, un 300x250 mostrerà se è sul cellulare.DoubleClick per i publisher: specifica il browser e le dimensioni dell'annuncio

Il problema è che i carichi 728 x 90 sul desktop. ma sul cellulare il 300x250 non mostra.

ho provato seguendo l'esempio 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>

e nel mio 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>

devo mettere la <div> per ogni formato nella stessa posizione? Come faccio a caricare il banner 300x250? il 728x90 funziona bene. So che potrei nascondere/mostrare in base alla dimensione del browser utilizzando CSS. ma non voglio farlo. Il caricamento di più dimensioni nella stessa posizione rallenta il caricamento dei miei siti.

fonte

2016-03-21 user2636556

Forse ha qualcosa a che fare con 'window.LeaderSlot'? Nell'esempio c'è un array e qui hai solo una variabile che stai sostituendo. – jolmos

Non è necessario style='height:90px; width:728px;' poiché si desidera che DFP carichi il banner appropriato in base alle dimensioni dello schermo.

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

quando si esegue il test sul browser utilizzando diverse dimensioni dello schermo, tenere presente che i banner non vengono ridimensionati automaticamente. Dovrai aggiornare la tua pagina per vedere le modifiche.

fonte

2016-04-04 06:10:50

Non ho davvero visto la possibilità di salvare l'esempio che hai fornito, quindi ho creato un esempio, che ha funzionato perfettamente per me. Spiegherò un po 'in basso.

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

In primo luogo si deve chiamare .sizeMapping() per mappare le dimensioni degli annunci alle dimensioni del browser e quindi è necessario chiamare .defineSizeMapping() per implementare la mappatura.

La prima dimensione specificata per addSize è la dimensione dello schermo e ogni dimensione successiva è una dimensione di annuncio. Ad esempio, nel primo addSize() definito sopra, [1024, 768] è la dimensione del browser e [970, 250] è la dimensione dell'annuncio.

Se è presente un errore nella mappatura o se la dimensione dello schermo non può essere determinata per qualsiasi motivo, verrà utilizzata la dimensione specificata in .defineSlot().

Gli annunci reattivi GPT non vengono ridimensionati in base alla modifica delle dimensioni del browser. Puoi aggiungere il tuo codice personalizzato per aggiornare le aree annuncio al ridimensionamento.

La funzione per questo è questo:

googletag.pubads().refresh();

Se ci sono altre domande, me lo faccia sapere per favore.

fonte

2016-03-31 16:28:05 AppRoyale

DoubleClick per i publisher: specifica il browser e le dimensioni dell'annuncio

risposta

Problemi correlati