Skip to content

Commit 4a4b5bf

Browse files
authored
Document JS dynamic creatives (prebid#5120)
1 parent f400ffb commit 4a4b5bf

4 files changed

Lines changed: 87 additions & 7 deletions

File tree

adops/creative-considerations.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,14 @@ The first decision you’ll need to make when it comes to creatives (with the ex
3030

3131
The big advantage to using the PUC is that it’s the simplest approach to configuring Prebid in your ad server. It provides a robust mechanism that can be used across several formats, platforms, devices, and ad servers.
3232

33-
The primary disadvantage to using the PUC is that it takes an extra fetch to load the PUC file vs doing everything inline to the creative. Also, in version 1.14.1 and earlier of the PUC, loading a “universal” creative means that more bytes are loaded than are actually necessary for the display of a single creative. This all leads to a very slight performance penalty.
33+
The primary disadvantage to using the PUC is that it takes an extra fetch to load the PUC file vs doing everything inline to the creative. Also, loading a “universal” creative means that more bytes are loaded than are actually necessary for the display of a single creative. This all leads to a slight performance penalty.
3434

3535
You’ll need to determine whether the ease of implementation is worth the small performance penalty.
3636

37+
## Prebid.js dynamic creatives
38+
39+
If you have line items that target only browsers running Prebid.js, you can use [dynamic creatives](/adops/js-dynamic-creative.html) to avoid the PUC performance penalty but keep the same ease of setup and maintenance. The disadvantage of this approach is that it does not support platforms that do not run Prebid.js, such as AMP or mobile apps.
40+
3741
## Where to Host the PUC
3842

3943
If you choose to use the Prebid Universal Creative, you'll need to decide where to load it from:

adops/js-dynamic-creative.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
layout: page_v2
3+
title: Prebid.js dynamic creatives
4+
head_title: Prebid.js dynamic creatives
5+
sidebarType: 3
6+
---
7+
8+
# Prebid.js dynamic creatives
9+
{:.no_toc}
10+
11+
- TOC
12+
{: toc}
13+
14+
## Overview
15+
16+
For line items that target browsers only, you may use Prebid.js dynamic creatives as an alternative to [Prebid Universal Creative](/overview/prebid-universal-creative.html). The former provides slightly better performance and ease of use, but relies on Prebid.js, meaning that it does not support non-JS use cases (such as mobile apps or AMP).
17+
18+
## Comparison vs PUC for Prebid.js
19+
20+
A creative set up to use Prebid Universal Creative:
21+
22+
- loads a separate script, typically from a CDN; the script contains various rendering routines, including some specific to Prebid.js;
23+
- if the script determines that the ad render was initiated by Prebid.js, it retrieves from it information about the winning bid and renders it;
24+
- requires different setups for different use cases (such as banner vs native).
25+
26+
A Prebid.js dynamic creative:
27+
28+
- does not load any additional script - it's instead set up with a small block of inline Javascript;
29+
- it expects to always find Prebid.js, retrieving from it information about the winning bid _and_ the rendering logic to use for it;
30+
- uses the same setup for all cases - but does not work when the render is not initiated by Prebid.js.
31+
32+
## How to use
33+
34+
{: .alert.alert-warning :}
35+
Dynamic creatives require Prebid.js version 8.36 or higher.
36+
37+
Set up the creative following [this example](https://github.com/prebid/Prebid.js/blob/master/integrationExamples/gpt/x-domain/creative.html). If you are not using GAM, replace the macros in the second `script` tag with appropriate equivalents.
38+
39+
To render native ads, you also need to include the [nativeRendering](/dev-docs/modules/nativeRendering.html) module in your Prebid.js bundle.
40+
41+
## Further reading
42+
43+
- [Creative Considerations](/adops/creative-considerations.md)
44+
- [Prebid Universal Creative](/overview/prebid-universal-creative.html)
45+
- [Native rendering module](/dev-docs/modules/nativeRendering.html)
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
layout: page_v2
3+
page_type: module
4+
title: Module - Native rendering
5+
description: Render native bids with renderAd or dynamic creatives
6+
module_code : nativeRendering
7+
display_name : Native Rendering
8+
enable_download : true
9+
sidebarType : 1
10+
---
11+
12+
# Native rendering module
13+
14+
This module enables rendering of native ads through [pbjs.renderAd](/dev-docs/publisher-api-reference/renderAd.html) or [dynamic creatives](/adops/js-dynamic-creative.html).
15+
16+
There's no configuration necessary except for installing the module; once included, you may use those rendering methods for native bids. If _not_ included, rendering native ads is only supported through [Prebid Universal Creative](/overview/prebid-universal-creative.html).
17+
18+
## Further reading
19+
20+
- [renderAd reference](/dev-docs/publisher-api-reference/renderAd.html)
21+
- [Prebid.js dynamic creatives](/adops/js-dynamic-creative.html)
22+
- [Prebid Universal Creative](/overview/prebid-universal-creative.html)

overview/prebid-universal-creative.md

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ when a Prebid ad has won the auction. There are a number of use cases:
2424
{: .table .table-bordered .table-striped }
2525
| Use Case | PUC file | Alternate Approach |
2626
| --- | --- | --- |
27-
| web banner: iframe | banner.js (or creative.js) | [Banner and Outstream Video iframes](#alt-iframes) |
28-
| web banner: safeframe | banner.js (or creative.js) | [Banner Safeframes](#alt-safeframes) |
29-
| web outstream video: iframe | video.js (or creative.js) | [Banner and Outstream Video iframes](#alt-iframes) |
27+
| web banner: iframe | banner.js (or creative.js) | [Dynamic creatives](#alt-dyn), [Banner and Outstream Video iframes](#alt-iframes) |
28+
| web banner: safeframe | banner.js (or creative.js) | [Dynamic creatives](#alt-dyn), [Banner Safeframes](#alt-safeframes) |
29+
| web outstream video: iframe | video.js (or creative.js) | [Dynamic creatives](#alt-dyn), [Banner and Outstream Video iframes](#alt-iframes) |
3030
| web outstream video: safeframe | n/a | Outstream renderers each choose where to render differently, but none writes to the safeframe. |
3131
| AMP banner: always safeframe | amp.js (or creative.js) | n/a |
32-
| native: iframe | native.js (or native-render.js) | n/a |
33-
| native: safeframe | native.js (or native-render.js) | n/a |
32+
| native: iframe | native.js (or native-render.js) | [Dynamic creatives](#alt-dyn) |
33+
| native: safeframe | native.js (or native-render.js) | [Dynamic creatives](#alt-dyn) |
3434

3535
Note that as of PUC v1.15, the recommended way of loading the creative
3636
in the ad server involves using the `hb_format` ad server key-value. Before 1.15, the ad server needed to load creative.js which covered banner and outstream video, or native-render.js for native. 1.15 simplifies this
@@ -77,6 +77,14 @@ While Prebid recommends the use of creative.js because we regularly add
7777
features and fix bugs, publishers may choose to hardcode the functionality
7878
into their ad server creatives.
7979

80+
<a name="alt-dyn"></a>
81+
82+
### Prebid.js dynamic creatives
83+
84+
If you only need to display creatives rendered by Prebid.js (as opposed platforms like AMP or mobile SDKs),
85+
you can avoid loading the PUC script - and the performance cost that entails - but still keep some of its advantages, such as regular updates,
86+
by using [Prebid.js dynamic creatives](/adops/js-dynamic-creative.html).
87+
8088
<a name="alt-iframes"></a>
8189

8290
### Alternate methods for Banner and Outstream Video iframes
@@ -97,9 +105,10 @@ If you only ever need to display non-safeframed banner and outstream-video creat
97105
If safeframe support is required, some options are:
98106

99107
1. Copy the contents of `https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/creative.js` into each ad server creative.
100-
1. Copy the example at [github.com/prebid/Prebid.js/blob/master/integrationExamples/gpt/x-domain/creative.html](https://github.com/prebid/Prebid.js/blob/master/integrationExamples/gpt/x-domain/creative.html) into each ad server creative. This is basically just part of the PUC that's been isolated to be standalone.
108+
2. [Prebid.js dynamic creatives](/adops/js-dynamic-creative.html)
101109

102110
## Further Reading
103111

104112
- [Step by Step Guide to Google Ad Manager Setup](/adops/step-by-step.html)
105113
- [Setting up Prebid with the Xandr Monetize Ad Server](/adops/setting-up-prebid-with-the-appnexus-ad-server.html)
114+
- [Prebid.js dynamic creatives](/adops/js-dynamic-creative.html)

0 commit comments

Comments
 (0)