Add native aspect ratio info to AN adapter docs #543
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
There was a problem hiding this comment. Should be fixed by a921d39 |
||
| mediaTypes: { | ||
| native: { | ||
| image: { | ||
| required: true, | ||
| aspect_ratios: [{ | ||
| min_width: 300, /* Optional */ | ||
| ratio_width: 2, /* Required */ | ||
| ratio_height: 3, /* Required */ | ||
| }] | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,19 +10,31 @@ hide: true | |
| prebid_1_0_supported : true | ||
| --- | ||
|
|
||
| **Table of Contents** | ||
|
|
||
| - [Bid params](#appnexus-bid-params) | ||
| - [Support for publisher-defined keys](#appnexus-pub-keys) | ||
| - [Banner Ads](#appnexus-Banner) | ||
| - [Video Ads](#appnexus-Video) | ||
| - [Native Ads](#appnexus-Native) | ||
|
|
||
| <a name="appnexus-bid-params" /> | ||
|
|
||
| ### 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 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` | | ||
|
|
||
| <a name="appnexus-pub-keys" /> | ||
|
|
||
| #### 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 +55,33 @@ var adUnits = [{ | |
| }] | ||
| {% endhighlight %} | ||
|
|
||
| {: .alert.alert-info :} | ||
| Sizes set in the `adUnit` object will also apply to the AppNexus bid requests. | ||
|
There was a problem hiding this comment. Why do we need to break out these separate sections? For each media type below, it seems like we're just redirecting back to the standard documentation. There was a problem hiding this comment.
It's intended as an enhancement. It's meant to provide another way for users to discover the features supported by the
Yes. The idea is that once you see in the mini-TOC that we support native, from there, you can jump to the native ads documentation, knowing that the AN adapter supports the features described there (rather than us having a miniature "native" section of content here with info that is redundant with 'Show Native Ads'). Once the multiformat feature/docs are out, I would like to add another little section to this mini-TOC that points the user to the multi-format docs. |
||
|
|
||
| <a name="appnexus-Banner" /> | ||
|
|
||
| #### Banner Ads | ||
|
|
||
| AppNexus supports the banner features described in: | ||
|
|
||
| - [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) | ||
|
|
||
| <a name="appnexus-Video" /> | ||
|
|
||
| #### Video Ads | ||
|
|
||
| AppNexus supports the video features described in: | ||
|
|
||
| - [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) | ||
|
|
||
| <a name="appnexus-Native" /> | ||
|
|
||
| #### Native Ads | ||
|
|
||
| AppNexus supports the native features described in: | ||
|
|
||
| - [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) | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -613,41 +613,45 @@ See the table below for the list of properties in the `mediaTypes` object of the | |
| 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({ | ||
| code: slot.code, | ||
| sizes: slot.size, | ||
|
There was a problem hiding this comment. adUnit.sizes should be ignored on native ad units. There was a problem hiding this comment. Oops - thanks. Fixed in 081cbee |
||
| mediaTypes: { | ||
| native: { | ||
| image: { | ||
| required: true, | ||
| sizes: [150, 50] | ||
| }, | ||
| title: { | ||
| required: true, | ||
| len: 80 | ||
| }, | ||
| sponsoredBy: { | ||
| required: true | ||
| }, | ||
| clickUrl: { | ||
| required: true | ||
| }, | ||
| body: { | ||
| required: true | ||
| }, | ||
| icon: { | ||
| required: true, | ||
| sizes: [50, 50] | ||
| }, | ||
| }, | ||
| bids: [{ | ||
| bidder: 'appnexus', | ||
| params: { | ||
| placementId: '9880618' | ||
| } | ||
| }, ] | ||
| } | ||
| }) | ||
| ``` | ||
|
|
||
| {% include dev-docs/native-image-asset-sizes.md %} | ||
|
There was a problem hiding this comment. Formatting issue, as described above. There was a problem hiding this comment. Should be fixed by a921d39 |
||
|
|
||
| <a name="adUnit-video"> | ||
|
|
||
| ##### Video | ||
|
|
@@ -664,7 +668,7 @@ pbjs.addAdUnits({ | |
| }, | ||
| }, | ||
| bids: [{ | ||
| bidder: 'appnexus', | ||
| params: { | ||
| placementId: '9333431', | ||
| video: { | ||
|
|
@@ -715,7 +719,7 @@ pbjs.addAdUnits({ | |
| sizes: [[300, 250], [300, 600]] | ||
|
There was a problem hiding this comment. looks like this adUnit has both adUnit.sizes as well as adUnit.mediaTypes.banner.sizes. There was a problem hiding this comment. Thanks, addressed by cefb91e |
||
| }, | ||
| bids: [{ | ||
| bidder: 'appnexus', | ||
| params: { | ||
| placementId: '9880618' | ||
| } | ||
|
|
@@ -1168,11 +1172,11 @@ To define an alias for a bidder adapter, call this method at runtime: | |
|
|
||
| {% highlight js %} | ||
|
|
||
| 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 `"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. | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 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. | ||
|
|
||
|
|
@@ -114,7 +114,8 @@ pbjs.addAdUnits({ | |
| mediaTypes: { | ||
| native: { | ||
| image: { | ||
| required: true, | ||
| sizes: [150, 50] | ||
|
There was a problem hiding this comment. looks like this adUnit has both adUnit.sizes as well as adUnit.mediaTypes.native.image.sizes and adUnit.mediaTypes.native.icon.sizes There was a problem hiding this comment. http://www.nooooooooooooooo.com OK, updated in fe4679c to remove |
||
| }, | ||
| title: { | ||
| required: true, | ||
|
|
@@ -130,11 +131,12 @@ pbjs.addAdUnits({ | |
| required: true | ||
| }, | ||
| icon: { | ||
| required: true, | ||
| sizes: [50, 50] | ||
| }, | ||
| }, | ||
| bids: [{ | ||
| bidder: 'appnexus', | ||
| params: { | ||
| placementId: '9880618' | ||
| } | ||
|
|
@@ -166,19 +168,29 @@ And the following optional fields: | |
| + icon | ||
| + cta | ||
|
|
||
| A native "image-type" ad unit can be set up as shown in the following example. | ||
|
There was a problem hiding this comment. See note above about documenting "mediaTypes.native.image.sizes" and "mediaTypes.native.image.aspect_ratios" There was a problem hiding this comment. Are you sure that this is the correct way to set up a native "image-type" ad unit? This looks like standard native with just a single required asset. There was a problem hiding this comment. http://www.nooooooooooooooo.com x 2 Was writing it out longhand by mistake. Fixed in b31cbb7 to use the shorthand. |
||
|
|
||
| ```javascript | ||
| const adUnits = [{ | ||
| code: 'adUnit-code', | ||
| mediaTypes: { | ||
| native: { | ||
| image: { | ||
| required: true, | ||
| sizes: [150, 50] | ||
| } | ||
| } | ||
| } | ||
| bids: [{ | ||
| bidder: 'appnexus', | ||
| params: { | ||
| placementId: '123456' | ||
| } | ||
| }] | ||
| }]; | ||
| ``` | ||
|
|
||
| {% include dev-docs/native-image-asset-sizes.md %} | ||
|
|
||
| ### 3. Add your native ad tag to the page body as usual: | ||
|
|
||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When I run this locally, I'm seeing this appear as in-line code as opposed to a code block with syntax highlighting.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should be fixed by a921d39