Configuration
- Demo
- Overview
- Global GPT Configuration
- Global Prebid Configuration
- Slot GPT Configuration
- Slot Prebid Configuration
You can check if your configuration is valid online in our react-prebid config validator:
To configure Google Publisher Tags (GPT) and Prebid, you create one central configuration object which you pass as config prop to the AdvertisingProvider component.
The overall structure of your configuration is as follows:
const config = {
// global ad unit path, used if not specified in a slot (string)
path,
// global GPT targeting parameters (object)
targeting,
// GPT size mapping definitions (object)
sizeMappings,
// global Prebid configuration (object)
prebid,
// configuration of custom events dispatched by the creatives (object)
customEvents,
// array of slot configurations
slots: [
{
// slot ID
id,
// slot's ad unit path
path,
// configuration for removing empty slots
collapseEmptyDivs,
// targeting parameters specific to the slot
targeting,
// slot size configuration for GPT
sizes,
// slot size configuration for GPT
sizeMappingName,
// array with slot's Prebid configuration objects
prebid: [
{
// media types object for this Prebid config
mediaTypes,
// array of bid objects
bids: [
{
// bidder ID
bidder,
// object with bidder-specific config
params
}
]
}
]
}
]
};Hint: For an example of a complete, valid configuration, refer to testAdvertisingConfig.js in the source code, which is used for the unit tests of react-prebid.
config.path
The ad unit path that is used for defining GPT slots, if there is no path specified in the GPT slot config.
You can also paths for individual slots (see section Slot Path in section “Slot GPT Configuration” below).
Type: String
Example:
const config = {
path: "/19968336/header-bid-tag"
};config.targeting
An object of arbitrary parameters that are used to define global targeting parameters for the slots using pubads.setTargeting of the GPT API.
Note that you can also define targeting parameters for individual slots (see section Slot Targeting in section “Slot GPT Configuration” below).
Type: Object
Example:
const config = {
targeting: {
gender: "female"
}
};See also: !googletag.PubAdsService setTargeting(key, value) (GPT reference)
config.sizeMappings
An object with size mapping definitions to be used for responsive ads.
The object's keys are the size mapping names referenced from the configuration of each slot (see section Size Mapping Name in section “Slot GPT Configuration” below).
The object's values are arrays of objects with two properties:
-
viewPortSize: The target view port size of the size mapping; array with two numbers for width and height -
sizes: Array of ad sizes to be displayed in this view port; array of arrays with two numbers for width and height⚠️ important: this needs to be an array, even if you have only one ad size to display for this viewport size- If you want to display no ads for this size, specify an empty array (
[])
Type: Object
Example:
const config = {
sizeMappings: {
pageheader: [
{
// no ads default (mobile phones)
viewPortSize: [0, 0],
sizes: []
},
{
// tablets
viewPortSize: [640, 60],
sizes: [[468, 60]]
},
{
// desktop
viewPortSize: [1000, 250],
sizes: [[800, 250], [970, 250]]
}
]
}
};The example above defines the following sizes:
- If less than 640 pixels screen width or less than 60 pixels screen height are available, display no ads (using
[0, 0]acts as a default that is used if no other sizes fix - If at least 640 x 60 pixels are available, display a full size banner (468 x 60 pixels)
- If at least 1000 x 250 pixels are available, display a billboard (800 x 250 or 970 x 250, whichever is available and yields more revenue)
See also: Build Responsive Ads (Google DoubleClick for Publishers documentation)
config.customEvents
Custom events allow you to pass callback functions to your AdvertisingSlot components using the customEventHandlers prop.
With these callback functions, you can trigger layout changes using events dispatched from the iframes delivered by the ad server. This is useful, for example, to set the page's background color to match a creative.
Type: Object
Example:
const config = {
customEvents: {
blueBackground: {
eventMessagePrefix: "BlueBackground:"
}
}
};See also: Custom Events
config.prebid
Allows you to specify global configuration options for Prebid.js, which are passed along using pbjs.setConfig.
Please refer to the Prebid documentation for details on which options you can provide.
Type: Object
Example:
const config = {
prebid: {
bidderTimeout: 1500,
priceGranularity: "high",
bidderSequence: "fixed"
}
};See also: pbjs.setConfig (Prebid.js API reference)
config.dataPrebid
The object to pass the data to DM wrapper and give option to pass the data to the different prebid bidders.
Optional
Type: Object
Example:
const config = {
slots: [],
dataPrebid: {
visitor: {
testVisitorData: "testVisitorData"
}
}
};config.singleRequest
The option to enable or disable DFP singleRequest for refresh calls.
Optional
Type: Bool
Example:
config.slots
An array of slot config objects, which are explained in the following sub-sections.
Type: Array of objects
config.slots.id
The element ID of the div in your HTML code that is filled with the creative from the ad server. This ID corresponds to the id prop of the AdvertisingSlot component.
Required
Type: String
Example:
const config = {
slots: [
{
id: "div-gpt-ad-1460505748561-0"
}
]
};See also: AdvertisingSlot component
config.slots.path
The ad unit path for this specific slot. If it is omitted, the ad unit path from the global GPT configuration is used. You must have either a slot specific or global ad unit path.
Type: String
Example:
const config = {
slots: [
{
path: "'/19968336/header-bid-tag-0"
}
]
};See also: global ad unit path
config.slots.collapseEmptyDiv
Use this to remove div elements from the DOM when the ad server has no matching ad to serve for this slot.
The value is an array of one or two booleans, which determine the collapsing of empty div elements as follows:
- First bool: Whether to collapse the slot if no ad is returned
- Second bool: Whether to collapse the slot even before an ad is fetched; ignored if collapse is not true
Type: Array of booleans
Example:
const config = {
slots: [
{
collapseEmptyDiv: [true, false]
}
]
};See also: !googletag.Slot setCollapseEmptyDiv(collapse, opt_collapseBeforeAdFetch) (GPT reference)
config.slots.targeting
An object of arbitrary parameters that are used to define targeting parameters for the slot using slot.setTargeting of the GPT API.
Note that you can also define global targeting parameters for all slots (see section Targeting in section “Global GPT Configuration” below).
Type: Object
Example:
const config = {
slots: [
{
targeting: {
age: 27
}
}
]
};See also: !googletag.Slot setTargeting(key, value) (GPT reference)
config.slots.sizes
Define one or more sizes for the ad slot. This is the size that is used in the ad request if no responsive size mapping is provided or the size of the viewport is smaller than the smallest size provided in the mapping.
Note: More than one sizes is a DFP premium feature; if you use DoubleClick for Publishers Small Business, you can only specify one size.
Required
Type: Array of arrays (see examples)
Examples:
One size (array with width and height)
const config = {
slots: [
{
sizes: [320, 50]
}
]
};Multiple sizes
const config = {
slots: [
{
sizes: ["fluid", [300, 250], [320, 50], [320, 100]]
}
]
};See also: googletag.Slot googletag.defineSlot(adUnitPath, size, opt_div) (GPT reference)
config.slots.sizeMappingName
The size mapping for responsive ads to be used for this slot. Corresponds to one of the size mappings you have configured in the global GPT configuration.
Type: String
Example:
const config = {
slots: [
{
sizeMappingName: "pageheader"
}
],
sizeMappings: {
pageheader: [
{
viewPortSize: [0, 0],
sizes: []
},
{
viewPortSize: [640, 60],
sizes: [[468, 60]]]
},
{
viewPortSize: [1000, 250],
sizes: [[800, 250], [970, 250]]
}
]
}
};See also: Size Mappings
config.slots.prebid
An array of Prebid configuration objects, which are explained in the following sub-sections.
Note: In most cases, one Prebid config per slot will be sufficient (specify an array with just one object); you only need multiple ones if you have different bidders per media types configuration.
Required
Type: Array of objects, each with properties mediaTypes and bids
config.slots.prebid.mediaTypes
Specify an object of media types for each Prebid configuration.
Refer to the Prebid media types documentation for details.
Required
Type: Object
Example:
const config = {
slots: [
{
prebid: [
{
mediaTypes: [
{
banner: {
sizes: [[300, 250], [300, 600]]
}
}
]
}
]
}
]
};See also: Prebid media types documentation
config.slots.prebid.bids
Specify an array of bids per slot and media types configuration.
Each bid object has a bidder and optional params property (see below).
Required
Type: Array of objects with properties bidder and optional params
Example:
const config = {
slots: [
{
prebid: [
{
bids: [
{
bidder: "appnexus",
params: {
placementId: "10433394"
}
}
]
}
]
}
]
};config.slots.prebid.bids.bidder
The ID of the bidder (e.g. appnexus, ix, openex, etc.).
Refer to the Prebid bidder documentation to see which bidders are supported.
Required
Type: String
See also: Prebid bidder documentation
config.slots.prebid.bids.params
Parameters specific to the bidder. Refer to the Prebid bidder documentation to see which bidders uses which parameters.
Type: Object
See also: Prebid bidder documentation
← API | Custom Events →