Responsive design became the standard in web after the smartphone revolution. With more and more users moving to their smart phones for most of their internet needs and content, websites started adjusting themselves to the phone by means of responsive design. Nowadays, very few websites you’ll find online which are non responsive. This called for the next big thing that needed to fit in – responsive ads. DFP gives the right set of options to achieve this. Responsive ads give a better user experience by showing ads that fit to the browser view-port of the devices.
Yes. Browser viewport refers to the actual visible space in the browser where the content is displayed. Here’s a image which breaks it down.
Let’s go step by step to get it started using a sample code snippet:
var mapping = googletag.sizeMapping().
addSize([1024, 768], [970, 250]).
addSize([980, 690], [728, 90]). // iPad 2 viewport
addSize([640, 480], [120, 60]).
addSize([0, 0], [88, 31]). // Default ad request size
Use addSize to define the size of the viewport eg. [980, 690] , and the ad request size to be sent after a comma eg. [728, 90] when the user’s viewport is matching. [0,0] is the system default which will cater to any browser viewport and is taken if none of the size mapping is matching the viewport. The largest mapping is always taken into consideration.
Here’s a responsive ads test page which you can refer for responsive ad calls. You can use Google Console for checking the browser viewport size while resizing your browser window for testing. Here are few modes. You could also go for Chrome Developer Tool’s emulator for checking the various device options. Here are few browser viewport which came up while testing.
360×640 viewport ad request
Change the browser viewport and see the associated ad request size in Charles. Notice that only ads that fit in the viewport are displayed (if proper mapping is done) which is a must for good user experience in responsive websites. Happy responsive designing 🙂