Intro
The following docs will guide you through the configuration process for Direct Ads, an RTB House solution focused on personalized native and display ad delivery through header bidding.
For this setup, RTB House provides to its partners a code snippet that can be included on the webpage or, optionally, on the Adserver of choice. The code snippet is responsible for asynchronously calling RTB House servers, allowing user identification and personalized ads delivery whenever available.
Finally, RTB House also provides access to a Dashboard for monitoring key ad delivery metrics, such as impressions, total investment and CPM.
If you have any questions or improvements/optimization suggestions please send us an e-mail at inventory_support@rtbhouse.com using the label [DIRECT-ADS] on subject start.
If you wish, you can also check out the demo page with various examples of pre-configured ad formats.
Requirements
What you will receive
- A unique identifier (PublisherID)
- Sample snippets showing the Direct Ads setup
- Alternative snippets that can be used on the Adserver
- Access to a Dashboard with integration stats
What we will need you to do
- Get comfortable with HTML and JS basics (optionally, CSS also)
- Map the page slots into which ads will be deliver and initialize our API
- If using an Adserver, apply targeting rules the corresponding slot and disable safe-frame technologies (the creative should be able to access page scope)
Quickstart
In order to start using the Direct Ads you should define a slot (<div>) into which the ad will be delivered and include the code snippet provided by us on the page's HEAD or creative HTML structure.
Display banners
The following example shows the delivery of a 300x250 display ad and the setup of a passback image for no ad scenarios.
Native banners
In this example the delivery of a native banner with passback functionality is shown. Please note that, although natives are responsive in sizing, setting width and height for the passback image is required.
Showcases
In this last example, a native showcase is setup with 3 ad slots and a passback.
Available parameters
As listed on Quickstart, there are multiple parameters available on Direct Ads API. You can check the full list and descriptions below:
Base parameters
| Parameter | Description | Accepted values | Type |
|---|---|---|---|
| publisherId | Configured integration identifier | Unique / Predefined | String |
| type | Ad format to be rendered | "display", "display-showcase", "native-showcase" | String |
| wrapper | HTML container ID to be used to deliver the ad | Any valid ID, without the "#" | String |
| passback | Passback tag URL | Any valid URL that can be iframe rendered | String |
| swidth | Ad width. For natives, will set the passback width; In showcases, represents each slot | Any value in pixels, as long as present in IAB standards | Int |
| sheight | Ad height. For natives, will set the passback height; In showcases, represents each slot | Any value in pixels, as long as present in IAB standards | Int |
| spadding | Inner ad spacing | Any value in pixels | Int |
| numslots | Number of ads to be shown | Any number | Int |
| showcase | Showcase template configuration object | Key/value pair (see Showcase parameters) | Object |
| nativeStyle | Native template configuration object | Key/value pair (see Native parameters) | Object |
| callback | A callback function to be evoked either if the ad was delivered or if there were no ads available | Any executable function | Function |
Showcase parameters
| Parameter | Description | Accepted values | Type |
|---|---|---|---|
| header | Showcase header text | Any | String |
Native parameters
| Parameter | Description | Accepted values | Type |
|---|---|---|---|
| cta | Call-to-action button text | Any; | String |
| btnColor | CTA button color | Any; CSS compatible | String |
| btnTitleColor | CTA text color | Any; CSS compatible | String |
| titleColor | Native title color | Any; CSS compatible | String |
| descColor | Native description color | Any; CSS compatible | String |
Advanced Styling
The Direct Ads API supports native and showcase
banner customization through usage of CSS rules that should follow the
pattern #[wrapper-id] element. In order to assure
styling override priority, we suggest including CSS customizations
right before the container into which the ad will be rendered.
The HTML structure generated by the API is described below:
| CSS Selector | Description | Format(type) |
|---|---|---|
| .showcase-header | Showcase title wrapper | native-showcase; display-showcase |
| .showcase-wrapper | Show case slots wrapper | native-showcase; display-showcase |
| .ad-slot | Slot inner elements wrapper | native |
| .ad-icon | Advertiser logo | native |
| .ad-image | Product image | native |
| .ad-title | Advertise title | native |
| .ad-description | Advertise description | native |
| .ad-cta | Call-to-action button | native |
HTML Structure
You can find below the structure generated by Direct Ads API. Please note that .showcase-header and .showcase-wrapper are only available for native and display showcases.
Callback function
As described in Base parameters, it is possible to setup a callback function that will be run by the end of ad delivery process.
Any function set on API's callback parameter will have access to the rendered variable, defined as false in case of absense of ads, or true if at least one ad was delivered.
Below you can find an example of the callback function implementation: