How To Display a Medium Ad with Wraparound Text in the Responsive Theme

Feb 20, 2015

This tutorial describes how to run medium ads with wrap-around custom text — that is, some kind of header or footer text, typically used to identify the image as an advertisement. For example, the ad to the right has a heading that says, "Support for Michigan Radio is provided by."

Many stations did this sort of thing with Core Publisher in the past by using a "third party" ad, which is a type of DFP creative unit where you can add custom html. Doing so with the responsive theme requires making a few adjustments, however.

The responsive theme delivers DFP ads according to the latest best practices. Since this means that ads get served inside iframes with a fixed height, the method that worked in the past no longer works — the iframe can truncate the ad unit if you insert additional text. In the worst cases, this can result in losing critical parts of the ad, such as the call-to-action button, which obviously isn't acceptable.

The solution
The solution has three parts. I'll go through them at a high level first, and then get into a more detailed explanation for those who are less familiar with DFP. 

First, add a new size to the inventory sizes field in your line item (300x300 for a medium ad). Then, create a new ad and set its target ad unit size to the new 300x300 size. Add some heading text or footer text and save the new ad — you're almost done. The last step is to go back into the new ad's settings, check the size overrides field checkbox, and add 300x250 to the input. Once you save your changes, the new ad will display in an iframe with enough height to accommodate extra text. 

Not sure that makes sense? Thanks to Michigan Radio, who worked with us to fine-tune these guidelines, here's a more in-depth explanation.

1. Add a new inventory size.

Go to the line item where you want to create an annotated ad, and click on the Settings tab. We're interested in adding one element to the list of inventory sizes, which you'll find just below the field for editing the line item's name (see it in the screen-grab below, where it's circled in red).

You may see a size of 300x250 in the list, which is the default size for medium ads, and — unless we tell DFP otherwise — will be the size of our iframe. Since we want extra room for text above and/or below the medium ad, we need to add a new size. 

We'll add a new size of 300x300, since that will be tall enough for the iframe to accommodate both a header and a footer without truncating any content. Without deleting 300x250, simply type a new size into the field. Your list of inventory sizes should now include 300x250 as well as the new 300x300.

2. Prepare a new template

Based on the advice of experts at National Public Media, we suggest using a user-defined template. It takes a couple of extra steps to set up, but once it's in place you'll find it's easier and more reliable. If you'd rather use a third party ad unit instead, that's fine, too — just be sure to set its target ad size to 300x300.

We've created two user-defined templates you can choose from — a header-only template and a template for header and footer text. Both are .txt files that you can download from our site and then import into your DFP account: 

Once you've downloaded these files, go to the Creatives option in the DFP left-column — and then select "Creative templates." Click the new creative template button (see the sequence of steps in image below).

This will take you to a page where you have the option to import an existing template (see image below). Click the import button and select one of the files you just downloaded.

Give it a moment to import the file — once it does, the appropriate fields will be filled out for you, including variables and a code snippet. Click save!

3. Create a new ad with the user-defined template

Now that the user defined template is saved, you can use it to create a new ad. Go to your line item, click add creatives, and click on the option called "user defined template" (see below). This will give you an empty field where you can type the name of your new template. Don't worry if you forget the name because as soon as you click in the field, you'll see a drop-down menu where you can select the appropriate template — in this case, we'll select "Medium ad with heading text." 

The user-defined template will display several fields for you to fill out. Some of these are self-evident or will depend on how your station generally runs ads. For the purposes of this tutorial, I'll describe the most relevant ones.

  • Target ad unit size: set to 300x300, the new size you previously added to your line item.
  • Image file: the ad image, usually a .gif or .jpg file.
  • Heading text: the heading, for example, "We thank our sponsors." Try not to exceed 40 characters, including spaces — less, if you use uppercase. DFP lets you preview your ad, so check the preview if you aren't sure.
  • Click-through URL: the destination of the ad unit click.

If you're using the template for both header and footer text, there will be a couple of additional fields. 

  • Footer text: Use this to promote becoming a sponsor, for example, "Become a sponsor."
  • Sponsor information URL: Link to a page about becoming a sponsor, for example,

Once you've entered the right settings, click save. Only one more step!

4. Configure the new ad to override the 300x250 size

Go to the ad units Settings page, and find the size overrides field. Check the override checkbox and enter 300x250 in the input field. This tells DFP that it should serve the new ad to the right places — that is, to the same place you'd want your standard 300x250 ads to display. Be sure to save the new settings, and the ad will start delivering as soon as DFP is ready!

The new ad should have its size overrides field set to 300x250. Once that's, done, save it and the ad will deliver.