An Interest In:
Web News this Week
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
- March 21, 2024
Some of Our Sources
- Engadget
- The Logo Smith
- TutsPlus - Design
- My Ink Blog
- Wal You
- CSS Tricks
- Web Resource Source
- Codrops
- Android Headlines
- Hashedout
Help Webnuz
Referal links:
Introduction to Google DFP: Beginning Ad Integration With Your Website
This is the second tutorial of a series about . 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:
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:
Click on New ad unit to define each of these three ad units:
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.
When you've added all three, you can see the Ad Units listed below:
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.
Google will give you two sets of code. First, the JavaScript for Google DFP that belongs in your <head></head> block.
Here's an example of my <head> script:
<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//www.googletagservices.com/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/1056613/protools_above_comments_full_banner_468x60', [468, 60], 'div-gpt-ad-1427669183026-0').addService(googletag.pubads());
googletag.defineSlot('/1056613/protools_sidebar_mid-skyscraper_160x600', [160, 600], 'div-gpt-ad-1427669183026-1').addService(googletag.pubads());
googletag.defineSlot('/1056613/protools_sidebar_top_square_250x250', [250, 250], 'div-gpt-ad-1427669183026-2').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
Below that, you'll see individual <div> blocks for each of the ad units:
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:
<!-- protools_above_comments_full_banner_468x60 -->
<div id='div-gpt-ad-1427669183026-0' style='width:468px; height:60px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1427669183026-0'); });
</script>
</div>
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.
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.
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:
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:
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
Original Link:
TutsPlus - Code
Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.More About this Source Visit TutsPlus - Code