Skip to content

Instantly share code, notes, and snippets.

@jeremyfelt
Created August 23, 2012 21:23
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jeremyfelt/3441995 to your computer and use it in GitHub Desktop.
Google DFP JS Explanation
<?php
/**
* Basic configuration for multiple DFP JS ad tags in Ad Code Manager
*
* Our ad units are named 'test_ad_300x250' and 'test_ad_728x90'
* Our DFP ID is 12345678
* Our ad slot IDs will be automatically created
*
*/
add_filter( 'acm_output_tokens', 'myp_acm_output_tokens', 10, 2 );
/**
* Modify the output tokens as the script is processed for output. This passes the correct
* tag information (i.e. 'test_ad_300x250' ) depending on what tag was called for with the
* do_action() request in the front end template.
*
* @param $output_tokens array of existing output tokens and their settings
* @param $tag_id string containing currently requested tag_id
*
* @return array of output tokens
*/
function myp_acm_output_tokens( $output_tokens, $tag_id ) {
$output_tokens['%tag_id%'] = $tag_id; // $tag_id contains the tag you ask for with do_action()
$output_tokens['%site_name%'] = 12345678; // your DFP ID - https://www.google.com/dfp/12345678
return $output_tokens;
}
add_filter( 'acm_ad_tag_ids', 'myp_acm_ad_tag_ids' );
/**
* Generate the array of tags that will be used throughout the site. One tag should
* be created for each place where a do_action() call will be used in the front end
* template. In the case of DFP, we should also have the dfp_head in our tag ids to
* display the correct script info.
*
* @return array of tag whitelisted ad tag IDs that are accounted for
*/
function myp_acm_ad_tag_ids() {
$ad_tag_ids = array(
array(
'tag' => 'test_ad_300x250',
'url_vars' => array(
'sz' => '300x250',
'fold' => 'btf',
'width' => '300',
'height' => '250',
),
),
array(
'tag' => 'test_ad_728x90',
'url_vars' => array(
'sz' => '728x90',
'fold' => 'atf',
'width' => '728',
'height' => '250',
),
),
array(
'tag' => 'dfp_head',
'url' => '',
'url_vars' => array(),
),
);
return $ad_tag_ids;
}
add_filter( 'acm_output_html', 'myp_acm_output_html', 10, 2 );
/**
* Parse the requested tag_id into some sort of output that will actually
* generate the ad code display on the front end. This is what will finally
* take the place of the do_action() call that we have made.
*
* With DFP, we also account for the dfp_head request, which will display the
* required script information at the beginning of the document before we get
* to the other ad tags
*
* @param $output_html string existing output html, which we ignore
* @param $tag_id string currently requested tag id
*
* @return string
*/
function myp_acm_output_html( $output_html, $tag_id ) {
if ( 'dfp_head' == $tag_id ) :
$ad_tags = myp_acm_ad_tag_ids( array() );
ob_start();
?>
<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() {
<?php
foreach ( (array) $ad_tags as $tag ):
if ( $tag['tag'] == 'dfp_head' )
continue;
$tt = $tag['url_vars'];
?>
googletag.defineSlot('/%site_name%/<?php echo $tag['tag'] ?>', [<?php echo $tt['width'] ?>, <?php echo $tt['height'] ?>], "dfp-tag-<?php echo $tag['tag'] ?>").addService(googletag.pubads());
<?php
endforeach;
?>
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<?php
$output_script = ob_get_clean();
else :
$output_script = "
<div id='dfp-tag-%tag_id%' style='width:%width%px; height:%height%px;'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('dfp-tag-%tag_id%'); });
</script>
</div>
";
endif;
return $output_script;
}
<!--
In the following very basic example:
* my Google DFP ID is '12345678'.
* This is only needed in the second script block to help define the ad slot.
* I only have two Ad Units setup
* A 300x250 ad unit named 'test_ad_300x250'
* A 728x90 ad unit named 'test_ad_728x90'
* These are only needed in the second script block to help define the ad slots
* Two arbitrary but unique ad slot IDs have been created
* An ad slot ID - 'div-gpt-ad-test_ad_300x250'
* An ad slot ID - 'div-gpt-ad-test_ad_728x90'
* These are needed in the defineSlot() call in the second script block to define the ad slots.
* These are then used in the display blocks for the ads, both as the ID of the <div> elements
containing the ad and in the display() call used in the script.
* It should specifially be noted how arbitrary this is...
* div-gpt-ad means absolutely nothing and is just pulled over from how DFP formats examples
* test_ad_300x250 doesn't have to match the Ad Units, that's just how I did it
* The slot IDs 'myslot1' and 'myslot2' would work just fine here with the Ad Units
'test_ad_300x250' and 'test_ad_728x90'
-->
<!--
The first script block sets up the async connection with Google DFP and initializes some of the
things we'll need further on. No custom code exists in the first block by default.
-->
<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>
<!--
The second script block, which really could be added to the first if we want, defines the stuff
that we'll be doing in DFP. In this basic example, a single ad slot is defined. We have full
control over the ID tag 'div-gpt-ad-test_ad_300x250', but the DFP ID '12345678' and Ad Name
'test_ad_300x250' must match something in the DFP system.
The defineSlot() call is the most important here as it does just that - defines our arbitrarily
named ad slot and attaches it to an existing Ad Unit.
-->
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/12345678/test_ad_300x250', [300, 250], 'div-gpt-ad-test_ad_300x250').addService(googletag.pubads());
googletag.defineSlot('/12345678/test_ad_728x90', [728, 90], 'div-gpt-ad-test_ad_728x90').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<!-- Any other HTML content obviously goes here -->
<!-- This is where we finally display the ad. We use the arbitrary (but unique) ID that we defined the slot with as the ID for the <div> element and then call the googletag.display() method on that same ID so that Google DFP knows to display the output. -->
<div id='div-gpt-ad-test_ad_300x250' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-test_ad_300x250');
});
</script>
</div>
<!-- Any other HTML content obviously goes here -->
<div id='div-gpt-ad-test_ad_728x90' style='width:728px; height:90px;'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-test_ad_728x90');
});
</script>
</div>
<!-- Any other HTML content obviously goes here -->
<!--
In the following very basic example:
* my Google DFP ID is '12345678'.
* This is only needed in the second script block to help define the ad slot.
* I only have one Ad Unit setup and it is named 'test_ad_300x250'
* This is only needed in the second script block to help define the ad slot
* An arbitrary but unique ad slot ID has been created - 'div-gpt-ad-test_ad_300x250'
* This is needed in the defineSlot() call in the second script block to define the ad slot.
* This is then used in the actual display block for the ad, both as the ID of the <div> element
containing the ad and in the display() call used in the script
-->
<!--
The first script block sets up the async connection with Google DFP and initializes some of the
things we'll need further on. No custom code exists in the first block by default.
-->
<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>
<!--
The second script block, which really could be added to the first if we want, defines the stuff
that we'll be doing in DFP. In this basic example, a single ad slot is defined. We have full
control over the ID tag 'div-gpt-ad-test_ad_300x250', but the DFP ID '12345678' and Ad Name
'test_ad_300x250' must match something in the DFP system.
The defineSlot() call is the most important here as it does just that - defines our arbitrarily
named ad slot and attaches it to an existing Ad Unit.
-->
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/12345678/test_ad_300x250', [300, 250], 'div-gpt-ad-test_ad_300x250').addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<!-- This is where we finally display the ad. We use the arbitrary (but unique) ID that we defined the slot with as the ID for the <div> element and then call the googletag.display() method on that same ID so that Google DFP knows to display the output. -->
<div id='div-gpt-ad-test_ad_300x250' style='width:300px; height:250px;'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-gpt-ad-test_ad_300x250');
});
</script>
</div>
<?php
/**
* An extremely basic template file example where we make our calls
* to do_action( 'acm_tag', tag_id ) in order to display the various ads
* that are configured.
*
* We call dfp_head for the necessary JS code, test_ad_728x90 for the lead
* banner, and test_ad_300x250 for the sidebar ad slot
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo( 'name' ); ?></title>
<!-- etc, etc... ->
<?php wp_head(); ?>
<?php do_action( 'acm_tag', 'dfp_head' ); // outputs the dfp_head tag ID ?>
</head>
<body>
<div class="header">
<h1>Some header stuff...</h1>
<?php do_action( 'acm_tag', 'test_ad_728x90' ); // outputs my 728x90 banner ?>
</div>
<div class="otherstuff">
<p>Lots of content</p>
</div>
<div class="maybeasidebar">
<?php do_action( 'acm_tag', 'test_add_300x250' ); // outputs my sidebar 300 ad ?>
</div>
<div class="footerorsomething">
Goodbye
</div>
</body>
<html>
@rinatkhaziev
Copy link

Nice stuff!

@rinatkhaziev
Copy link

May be we should include the link in readme? SInce the majority of small users use JS DFP

@jeremyfelt
Copy link
Author

Thanks! Yeah, I think it will be useful for the readme.

I'm still working on a few things though. None of this is actually tested yet. ;)

@rinatkhaziev
Copy link

Here's what i did for one of our projects as a quick solution:
https://gist.github.com/2494899

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment