Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add native asset placeholders section #1175

Merged
merged 2 commits into from
Mar 1, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion adops/setting-up-prebid-native-in-dfp.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Select **New format** under **Custom format**. (If you've already created an ad

## 3. Style your native ad

You can add HTML and CSS to define your native ad template. To allow for native impression trackers and click trackers within a Prebid native creative template, you'll need to include a CDN-hosted script in the HTML, as shown here (see Example HTML below for the full script):
You can add HTML and CSS to define your native ad template. To allow for native impression trackers, click trackers, and [automatic placeholder value replacement]({{site.github.url}}/dev-docs/examples/show-native-ads.html#sending-asset-placeholders) within a Prebid native creative template, you'll need to include a CDN-hosted script in the HTML, as shown here (see Example HTML below for the full script):
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

path is incorrect, there's no examples/ in the path.


![native ad styling]({{site.github.url}}/assets/images/ad-ops/dfp-native/prebid_native_styling.png){: .pb-md-img :}

Expand Down
67 changes: 67 additions & 0 deletions dev-docs/show-native-ads.md
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,73 @@ const adUnits = [{
</div>
{% endhighlight %}

## Sending Asset Placeholders

Prebid.js sends received asset values to a native template defined in your ad server using key-value targeting. The key-value targeting pairs are passed to the ad server as query string parameters. In some cases, sending native asset values as query string parameters may cause errors. For example, a long `clickUrl` value can exceed an ad request URL limit, or special characters within a `body` can get mangled by URL encoding. In these cases, you can opt to send URL-safe placeholder values to the ad server, and then in the native template, replace the placeholder values with the actual native values through a non-URL request to and response from Prebid.js. Here's how it works:

### 1. Configure which assets to send as placeholders

Within `mediaTypes.native`, add `sendId: true` to any asset object you wish to send as a placeholder. For example, to send `body` and `clickUrl` as placeholders:

```javascript
mediaTypes: {
native: {
body: {
sendId: true
},
clickUrl: {
sendId: true
},
},
},
```

### 2. Prebid.js sends placeholder values

For the assets configured with `sendId: true`, Prebid.js sends a placeholder value describing the asset type and the `adId` for the associated ad. In this example, Prebid.js would send the body and clickUrl assets as values like `hb_native_body:38a33cef3e926f` and `hb_native_linkurl:38a33cef3e926f`. The value after the `:` in each of these examples is the `adId` generated by Prebid for that native ad object.

### 3. Native template replaces the placeholders

Finally in the native template on the adserver, search for any expected placeholder values and replace them with their actual values.

Placeholder values will start with the `hb_native_...` key for that asset type, contain a `:` separator, and end with the `adId` for that ad object (available via the Prebid targeting key `hb_adid`). When Prebid.js receives a postmessage request in the form

```json
{
"message": "Prebid Native",
"action": "assetRequest",
"adId": "38a33cef3e926f",
"assets": [
"hb_native_body",
"hb_native_linkurl"
]
}
```

it will respond to that request with the actual asset values for that `adId` in the form

```json
{
"message": "assetResponse",
"adId": "30655b7d68dc51",
"assets": [
{
"key": "body",
"value": "This is a Prebid Native Creative"
},
{
"key": "clickUrl",
"value": "http://prebid.org/dev-docs/show-native-ads.html"
}
]
}
```

A script within the native template can listen for this response and replace the placeholder values with their actual values.

The `native-trk.js` script available as part of `prebid-universal-creative`, if used in a template that sets any link with a `pbAdId` to `hb_adid`, will replace any placeholder values with their actual values automatically (note: this works for placeholders located within HTML native templates but not CSS native templates). See [Style your native ad]({{site.github.url}}/adops/setting-up-prebid-native-in-dfp.html#3-style-your-native-ad)
for more on how to set this up in a native template.

## Working Examples

+ [Prebid Native with two slots]({{site.github.url}}/examples/native/native-demo.html)
Expand Down