I have a page with a banner advert that will shrink/grow depending on screen size or if it's desktop or mobile.
The banner will be displayed with in one div.
The adverts are in three different advert ID's that each have their own size:
Example:
ad-1 is 1220x350
ad-2 is 650x190
ad-3 is 300x250
How do I make the correct advert display in a div depending on the div size?
You could use sizeMapping to dispatch your sizes based on the viewport size.
First : define the sizeMapping
var mapping = googletag.sizeMapping()
.addSize([1024, 768], [1220, 350])
.addSize([980, 690], [650, 190])
.addSize([0, 0], [300, 250])
.build();
Usage : addSize([screenWidth, screenHeight], [width,height])
Second : add the mapping to your slot definition
var slot = googletag.defineSlot('/adUnitPath/', [[1220, 350], [650, 190], [300, 250]], 'yourTargetId')
.defineSizeMapping(mapping)
.addService(googletag.pubads());