How to Make Your Website Responsive Using DFP
First thing’s first. Why is a responsive site important? In an age where over half of digital advertising revenue comes from mobile web traffic, it’s important that your website is compatible. Setting up responsive ads on your website will ensure a seamless experience between desktop, tablet and mobile browser formats for your users, no matter the device. With a little organization, you can update your site in a few simple steps.
Step 1: Organize Your Inventory
Start with a general overview of your website. What is the basic layout of your site? Are ads placed differently depending on page type on your site? Do certain ad sizes only exist on specific pages or page types? With this information, create a map of each page layout on your site. Once you have the ad slots mapped out, decide which ad sizes will fill your ad inventory depending on screen size. For instance, if you have a banner across the top of your homepage, it would make sense for it to show a 970×90 or 728×90 banner on a desktop, a 468×60 banner on a tablet, and a 320×50 banner on a mobile device. When this is all mapped, it’s time to organize your inventory in DFP.
Step 2: Set-Up Placements and Ad Units in DFP
Ad units are the basic unit of inventory in DFP, which can be targeted by line items when trafficking creative. Placements are optional but can be used to group ad units together for organization and trafficking.
Using the sitemap you laid out in step one, define the different types of placements that you will need to create. Keep in mind that the point of placements is to organize your site’s inventory for easier trafficking. If all of the pages where articles are published have the same layout on your site, then you can make an “Articles” placement and group all ad units that will serve on those pages underneath. The number of placements you create will be determined by how your inventory is sold to advertisers, and what kind of organization would help with trafficking those orders.
Once you have defined the placements, you can create the ad units that will be placed within each. Using the example in Step 1, you may create a placement called “Homepage” that will include all ad units that can run on the homepage You would then create an ad unit called “Homepage Top Banner.” This ad unit would run on the homepage and include the sizes 970×90, 728×90, 468×60, and 320×50.
You do not need to define every ad unit on the entire site, only the unique ad units within each different type of page. For instance, if there is a “right side banner” that can serve either a 300×600 or 300×250 on the pages of your site with sports content, you only need to create one ad unit. In this example, it could be called “Sports Right Banner” and include the 300×600 and 300×350 sizes. Once you’ve organized your inventory in a way that makes sense for your site, generate GPT code to place on your website.
Step 3: Add Size Mapping
This is the part of setting up your ads that will differ the most from your old set up. When looking at the defined slots generated in DFP, you will need to add code that instructs the slots on which size to serve dependent on the size of the page where the ad is being viewed.
In order to do this, you would call the .sizeMapping function to map the ad sizes you will be using, and then call the .defineSizeMapping function to instruct DFP where those ad sizes will serve in the part of the DFP ad unit code that goes in the header of your website’s HTML.
How your size mapping is set up and defined will depend on the screen sizes where you want certain ad slots to serve and the sizes of ads you’re serving. For more specifics on setting up size mapping, visit these Google resources:
- https://support.google.com/dfp_premium/answer/3423562
- https://support.google.com/dfp_premium/answer/4578089?hl=en
Step 4: Traffic Partner Tags
Reach out to your partners for any tags you may need to update for direct or programmatic buys. Be sure to let the partner know that you are updating your site to be responsive, and request any new tag sizes you may need from them.
You’re Done!
Join the discussion…
