Google DFP mapping

Question

On the template 

<div id='div-gpt-ad-1538471082052-0' class='wide-ad'>
	<script>
	googletag.cmd.push(function() { googletag.display('div-gpt-ad-1538471082052-0'); }); 
	</script>
</div>

 

On .js file

googletag.cmd.push(function() {

//staging mapping leaderboard
    var mappingBigleaderboard_home = googletag.sizeMapping().
            addSize([768, 0], [728, 250]). //desktop   
            addSize([500, 0], [425, 146]). //phone 
            addSize([0, 0], [320, 110]). //phone 
            build();
            
//staging big leaderboard
    window.BigStagingLeaderboardHomeSlot = googletag.defineSlot('/181891612/Staging_BigLeaderboard_Home', [[728, 250], [320, 110]], 'div-gpt-ad-1538471082052-0').defineSizeMapping(mappingBigleaderboard_home).addService(googletag.pubads()); 
    
    
    googletag.pubads().enableSingleRequest();
    googletag.pubads().enableSyncRendering();
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();

});

 

Answer 1

// set min-width for each addSize for cleaner code. example;
//smallest breakpoints for 610px creative is 768 breakpoint, so this creative will show to anything from 768 to 2000 or more.
    var mappingInArticle = googletag.sizeMapping(). 
      addSize([768, 0], [610, 150]). //desktop 
      addSize([0, 0], [300, 100]). //phone 
      build();