From 633ca6afa7f93d975a926926518a3c45cc561a40 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Wed, 10 Jan 2018 15:37:01 -0500 Subject: [PATCH 01/14] Add native aspect ratios to AppNexus adapter docs Also did some general cleanup and formatting while I was in there. --- dev-docs/bidders/appnexus.md | 66 ++++++++++++++++++++++++++++++------ 1 file changed, 55 insertions(+), 11 deletions(-) diff --git a/dev-docs/bidders/appnexus.md b/dev-docs/bidders/appnexus.md index 2a6ed65135..6c0ce75e4c 100644 --- a/dev-docs/bidders/appnexus.md +++ b/dev-docs/bidders/appnexus.md @@ -10,19 +10,29 @@ hide: true prebid_1_0_supported : true --- -### bid params +**Table of Contents** + +- [Bid params](#appnexus-bid-params) +- [Support for publisher-defined keys](#appnexus-pub-keys) +- [Specify aspect ratios for native images and icons](#appnexus-aspect-ratios) + + + +### Bid params {: .table .table-bordered .table-striped } -| Name | Scope | Description | Example | -|----------------+----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+-------------------| -| `placementId` | required | The placement ID from AppNexus. You may identify a placement using the `invCode` and `member` instead of a placement ID. | `"234234"` | -| "arbitraryKey" | optional | This key can be *any publisher-defined string*. The value (also a string) maps to a querystring segment for enhanced buy-side targeting. Multiple key-value pairs can be added. See example below. | `'genre': 'rock'` | -| `invCode` | optional | The inventory code from AppNexus. Must be used with `member`. | `"abc123"` | -| `member` | optional | The member ID from AppNexus. Must be used with `invCode`. | `"12345"` | -| `reserve` | optional | Sets a floor price for the bid that is returned. | `0.90` | +| Name | Scope | Description | Example | +|------------------+----------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+-------------------| +| `placementId` | required | The placement ID from AppNexus. You may identify a placement using the `invCode` and `member` instead of a placement ID. | `"234234"` | +| `"arbitraryKey"` | optional | This key can be *any publisher-defined string*. The value (also a string) maps to a querystring segment for enhanced buy-side targeting. Multiple key-value pairs can be added as shown [below](#appnexus-pub-keys). | `'genre': 'rock'` | +| `invCode` | optional | The inventory code from AppNexus. Must be used with `member`. | `"abc123"` | +| `member` | optional | The member ID from AppNexus. Must be used with `invCode`. | `"12345"` | +| `reserve` | optional | Sets a floor price for the bid that is returned. | `0.90` | + + + +#### Support for publisher-defined keys -{: .alert.alert-info :} -**Support for Publisher-Defined Keys** To pass in a publisher-defined key whose value maps to a querystring segment for buy-side targeting, set up your `params` object as shown below. For more information, see the [query string targeting documentation](https://wiki.appnexus.com/x/7oCzAQ) (login required). {% highlight js %} @@ -43,4 +53,38 @@ var adUnits = [{ }] {% endhighlight %} -(Sizes set in `adUnit` object will also apply to the AppNexus bid requests.) +{: .alert.alert-info :} +Sizes set in the `adUnit` object will also apply to the AppNexus bid requests. + + + +#### Specify aspect ratios for native images and icons + +The AppNexus adapter supports specifying aspect ratios for native "image" and "icon" assets. Aspect ratios are defined by the following properties of the `aspect_ratios` array (as shown in the example below): + +- `ratio_width` +- `ratio_height` +- `min_width` (optional) + +For example: + +```javascript + mediaTypes: { + native: { + title: { + required: true + }, + body: { + required: true + }, + image: { + required: true, + aspect_ratios: [{ + min_width: 100, + ratio_width: 2, + ratio_height: 3, + }] + }, + } + } +``` From 19fa27483ee3016b77cfe0a40f28798d672d8cb9 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Wed, 10 Jan 2018 15:57:44 -0500 Subject: [PATCH 02/14] Update field defs a bit; add OpenRTB native link --- dev-docs/bidders/appnexus.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/dev-docs/bidders/appnexus.md b/dev-docs/bidders/appnexus.md index 6c0ce75e4c..dcbafdf63d 100644 --- a/dev-docs/bidders/appnexus.md +++ b/dev-docs/bidders/appnexus.md @@ -60,13 +60,17 @@ Sizes set in the `adUnit` object will also apply to the AppNexus bid requests. #### Specify aspect ratios for native images and icons -The AppNexus adapter supports specifying aspect ratios for native "image" and "icon" assets. Aspect ratios are defined by the following properties of the `aspect_ratios` array (as shown in the example below): +The AppNexus adapter supports specifying aspect ratios for native "image" and "icon" assets. Aspect ratios are defined by the following properties of the `aspect_ratios` array. For usage, see the example code below. -- `ratio_width` -- `ratio_height` -- `min_width` (optional) +{: .table .table-bordered .table-striped } +| Name | Scope | Type | Description | +|----------------+----------+---------+----------------------------------------------------------| +| `ratio_width` | Required | Integer | The width of the aspect ratio of the native ad. | +| `ratio_height` | Required | Integer | The height of the aspect ratio of the native ad. | +| `min_width` | Optional | Integer | The required minimum width of the image asset in pixels. | -For example: +{: .alert.alert-info :} +This implementation follows the [OpenRTB Native 1.2 specification](https://www.iab.com/wp-content/uploads/2017/04/OpenRTB-Native-Ads-Specification-Draft_1.2_2017-04.pdf) ```javascript mediaTypes: { From 1229a72d28328823f2e3420c3195580383ec86b9 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Thu, 11 Jan 2018 10:51:13 -0500 Subject: [PATCH 03/14] Remove OpenRTB note based on feedback --- dev-docs/bidders/appnexus.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/dev-docs/bidders/appnexus.md b/dev-docs/bidders/appnexus.md index dcbafdf63d..c9619d0cea 100644 --- a/dev-docs/bidders/appnexus.md +++ b/dev-docs/bidders/appnexus.md @@ -69,9 +69,6 @@ The AppNexus adapter supports specifying aspect ratios for native "image" and "i | `ratio_height` | Required | Integer | The height of the aspect ratio of the native ad. | | `min_width` | Optional | Integer | The required minimum width of the image asset in pixels. | -{: .alert.alert-info :} -This implementation follows the [OpenRTB Native 1.2 specification](https://www.iab.com/wp-content/uploads/2017/04/OpenRTB-Native-Ads-Specification-Draft_1.2_2017-04.pdf) - ```javascript mediaTypes: { native: { From d976b460e3a44daea08850c8a5c8da34ea6c2465 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Thu, 11 Jan 2018 11:41:45 -0500 Subject: [PATCH 04/14] Add banner, video, and native sections --- dev-docs/bidders/appnexus.md | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/dev-docs/bidders/appnexus.md b/dev-docs/bidders/appnexus.md index c9619d0cea..79c5d4c511 100644 --- a/dev-docs/bidders/appnexus.md +++ b/dev-docs/bidders/appnexus.md @@ -14,7 +14,9 @@ prebid_1_0_supported : true - [Bid params](#appnexus-bid-params) - [Support for publisher-defined keys](#appnexus-pub-keys) -- [Specify aspect ratios for native images and icons](#appnexus-aspect-ratios) +- [Banner Ads](#appnexus-Banner) +- [Video Ads](#appnexus-Video) +- [Native Ads](#appnexus-Native) @@ -56,9 +58,35 @@ var adUnits = [{ {: .alert.alert-info :} Sizes set in the `adUnit` object will also apply to the AppNexus bid requests. - + -#### Specify aspect ratios for native images and icons +#### Banner Ads + +AppNexus supports the banner features described in: + +- [the `adUnit` properties documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-banner) +- [Getting Started (for developers)]({{site.baseurl}}/dev-docs/getting-started.html) + + + +#### Video Ads + +AppNexus supports the video features described in: + +- [the `adUnit` properties documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-video). +- [Show Video Ads]({{site.baseurl}}/dev-docs/show-video-with-a-dfp-video-tag.html) +- [Show Outstream Video Ads]({{site.baseurl}}/dev-docs/show-outstream-video-ads.html) + + + +#### Native Ads + +AppNexus supports the native features described in: + +- [the `adUnit` properties documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-native). +- [Show Native Ads]({{site.baseurl}}/dev-docs/show-native-ads.html) + +##### Specify aspect ratios for native images and icons The AppNexus adapter supports specifying aspect ratios for native "image" and "icon" assets. Aspect ratios are defined by the following properties of the `aspect_ratios` array. For usage, see the example code below. From 5b856a52dd284ca587d30473e11e991887b59822 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Thu, 11 Jan 2018 17:33:43 -0500 Subject: [PATCH 05/14] WIP native updates across several pages --- dev-docs/bidders/appnexus.md | 32 -------------- dev-docs/publisher-api-reference.md | 46 +++++++++++++++++++- dev-docs/show-native-ads.md | 66 ++++++++++++++++++++++++----- 3 files changed, 100 insertions(+), 44 deletions(-) diff --git a/dev-docs/bidders/appnexus.md b/dev-docs/bidders/appnexus.md index 79c5d4c511..f0164baecf 100644 --- a/dev-docs/bidders/appnexus.md +++ b/dev-docs/bidders/appnexus.md @@ -85,35 +85,3 @@ AppNexus supports the native features described in: - [the `adUnit` properties documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-native). - [Show Native Ads]({{site.baseurl}}/dev-docs/show-native-ads.html) - -##### Specify aspect ratios for native images and icons - -The AppNexus adapter supports specifying aspect ratios for native "image" and "icon" assets. Aspect ratios are defined by the following properties of the `aspect_ratios` array. For usage, see the example code below. - -{: .table .table-bordered .table-striped } -| Name | Scope | Type | Description | -|----------------+----------+---------+----------------------------------------------------------| -| `ratio_width` | Required | Integer | The width of the aspect ratio of the native ad. | -| `ratio_height` | Required | Integer | The height of the aspect ratio of the native ad. | -| `min_width` | Optional | Integer | The required minimum width of the image asset in pixels. | - -```javascript - mediaTypes: { - native: { - title: { - required: true - }, - body: { - required: true - }, - image: { - required: true, - aspect_ratios: [{ - min_width: 100, - ratio_width: 2, - ratio_height: 3, - }] - }, - } - } -``` diff --git a/dev-docs/publisher-api-reference.md b/dev-docs/publisher-api-reference.md index 3c5ab55129..e54e434c4e 100644 --- a/dev-docs/publisher-api-reference.md +++ b/dev-docs/publisher-api-reference.md @@ -610,7 +610,9 @@ See the table below for the list of properties in the `mediaTypes` object of the ##### Native -For an example of a native ad unit, see below. For more detailed instructions, see [Show Native Ads]({{site.baseurl}}/dev-docs/show-native-ads.html). +For examples of native ad units, see below. For more detailed instructions, see [Show Native Ads]({{site.baseurl}}/dev-docs/show-native-ads.html). + +In this example, we mark pretty much every type of native asset as required. ```javascript pbjs.addAdUnits({ @@ -648,6 +650,48 @@ pbjs.addAdUnits({ }) ``` +Alternatively, you can specify aspect ratios for native "image" and "icon" assets. Aspect ratios are defined by the following properties of the `aspect_ratios` array. For usage, see the example code below. + +{: .table .table-bordered .table-striped } +| Name | Scope | Type | Description | +|----------------+----------+---------+----------------------------------------------------------| +| `ratio_width` | Required | Integer | The width of the aspect ratio of the native ad. | +| `ratio_height` | Required | Integer | The height of the aspect ratio of the native ad. | +| `min_width` | Optional | Integer | The required minimum width of the image asset in pixels. | + +```javascript + pbjs.addAdUnits({ + code: slot.code, + sizes: slot.size, + mediaTypes: { + native: { + title: { + required: true + }, + body: { + required: true + }, + sponsoredBy: XXX, + clickUrl: YYY, + image: { + required: true, + aspect_ratios: [{ + min_width: 100, + ratio_width: 2, + ratio_height: 3, + }] + }, + } + }, + bids: [{ + bidder: 'appnexusAst', + params: { + placementId: '9880618' + } + }, ] + }); +``` + ##### Video diff --git a/dev-docs/show-native-ads.md b/dev-docs/show-native-ads.md index 2942ca964a..5636a3b1ca 100644 --- a/dev-docs/show-native-ads.md +++ b/dev-docs/show-native-ads.md @@ -166,19 +166,63 @@ And the following optional fields: + icon + cta -A native `image` ad unit can be set up in the manner below: +A native `image` ad unit can be set up as shown in the examples below. You can either specify an absolute width and height, or use an aspect ratio. As of this writing, more bidders support the absolute width and height method. Be sure to check with your demand partners for details. -{% highlight js %} - - const adUnits = [{ - code: 'adUnit-code', - mediaTypes: { native: { type: 'image' } } - bids: [ - { bidder: 'appnexusAst', params: { placementId: '123456' } } - ] - }]; +Specifying the native ad unit using width and height: -{% endhighlight %} +```javascript + const adUnits = [{ + code: 'adUnit-code', + mediaTypes: { + native: { + image: { + required: true, + height: , // height and width are in pixels + width: YYY, + } + } + } + bids: [{ + bidder: 'appnexusAst', + params: { + placementId: '123456' + } + }] +}]; +``` + +Specifying the native ad unit using aspect ratios: + +```javascript + const adUnits = [{ + + mediaTypes: { + code: 'adUnit-code', + native: { + title: { + required: true + }, + body: { + required: true + }, + image: { + required: true, + aspect_ratios: [{ + min_width: 100, + ratio_width: 2, + ratio_height: 3, + }] + }, + }, + bids: [{ + bidder: 'appnexusAst', + params: { + placementId: '123456' + } + }] + } + }]; +``` ### 3. Add your native ad tag to the page body as usual: From 7ab41d73006d3145cd5fd695eca7a8eb7d4a9a86 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Fri, 12 Jan 2018 10:47:00 -0500 Subject: [PATCH 06/14] Tweak language in AN bidder doc links --- dev-docs/bidders/appnexus.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/dev-docs/bidders/appnexus.md b/dev-docs/bidders/appnexus.md index f0164baecf..463412152b 100644 --- a/dev-docs/bidders/appnexus.md +++ b/dev-docs/bidders/appnexus.md @@ -64,8 +64,8 @@ Sizes set in the `adUnit` object will also apply to the AppNexus bid requests. AppNexus supports the banner features described in: -- [the `adUnit` properties documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-banner) -- [Getting Started (for developers)]({{site.baseurl}}/dev-docs/getting-started.html) +- [the `adUnit` banner documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-banner) +- [Getting Started for Developers]({{site.baseurl}}/dev-docs/getting-started.html) @@ -73,7 +73,7 @@ AppNexus supports the banner features described in: AppNexus supports the video features described in: -- [the `adUnit` properties documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-video). +- [the `adUnit` video documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-video). - [Show Video Ads]({{site.baseurl}}/dev-docs/show-video-with-a-dfp-video-tag.html) - [Show Outstream Video Ads]({{site.baseurl}}/dev-docs/show-outstream-video-ads.html) @@ -83,5 +83,5 @@ AppNexus supports the video features described in: AppNexus supports the native features described in: -- [the `adUnit` properties documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-native). +- [the `adUnit` native documentation]({{site.baseurl}}/dev-docs/publisher-api-reference.html#adUnit-native). - [Show Native Ads]({{site.baseurl}}/dev-docs/show-native-ads.html) From 11f242748357e8580aca10239f085a532a55f1c8 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Fri, 12 Jan 2018 11:08:48 -0500 Subject: [PATCH 07/14] Edit down to a single native example; s/Ast//g --- dev-docs/publisher-api-reference.md | 105 ++++++++++------------------ 1 file changed, 35 insertions(+), 70 deletions(-) diff --git a/dev-docs/publisher-api-reference.md b/dev-docs/publisher-api-reference.md index e54e434c4e..fd8c0f8570 100644 --- a/dev-docs/publisher-api-reference.md +++ b/dev-docs/publisher-api-reference.md @@ -610,54 +610,7 @@ See the table below for the list of properties in the `mediaTypes` object of the ##### Native -For examples of native ad units, see below. For more detailed instructions, see [Show Native Ads]({{site.baseurl}}/dev-docs/show-native-ads.html). - -In this example, we mark pretty much every type of native asset as required. - -```javascript -pbjs.addAdUnits({ - code: slot.code, - sizes: slot.size, - mediaTypes: { - native: { - image: { - required: true - }, - title: { - required: true, - len: 80 - }, - sponsoredBy: { - required: true - }, - clickUrl: { - required: true - }, - body: { - required: true - }, - icon: { - required: true - }, - }, - bids: [{ - bidder: 'appnexusAst', - params: { - placementId: '9880618' - } - }, ] - } -}) -``` - -Alternatively, you can specify aspect ratios for native "image" and "icon" assets. Aspect ratios are defined by the following properties of the `aspect_ratios` array. For usage, see the example code below. - -{: .table .table-bordered .table-striped } -| Name | Scope | Type | Description | -|----------------+----------+---------+----------------------------------------------------------| -| `ratio_width` | Required | Integer | The width of the aspect ratio of the native ad. | -| `ratio_height` | Required | Integer | The height of the aspect ratio of the native ad. | -| `min_width` | Optional | Integer | The required minimum width of the image asset in pixels. | +For an example of a native ad unit, see below. For more detailed instructions, see [Show Native Ads]({{site.baseurl}}/dev-docs/show-native-ads.html). ```javascript pbjs.addAdUnits({ @@ -665,31 +618,43 @@ Alternatively, you can specify aspect ratios for native "image" and "icon" asset sizes: slot.size, mediaTypes: { native: { + image: { + required: true, + + /* If your bidder supports it, you can specify + aspect ratios for image and icon native assets */ + + aspect_ratios: [{ + min_width: 300, /* Optional */ + ratio_width: 2, /* Required */ + ratio_height: 3, /* Required */ + }] + }, title: { + required: true, + len: 80 + }, + sponsoredBy: { + required: true + }, + clickUrl: { required: true }, body: { required: true }, - sponsoredBy: XXX, - clickUrl: YYY, - image: { - required: true, - aspect_ratios: [{ - min_width: 100, - ratio_width: 2, - ratio_height: 3, - }] + icon: { + required: true }, - } - }, - bids: [{ - bidder: 'appnexusAst', - params: { - placementId: '9880618' - } - }, ] - }); + }, + bids: [{ + bidder: 'appnexus', + params: { + placementId: '9880618' + } + }, ] + } + }) ``` @@ -708,7 +673,7 @@ pbjs.addAdUnits({ }, }, bids: [{ - bidder: 'appnexusAst', + bidder: 'appnexus', params: { placementId: '9333431', video: { @@ -759,7 +724,7 @@ pbjs.addAdUnits({ sizes: [[300, 250], [300, 600]] }, bids: [{ - bidder: 'appnexusAst', + bidder: 'appnexus', params: { placementId: '9880618' } @@ -1212,11 +1177,11 @@ To define an alias for a bidder adapter, call this method at runtime: {% highlight js %} -pbjs.aliasBidder('appnexusAst', 'newAlias'); +pbjs.aliasBidder('appnexus', 'newAlias'); {% endhighlight %} -Defining an alias can help avoid user confusion since it's possible to send parameters to the same adapter but in different contexts (e.g, The publisher uses `"appnexusAst"` for demand and also uses `"newAlias"` which is an SSP partner that uses the `"appnexusAst"` adapter to serve their own unique demand). +Defining an alias can help avoid user confusion since it's possible to send parameters to the same adapter but in different contexts (e.g, The publisher uses `"appnexus"` for demand and also uses `"newAlias"` which is an SSP partner that uses the `"appnexus"` adapter to serve their own unique demand). It's not technically necessary to define an alias, since each copy of an adapter with the same name gets a different ID in the internal bidder registry so Prebid.js can still tell them apart. From 9c977b10c1dbac53094ba82f2ee2a404a8733ca0 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Fri, 12 Jan 2018 11:10:16 -0500 Subject: [PATCH 08/14] Update native example code; s/Ast//g --- dev-docs/show-native-ads.md | 64 +++++++++++-------------------------- 1 file changed, 18 insertions(+), 46 deletions(-) diff --git a/dev-docs/show-native-ads.md b/dev-docs/show-native-ads.md index 5636a3b1ca..1ba0bd1aa4 100644 --- a/dev-docs/show-native-ads.md +++ b/dev-docs/show-native-ads.md @@ -15,7 +15,7 @@ nav_section: prebid-native In this tutorial, we'll set up Prebid.js to show native ads. -We'll use the [AppNexus AST adapter]({{site.github.url}}/dev-docs/bidders.html#appnexusAst) since that adapter supports native ads, but the concepts and setup will be largely the same for any bidder adapter that supports the `"native"` media type. +We'll use the [AppNexus adapter]({{site.github.url}}/dev-docs/bidders.html#appnexus) since that adapter supports native ads, but the concepts and setup will be largely the same for any bidder adapter that supports the `"native"` media type. Similarly, we'll use DFP as the ad server, but the concept and implementation should be pretty similar to other ad servers. @@ -134,7 +134,7 @@ pbjs.addAdUnits({ }, }, bids: [{ - bidder: 'appnexusAst', + bidder: 'appnexus', params: { placementId: '9880618' } @@ -166,61 +166,33 @@ And the following optional fields: + icon + cta -A native `image` ad unit can be set up as shown in the examples below. You can either specify an absolute width and height, or use an aspect ratio. As of this writing, more bidders support the absolute width and height method. Be sure to check with your demand partners for details. - -Specifying the native ad unit using width and height: - -```javascript - const adUnits = [{ - code: 'adUnit-code', - mediaTypes: { - native: { - image: { - required: true, - height: , // height and width are in pixels - width: YYY, - } - } - } - bids: [{ - bidder: 'appnexusAst', - params: { - placementId: '123456' - } - }] -}]; -``` - -Specifying the native ad unit using aspect ratios: +A native "image-type" ad unit can be set up as shown in the following example. ```javascript const adUnits = [{ - + code: 'adUnit-code', mediaTypes: { - code: 'adUnit-code', native: { - title: { - required: true - }, - body: { - required: true - }, image: { required: true, + + /* If your bidder supports it, you can specify aspect + ratios for image and icon native assets */ + aspect_ratios: [{ - min_width: 100, - ratio_width: 2, - ratio_height: 3, + min_width: 300, /* Optional */ + ratio_width: 2, /* Required */ + ratio_height: 3, /* Required */ }] - }, - }, - bids: [{ - bidder: 'appnexusAst', - params: { - placementId: '123456' } - }] + } } + bids: [{ + bidder: 'appnexus', + params: { + placementId: '123456' + } + }] }]; ``` From 635016e5bda9d688454690d34c55cf9d0ceb6cc3 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Wed, 17 Jan 2018 14:31:51 -0500 Subject: [PATCH 09/14] Show `mediaTypes.native.image.sizes` in examples In addition to updating the basic examples to use sizes for images and icons, we add a section to both the API reference and the 'Show Native Ads' page that lists both ways to define sizes for image-like assets. Since the content is the same, it's in a shared file sourced using the Liquid `include` keyword. --- .../dev-docs/native-image-asset-sizes.md | 31 +++++++++++++++++++ dev-docs/publisher-api-reference.md | 15 +++------ dev-docs/show-native-ads.md | 18 +++++------ 3 files changed, 43 insertions(+), 21 deletions(-) create mode 100644 _includes/dev-docs/native-image-asset-sizes.md diff --git a/_includes/dev-docs/native-image-asset-sizes.md b/_includes/dev-docs/native-image-asset-sizes.md new file mode 100644 index 0000000000..bb5d113e94 --- /dev/null +++ b/_includes/dev-docs/native-image-asset-sizes.md @@ -0,0 +1,31 @@ +There are two methods for defining sizes for image-like assets (`image` and `icon`). Both are shown below, but the first example (using `sizes`) is more widely supported by demand partners. + +1. Using `mediaTypes.native.image.sizes` (or `mediaTypes.native.icon.sizes` for icons): + + ```javascript + mediaTypes: { + native: { + image: { + required: true, + sizes: [150, 50] + } + } + } + ``` + +2. Using `mediaTypes.native.image.aspect_ratios` (or `mediaTypes.native.icon.aspect_ratios` for icons): + + ```javascript + mediaTypes: { + native: { + image: { + required: true, + aspect_ratios: [{ + min_width: 300, /* Optional */ + ratio_width: 2, /* Required */ + ratio_height: 3, /* Required */ + }] + } + } + } + ``` diff --git a/dev-docs/publisher-api-reference.md b/dev-docs/publisher-api-reference.md index fd8c0f8570..5ca0ddfc23 100644 --- a/dev-docs/publisher-api-reference.md +++ b/dev-docs/publisher-api-reference.md @@ -620,15 +620,7 @@ For an example of a native ad unit, see below. For more detailed instructions, native: { image: { required: true, - - /* If your bidder supports it, you can specify - aspect ratios for image and icon native assets */ - - aspect_ratios: [{ - min_width: 300, /* Optional */ - ratio_width: 2, /* Required */ - ratio_height: 3, /* Required */ - }] + sizes: [150, 50] }, title: { required: true, @@ -644,7 +636,8 @@ For an example of a native ad unit, see below. For more detailed instructions, required: true }, icon: { - required: true + required: true, + sizes: [50, 50] }, }, bids: [{ @@ -657,6 +650,8 @@ For an example of a native ad unit, see below. For more detailed instructions, }) ``` +{% include dev-docs/native-image-asset-sizes.md %} + ##### Video diff --git a/dev-docs/show-native-ads.md b/dev-docs/show-native-ads.md index 1ba0bd1aa4..eae8cbe543 100644 --- a/dev-docs/show-native-ads.md +++ b/dev-docs/show-native-ads.md @@ -114,7 +114,8 @@ pbjs.addAdUnits({ mediaTypes: { native: { image: { - required: true + required: true, + sizes: [150, 50] }, title: { required: true, @@ -130,7 +131,8 @@ pbjs.addAdUnits({ required: true }, icon: { - required: true + required: true, + sizes: [50, 50] }, }, bids: [{ @@ -175,15 +177,7 @@ A native "image-type" ad unit can be set up as shown in the following example. native: { image: { required: true, - - /* If your bidder supports it, you can specify aspect - ratios for image and icon native assets */ - - aspect_ratios: [{ - min_width: 300, /* Optional */ - ratio_width: 2, /* Required */ - ratio_height: 3, /* Required */ - }] + sizes: [150, 50] } } } @@ -196,6 +190,8 @@ A native "image-type" ad unit can be set up as shown in the following example. }]; ``` +{% include dev-docs/native-image-asset-sizes.md %} + ### 3. Add your native ad tag to the page body as usual: {% highlight html %} From a921d399a4cab40305cd02bba4c27889a9906a98 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Mon, 22 Jan 2018 15:28:39 -0500 Subject: [PATCH 10/14] Fix code formatting issue with included file --- _includes/dev-docs/native-image-asset-sizes.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/_includes/dev-docs/native-image-asset-sizes.md b/_includes/dev-docs/native-image-asset-sizes.md index bb5d113e94..99149a51e2 100644 --- a/_includes/dev-docs/native-image-asset-sizes.md +++ b/_includes/dev-docs/native-image-asset-sizes.md @@ -1,8 +1,9 @@ There are two methods for defining sizes for image-like assets (`image` and `icon`). Both are shown below, but the first example (using `sizes`) is more widely supported by demand partners. -1. Using `mediaTypes.native.image.sizes` (or `mediaTypes.native.icon.sizes` for icons): +Using `mediaTypes.native.image.sizes` (or `mediaTypes.native.icon.sizes` for icons): + +{% highlight js %} - ```javascript mediaTypes: { native: { image: { @@ -11,11 +12,13 @@ There are two methods for defining sizes for image-like assets (`image` and `ico } } } - ``` -2. Using `mediaTypes.native.image.aspect_ratios` (or `mediaTypes.native.icon.aspect_ratios` for icons): +{% endhighlight %} + +Using `mediaTypes.native.image.aspect_ratios` (or `mediaTypes.native.icon.aspect_ratios` for icons): + +{% highlight js %} - ```javascript mediaTypes: { native: { image: { @@ -28,4 +31,5 @@ There are two methods for defining sizes for image-like assets (`image` and `ico } } } - ``` + +{% endhighlight %} From 081cbee9caf89d648dc155852069503600d672cb Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Mon, 22 Jan 2018 15:31:16 -0500 Subject: [PATCH 11/14] `adUnit.sizes` is ignored on native ad units --- dev-docs/publisher-api-reference.md | 1 - 1 file changed, 1 deletion(-) diff --git a/dev-docs/publisher-api-reference.md b/dev-docs/publisher-api-reference.md index 5ca0ddfc23..a78489d474 100644 --- a/dev-docs/publisher-api-reference.md +++ b/dev-docs/publisher-api-reference.md @@ -615,7 +615,6 @@ For an example of a native ad unit, see below. For more detailed instructions, ```javascript pbjs.addAdUnits({ code: slot.code, - sizes: slot.size, mediaTypes: { native: { image: { From cefb91e3a38f3c40164fde7f088f6550260719b9 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Mon, 22 Jan 2018 15:36:27 -0500 Subject: [PATCH 12/14] Remove `adUnit.sizes` since banner sizes are used --- dev-docs/publisher-api-reference.md | 1 - 1 file changed, 1 deletion(-) diff --git a/dev-docs/publisher-api-reference.md b/dev-docs/publisher-api-reference.md index a78489d474..24ee427aa0 100644 --- a/dev-docs/publisher-api-reference.md +++ b/dev-docs/publisher-api-reference.md @@ -712,7 +712,6 @@ For an example of a banner ad unit, see below. For more detailed instructions, ```javascript pbjs.addAdUnits({ code: slot.code, - sizes: slot.size, mediaTypes: { banner: { sizes: [[300, 250], [300, 600]] From fe4679cb1318b8efd14ddf5e6e485ce13108b5e0 Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Mon, 22 Jan 2018 15:45:20 -0500 Subject: [PATCH 13/14] Remove redundant `adUnit.sizes` from native ad --- dev-docs/show-native-ads.md | 1 - 1 file changed, 1 deletion(-) diff --git a/dev-docs/show-native-ads.md b/dev-docs/show-native-ads.md index eae8cbe543..3068bf16e0 100644 --- a/dev-docs/show-native-ads.md +++ b/dev-docs/show-native-ads.md @@ -110,7 +110,6 @@ Each key's value is an object with several fields. Most important is the `requi pbjs.addAdUnits({ code: slot.code, - sizes: slot.size, mediaTypes: { native: { image: { From b31cbb7fc366c67cf47c1fc8687cef8f02e1324c Mon Sep 17 00:00:00 2001 From: Rich Loveland Date: Mon, 22 Jan 2018 16:01:19 -0500 Subject: [PATCH 14/14] Use correct syntax for native "image-type" ad --- dev-docs/show-native-ads.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/dev-docs/show-native-ads.md b/dev-docs/show-native-ads.md index 3068bf16e0..15d631b924 100644 --- a/dev-docs/show-native-ads.md +++ b/dev-docs/show-native-ads.md @@ -174,10 +174,7 @@ A native "image-type" ad unit can be set up as shown in the following example. code: 'adUnit-code', mediaTypes: { native: { - image: { - required: true, - sizes: [150, 50] - } + type: 'image' } } bids: [{