Advertisement
  1. Code
  2. Advertising
Code

Introduction to Google DFP: Beginning Ad Integration With Your Website

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Introduction to Google DFP.
Introduction to Google DFP Small Business
Introduction to Google DFP: Using Placements
Final product image
What You'll Be Creating

This is the second tutorial of a series about Google DoubleClick for Publishers. DFP is a service that can seem incredibly complicated to the uninitiated, so this series aims to keep it simple.

If you have one or two websites that get moderate amounts of web traffic and you want to know how best to generate revenue, sell ads directly to businesses and optimize your income, then this series is for you. I'll do my best to walk you through the process I go through with my own sites, keeping the jargon simple and sticking to the basics. Please get started by reading part one, Introduction to Google DFP Small Business.

As a reminder, I do participate in the discussions below. If you have a question or topic suggestion, please post a comment below. You can also follow me on Twitter @reifman or email me directly.

What's Google DFP Small Business?

Just to refresh, Google DFP provides a free advertising service that can power ad delivery across your website(s). You can use it to fill ads from Google's own AdSense marketplace as well as from advertisers you sell directly to and other third-party networks. This introductory video provides a simple overview:

Now let's get started instrumenting our website for Google DFP.

Defining Our Ad Inventory

As we reviewed in part one, Ad Inventory is all of the advertising space you have available to sell on your website. If you printed out every page of your website and cut out all the advertisements and stacked them, that stack would represent your inventory.

Instrumenting a Basic Website

For the purposes of this tutorial, I'll guide you through setting up advertising for a new site I'm configuring called ProTools.io. The site uses a knowledge base theme to make it easy to find web services and tools for developers and publishers. 

Let's define our ad inventory for the ProTools website:

Google DFP ProTools Website Advertising Inventory

Initially, I'll offer three advertising spots per page. There will be two in the right sidebar: a small square 250 x 250, and a wide skyscraper ad 160 x 600. And there will be one above the comments, a small banner 468 x 60. For more information on these, see Google AdSense's Guide to Ad Sizes.

Creating Ad Units

DFP refers to all of the ad spaces on your website where ads go as Ad Units. Or as Google says, "An ad unit is a representation in DFP of one space where ads can be delivered." To begin, we need to create ad units for each of the three spots described above.

In DFP, visit the Inventory page to begin:

DFP Inventory page

Click on New ad unit to define each of these three ad units:

Google DFP New Ad Unit

It's helpful if you name ad units descriptively with the website name, section, placement and dimensions. For example, my top sidebar square ad is called protools_sidebar_top_square_250x250.

You can leave the subsequent defaults as they are and save the ad unit. Note that the default enables Google AdSense to fill ad space that's not ordered by your own clients.

Ad unit settings and save button

When you've added all three, you can see the Ad Units listed below:

Google DFP List of Ad Units

For future reference, Google offers some good examples for when to create additional ad units:

If you have the same 300x250 ad slot at the top of all of your content pages, you might want to create just one ad unit. However, if you'll be selling your inventory by website section, you might need separate ad units for each section. If you have ad slots at the top and bottom of your content pages, you probably want to create separate ad units so that you can target, price, and report on these ad slots separately.

Generate Tags: Add DFP Code to Your Website

To get the JavaScript from Google for our ads, we use the feature in the left sidebar called Generate tags. Tags are Google's unintuitive name for JavaScript ad code. 

On the Generate tags page we add all three of the ad units which we want to use. Then, click the Generate tags button.

Generate tags page

Google will give you two sets of code. First, the JavaScript for Google DFP that belongs in your <head></head> block.

Google DFP Generate Tags Head Script

Here's an example of my <head> script:

Below that, you'll see individual <div> blocks for each of the ad units:

Google DFP Generate Tags for Document Body by Ad Unit

To be clear, the upper <head> script needs to appear on any page with an ad. However, the individual ad unit script only needs to appear exactly where you want to place the ad.

Here's an example of JavaScript to display my 468 x 60 ad banner above the comments:

Place Tags in WordPress

Next, we'll begin placing the DFP JavaScript code in WordPress. First, we'll paste the <head> block of code to our WordPress header.php theme file. You can access this through the WordPress Dashboard Appearance > Themes Editor option.

Note: if you use a code repository like GitHub for your themes, make sure you integrate this change into your repository.

Google DFP Add JavaScript to Head Block

For the small banner 468x60 above the comments, we edit the Single Post single.php file in WordPress. This change would also go into your code repository if you're using one. 

Google DFP WordPress Single Post Add Tags Above Comments

Next, we'll add Text widgets to the sidebar for each of the two sidebar ads. These widgets don't need to be added to the code repository:

Google DFP Add Widgets to Sidebar with JavaScript for Ad Units

Centering Google Ads

I've found that centering Google Ads with a wrapper div with style="text-align:center;" doesn't work but that the deprecated <center></center> tag does.

The Finished Page With Advertisements

When you view the page again, you can see the ads appear immediately:

Google DFP ProToolsio advertising in place in sidebar and comments

What's Next?

In this episode, you've learned to define ad inventory for your website, create ad units, generate tags (or code) and place this code in the appropriate areas of your website. I hope you've found this illustrative. As you can tell, I'm deliberately trying to keep the scope of each episode fairly small. It's easy to get overwhelmed by DFP, and I'd rather you feel a certain level of confidence with each new area.

In the next episode, we'll explore Google DFP Placements in order to target ads at related hot areas of our website, such as related pages that receive a lot of search traffic.

Please feel free to post your questions and comments below. You can also follow me on Twitter @reifman or email me directly. You can also browse my Tuts+ instructor page to see other tutorials I've written. 

Related Links

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.