Wyświetlanie reklam w usłudze DFP w pełni responsywnej

Question

Mam zmodyfikowaną wersję GPT (Tagi wydawcy Google), więc wyświetla reklamy w rozmiarze na telefony i tablety, a inne w przypadku komputerów lub większych ekranów. Działa dobrze, ale rozmiary są określane na podstawie obciążenia i podczas używania tabletu reklamy pozostają takie same, niezależnie od tego, czy przechodzisz z widoku poziomego na pionowy. Dodałem kod, aby dynamicznie odświeżać reklamy na rozmiarach w oknach i działa jak odświeżający, ale rozmiary są nadal ustalane (zakładam) pod względem obciążenia i rozmiary reklam się nie zmieniają. Jak mogę odświeżyć/przeładować zmienne (rozmiar i rozmiar2) na rozmiar okna przed odświeżeniem reklam?
Jest to kod:

<script type='text/javascript'> 
    googletag.cmd.push(function() { 
    var width = document.documentElement.clientWidth; 
    var size; 
    if (width >= 320 && width < 728) 
    size = [320, 50]; // smartphones 
    else 
     size = [728, 90]; // desktops and tablets 
    var size2; 
    if (width >= 320 && width < 728) 
    size2 = [180, 150]; // smartphones 
    else 
    size2 = [160, 600]; // desktops and tablets 
    var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads()); 
    var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads()) 
    googletag.pubads().enableSingleRequest(); 
    googletag.enableServices(); 

    $(window).resize(function(){googletag.pubads().refresh([slot1, slot2])}); 
    }); 
    </script> 

Answer 1

Masz rację, rozmiary są oceniane tylko na stronie obciążenia. Jeśli chcesz uzyskać nową szerokość wyświetlania po obróceniu urządzenia, musisz pobrać szerokość w wywołaniu resize (i prawdopodobnie ponownie zdefiniować adsloty o tych rozmiarach).

$(window).resize(function(){ 
    var width = document.documentElement.clientWidth; 
    var size; 
    if (width >= 320 && width < 728) 
    size = [320, 50]; // smartphones 
    else 
     size = [728, 90]; // desktops and tablets 
    var size2; 
    if (width >= 320 && width < 728) 
    size2 = [180, 150]; // smartphones 
    else 
    size2 = [160, 600]; // desktops and tablets 
    var slot1=googletag.defineSlot('/XXXXXXX/tp_home_topboard', size, 'div-gpt-ad-1380075538670-3').addService(googletag.pubads()); 
    var slot2=googletag.defineSlot('/XXXXXXX/tp_home_skyscraper', size2, 'div-gpt-ad-1380222668349-0').addService(googletag.pubads()) 
    googletag.pubads().enableSingleRequest(); 
    googletag.pubads().refresh([slot1, slot2]); 
}); 

To nie jest testowane, ale myślę, że powinno to doprowadzić cię we właściwym kierunku. Jeśli nadpisywanie reklam nie zadziała, możesz także pomyśleć o utworzeniu czterech różnych reklam na początku i wyświetlać je tylko w oparciu o bieżący rozmiar ekranu (i ukrywać inne).

Answer 2

Google faktycznie ma pełny przykład odświeżania reklam dowolnie za pomocą metody setTargetting API. Oto sedno to:

<script> 

    googletag.cmd.push(function() { 

    // Define the ad slot 
    var slot1 = googletag.defineSlot("/6355419/Travel", [728, 90], "leaderboard"). 
    setTargeting("test", "refresh"). 
    addService(googletag.pubads()); 

    // Start ad fetching 
    googletag.enableServices(); 
    googletag.display("leaderboard"); 

    // Set timer to refresh slot every 30 seconds 
    setInterval(function(){googletag.pubads().refresh([slot1]);}, 30000); 
    }); 
</script> 

A reszta szczegóły są here - dobre?

Poza tym wystarczy, aby wykryć zmiany orientacji - metoda j0nes „s powinna pracować, tam też zdarzenie orientationChange - Wsparcie przeglądarka jest niekompletna, ale jQuery Mobile ma się orientationchange opakowanie (który wraca do zmiany rozmiaru).

Mam nadzieję, że niektóre z tego pomogą!

Answer 3

Możesz teraz budować elastyczne reklamy za pomocą DFP.

var mapping = googletag.sizeMapping(). 
addSize([1024, 768], [970, 250]). 
addSize([980, 690], [728, 90]). 
addSize([640, 480], [120, 60]). 
addSize([0, 0], [88, 31]). 
// Fits browsers of any size smaller than 640 x 480 
build(); 
adSlot.defineSizeMapping(mapping); 

https://support.google.com/dfp_premium/answer/3423562?hl=en