Jquery.dfp.js
A jQuery implementation for Google DoubleClick for Publishers (DFP)
Install / Use
/learn @coop182/Jquery.dfp.jsREADME
jQuery DFP - A jQuery implementation for Google DFP
This script is a drop in solution for getting Double Click for Publishers (DFP) by Google working on your page. By including this script on your page and then initialising it in the ways described below you should find it very easy to get DFP working.
Do not include any of the generated DFP script tags from the DFP admin on your page, this script replaces them.
This script also works with Zepto.js
Demo / Ad unit tester
You can use this page to test your DFP ads using the jquery.dfp.js script. There is some debug code included to help debug the ad delivery.
You can also use the Google Console to debug your ad units. This is done by by adding a "google_console=1" or "google_debug=1" to the url, and toggling the console by pressing CTRL + F10. Subsequent pagerequests will not require the parameters, and the console can be toggled. Adding the querystring "googfc" to an url, will also load the console, but also show it, without having to press CTRL + F10.
Setup
You can add ad units to your page in any location that you would like to display an ad.
By default this script will look for ad units with a class of adunit but you can of course use jQuery selectors as well.
The minimum information required for an ad unit to function is having the ad unit specified. To do this you can use the id parameter of the element, for example:
<div class="adunit" id="Ad_unit_id"></div>
In the example above the ID of the div element will be used to look up a corresponding ad unit in DFP and the dimensions of the adunit will be set to the same dimensions of the div which could be defined in your CSS.
You can optionally specify the adunit name and dimensions in the following way:
<div class="adunit" data-adunit="Ad_unit_id" data-dimensions="393x176"></div>
This method can be useful for including multiple copies of an ad unit with the same name which when part of a DFP placement will then pull in as many different creatives as possible.
You can also specify multiple dimensions sets:
<div class="adunit" data-adunit="Ad_unit_id" data-dimensions="393x176,450x500"></div>
Also you can optionally specify custom targeting on a per ad unit basis in the following way:
<div class="adunit" data-adunit="Ad_unit_id" data-dimensions="393x176" data-targeting='{"city_id":"1"}'></div>
Also you can optionally specify custom exclusion category on a per ad unit basis in the following way:
<div class="adunit" data-adunit="Ad_unit_id" data-dimensions="393x176" data-exclusions="firstcategory,secondcategory"></div>
To create an out of page ad unit set the data-outofpage property on the ad unit. Dimensions are not required for out of page ad units.
<div class="adunit" data-adunit="Ad_unit_id" data-outofpage="true"></div>
In order to identify an ad unit on the page that is a video companion ad, set the data-companion attribute on that unit.
<div class="adunit" data-adunit="Ad_unit_id" data-dimensions="393x176" data-companion="true"></div>
Usage
Calling the script:
<html>
<head>
<title>DFP TEST</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.dfp.min.js"></script>
</head>
<body>
<div class="adunit" id="Middle_Feature" data-dimensions="393x176" data-targeting='{"city_id":"1"}'></div>
<script>
$.dfp({
dfpID: 'xxxxxxxxx'
});
</script>
</body>
</html>
Using a bootstrap file (take a look at example-bootstrap.js):
<html>
<head>
<title>DFP TEST</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="example-bootstrap.js"></script>
</head>
<body>
<div class="adunit" id="Middle_Feature" data-dimensions="393x176" data-targeting='{"city_id":"1"}'></div>
</body>
</html>
You can init the script in the following ways:
$.dfp('xxxxxxxxx');
$.dfp({
dfpID:'xxxxxxxxx'
});
$('selector').dfp({
dfpID:'xxxxxxxxx'
});
$('selector').dfp({
dfpID:'xxxxxxxxx',
setCategoryExclusion: 'firstcategory, secondcategory'
});
$('selector').dfp({
dfpID:'xxxxxxxxx',
setLocation: { latitude: 34, longitude: -45.12, precision: 1000 }
});
$('selector').dfp({
dfpID:'xxxxxxxxx',
sizeMapping: {
'my-default': [
{browser: [1024, 768], ad_sizes: [980, 185]},
{browser: [ 980, 600], ad_sizes: [[728, 90], [640, 480]]},
{browser: [ 0, 0], ad_sizes: [88, 31]}
],
}
});
Available Options
<table> <tr> <th>Option</th> <th>Description</th> </tr> <tr> <td>dfpID</td> <td>This string is your unique DFP account ID.</td> </tr> <tr> <td>setTargeting</td> <td>This object is where you set custom targeting key value pairs. Also see the Default Targeting options that are set further down the page.</td> </tr> <tr> <td>url</td> <td>This string is the url used by the URL Targeting feature. The default value of this option is the value found by calling window.location.</td> </tr> <tr> <td>setUrlTargeting</td> <td>This boolean specifies whether the targeting should include information found in the url of the current page. The default value of this option is true.</td> </tr> <tr> <td>setCategoryExclusion</td> <td>This comma separated list sets category exclusions globally (page level).</td> </tr> <tr> <td>setLocation</td> <td>This object sets geolocalization. String values are not valid. </td> </tr> <tr> <td>enableSingleRequest</td> <td>This boolean sets whether the page ads are fetched with a single request or not, you will need to set this to false it you want to call $.dfp() more than once, typically you would do this if you are loading ad units into the page after the initial load.</td> </tr> <tr> <td>collapseEmptyDivs</td> <td>This can be set to true, false or 'original'. If its set to true the divs will be set to display:none if no line item is found. False means that the ad unit div will stay visible no matter what. Setting this to 'original' (the default option) means that the ad unit div will be hidden if no line items are found UNLESS there is some existing content inside the ad unit div tags. This allows you to have fall back content in the ad unit in the event that no ads are found.</td> </tr> <tr> <td>refreshExisting</td> <td>This boolean controls what happens when dfp is called multiple times on ad units. By default it is set to true which means that if an already initialised ad is initialised again it will instead be refreshed.</td> </tr> <tr> <td>sizeMapping</td> <td>Defines named size maps that can be used with in combination with the data-size-mapping attribute to enable responsive ad sizing (https://support.google.com/dfp_premium/answer/3423562?hl=en).</td> </tr> <tr> <td>companionAds</td> <td>If adding companion ads to accompany videos using the IMA SDK to serve video ads, then pass this parameter as true to identify the units being used for that purpose. (https://support.google.com/dfp_premium/answer/1191131)</td> </tr> <tr> <td>disableInitialLoad</td> <td>This allows for serving companion ad units when the video on the page auto plays. You'll need to include this setting with companionAds as true to avoid possible double impressions. (https://support.google.com/dfp_premium/answer/1191131)</td> </tr> <tr> <td>setCentering</td> <td>Enables/disables centering of ads.</td> </tr> <tr> <td>afterEachAdLoaded</td> <td>This is a call back function, see below for more information.</td> </tr> <tr> <td>afterAllAdsLoaded</td> <td>This is a call back function, see below for more information.</td> </tr> <tr> <td>beforeEachAdLoaded</td> <td>This is a call back function, see below for more information.</td> </tr> </table>Callbacks
This script provides two callbacks which you can use to make working with DFP a little easier.
<table> <tr> <th>Callback</th> <th>Parameters</th> <th>Description</th> </tr> <tr> <td>afterEachAdLoaded(adUnit)</td> <td> <ul> <li>adUnit - jQuery Object - the jQuery object</li> </ul> </td> <td>This is called after each ad unit has finished rendering.</td> </tr> <tr> <td>afterAllAdsLoaded(adUnits)</td> <td> <ul> <li>adUnits - jQuery Object - the jQuery object containing all selected ad units</li> </ul> </td> <td>This is called after all ad units have finished rendering.</td> </tr> <tr> <td>alterAdUnitName(adUnitName, adUnit)</td> <td> <ul> <li>adUnitName - String - the default ad unit name</li> <li>adUnit - jQuery Object - the jQuery object</li> </ul> </td> <td>Return the modified or overrided ad unit name. This function is called once perRelated Skills
node-connect
349.2kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
109.5kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
349.2kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
349.2kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
