Add native aspect ratio info to AN adapter docs #543
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| 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. | ||
|
|
||
| Using `mediaTypes.native.image.sizes` (or `mediaTypes.native.icon.sizes` for icons): | ||
|
|
||
| {% highlight js %} | ||
|
|
||
| mediaTypes: { | ||
| native: { | ||
| image: { | ||
| required: true, | ||
| sizes: [150, 50] | ||
| } | ||
| } | ||
| } | ||
|
|
||
| {% endhighlight %} | ||
|
|
||
| Using `mediaTypes.native.image.aspect_ratios` (or `mediaTypes.native.icon.aspect_ratios` for icons): | ||
|
|
||
| {% highlight js %} | ||
|
|
||
| mediaTypes: { | ||
| native: { | ||
| image: { | ||
| required: true, | ||
| aspect_ratios: [{ | ||
| min_width: 300, /* Optional */ | ||
| ratio_width: 2, /* Required */ | ||
| ratio_height: 3, /* Required */ | ||
| }] | ||
| } | ||
| } | ||
| } | ||
|
|
||
| {% endhighlight %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -613,41 +613,44 @@ 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, | ||
| 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 +667,7 @@ pbjs.addAdUnits({ | |
| }, | ||
| }, | ||
| bids: [{ | ||
| bidder: 'appnexus', | ||
| params: { | ||
| placementId: '9333431', | ||
| video: { | ||
|
|
@@ -709,13 +712,12 @@ For an example of a banner ad unit, see below. For more detailed instructions, | |
| ```javascript | ||
| pbjs.addAdUnits({ | ||
| code: slot.code, | ||
| mediaTypes: { | ||
| banner: { | ||
| 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 +1170,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. | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. | ||
|
|
||
|
|
@@ -110,11 +110,11 @@ Each key's value is an object with several fields. Most important is the `requi | |
|
|
||
| pbjs.addAdUnits({ | ||
| code: slot.code, | ||
| 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 +130,12 @@ pbjs.addAdUnits({ | |
| required: true | ||
| }, | ||
| icon: { | ||
| required: true, | ||
| sizes: [50, 50] | ||
| }, | ||
| }, | ||
| bids: [{ | ||
| bidder: 'appnexus', | ||
| params: { | ||
| placementId: '9880618' | ||
| } | ||
|
|
@@ -166,19 +167,26 @@ 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. 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: { | ||
| type: 'image' | ||
| } | ||
| } | ||
| 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: | ||
|
|
||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's intended as an enhancement. It's meant to provide another way for users to discover the features supported by the
appnexusadapter beyond the section Bidders with video and native demand. For example, you can scan the mini-TOC and see that we support native ads.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.