Gpt/dfp components that you can easily use in your isomorphic react apps. This package is inspired in the awesome library jquery.dfp, and aims to provide its same ease of usage but, of course, taking into consideration the react concepts & lifecycle features.
Set the size mappings to be applied to the nested ad slots.
targetingArguments
object
{ "keywords": "family", "content": "test" }
Object with attributes you want to add to the boxes (you can use for custom targeting)
AdSlot
Property
Type
Example
Description
dfpNetworkId
string (required)
"1122"
DFP Account id.
adUnit
string (required)
"homepage"
The adunit you want to target to this box.
sizes
array (required)
[ [300, 250], [300, 600], 'fluid' ]
list of sizes that this box support. Sizes can be specified by eigther and array like [width, height] or with strings ("dfp named sizes") like 'fluid'. You can configure 1 or more sizes.
This callback is executed after the adSlot is rendered. The first argument passes the gpt event data (googletag.events.SlotRenderEndedEvent).
shouldRefresh
fcn. (optional) (should return a boolean)
function() { /* never refresh this ad */ return false; }
Return a boolean that tells the dfp manager whether the ad slot can be refreshed or not.
slotId
string. (optional)
"homepage-leadboard"
Controls the id of the dom element in which the dom is displayed. If this field is not provided a random name is created.
DFPManager
Public methods
Property
Type
Example
Description
load
fcn([slotId])
DFPManager.load();
Fetches the gpt api (by calling init()) and renders the ad slots in the page. You can specify an individual slot.
refresh
fcn()
DFPManager.refresh();
Refreshes the ad slots available in the page. This method will call load() if it wasn't already called. Use the method <AdSlot shouldRefresh={function(){}} ...> to get control over the slots to be refreshed.
targetingArguments
object (optional)
{ "keywords": "family", "content": "test" }
Object with attributes you want to enable globaly (you can use this for custom targeting)
Returns a promise that resolves when the object googletag object is ready for usage (if required this fcn makes the network call to fetch the scripts).
For Internal Usage Only
Property
Type
Example
Description
init
fcn() => Promise
DFPManager.init();
Initializes the dfp manager (fetches the gpt scripts from network). Returns a promise that resolves when the gpt api is ready for usage.
Returns an object that contains the custom targeting arguments that were set for the given slot (slotId).
Wanna help?
I certainly know that testcases need to be improved, but, as long as your syntax is clean, submit testscases and, of course, all the interfaces are kept working, all kind of contribution is welcome.