How to Create Responsive Ads in DFP

DoubleClick for Publishers(DFP) is the most favoured ad serving platform and most beginners rely on the server’s services due to its user-friendly and hugely customizable features. Customization is one of the chief factors that determine the success of ad campaigns – be it customization in layouts or content. A web page may look very enticing to a user on his desktop. But if you try to present the identical web page to him on his iPhone, he will have a substandard viewing experience and that will be enough to alienate a member of your base. This is where responsive web design comes into play. Responsive web design is a process in which content can resize, reformat, reorganize and reposition itself in real time, depending on the device on which it is being displayed – whether it’s a desktop, a tablet or a smartphone. This web design helps publishers by enhancing the user experience, but also requires them to resize and reformat ad units to suit the site content. Responsive ads are thus pivotal to blogs and websites that are designed for both mobile and desktop traffic.

Google AdSense provides mobile responsive ads and makes it a very seamless experience for publishers. A snippet of code is all you need in AdSense to serve responsive ads. However, Google’s own DFP does not work in the same way. DFP handles the reins to the publishers when it comes to creating responsive ad units. While it can be a task, most publishers favour it as this enables them to customize their users’ viewing experience.

Also Read:  How to Serve Image Banner Ads via DFP- Tutorial

How to Create Responsive Ads in DFP?

Responsive ads can be built in DFP using the Google Publisher Tag API.

A publisher can specify one or more sizes as the size set for an ad slot. When using the responsive ad functionality, publishers can also choose an alternate size set based on the size of the browser. For example, he can state that if the browser is larger than 1024×768, then ads sized either 970×90 or 728×90 can serve, whereas for smaller browsers only 468×60 ads can serve. Publishers may want to define sizes for desktop, tablet and mobile devices.

Mappings are ordered automatically so that the best-sized creative is used. Publishers can specify a default ad unit size to serve an ad that will fit any browser size if none of the other sizes matches those of the visitor’s browser.

Responsive ad tagging functions for GPT will work in both asynchronous and synchronous modes. However, we recommend not enabling synchronous requests, as synchronous ad tags can delay the loading of a page’s content.

Before implementing responsive ads using GPT, planning the entire responsive web design can be a useful practice. Firstly, define the screen sizes on which your site will be rendered. This is likely to include various devices including desktops, mobiles, tablets in both landscape and portrait orientation. Then define the ad formats and ad sizes that are to be delivered to your site. A publisher can choose the ad slot sizes that he wants to showcase on his site. For example, you can choose to display leaderboards for desktop sites and anchor ads for tablets and mobiles. Now take the screen size and ad size definitions to combine them in a matrix that will make the ad implementation process faster and easier.

Also Read:  What are House Line Items in DFP?

Now to implement the responsive ads, first call sizeMapping to map the ad sizes to browser sizes and then call defineSizeMapping to implement the mapping.

To map the screen size to the ad slot size based on the matrix you prepared earlier, use the ‘addSize’ method. The first dimension defined for addSize is the browser size and each of the dimensions that follow are ad sizes. GPT identifies the browser size, goes through the addSize definitions and then chooses the largest mapping that fits. If you want to have an ad that fits all browser sizes, just map an ad size to the 0×0 browser size.  

Now, define the GPT slot. The size in the defineSlot will be used as the default size if GPT isn’t able to identify the browser size.

With users alternating between different devices through the course of a day, it is very important to provide them with consummate viewing experiences every time. Responsive ads are pivotal to this. So, it is very important for publishers to have a proper understanding of responsive ads. We hope this article has been helpful and will help publishers to implement responsive ads in DFP

Our Recommended Monetization Partners:

Looking to Increase your Ad Revenue: Get in touch with me for a personalised consultation and increase your ad revenue across native, display, video (instream and outstream), in-app and other verticals. I also assist in customized DFP setup, header bidding, and content creation strategy. My skype id is: ronniedey. Feel free to connect!