Skip to content

Commit 93bf651

Browse files
zhongshixibretg
andauthored
Hello World Sample (prebid#3326)
Co-authored-by: Bret Gorsline <[email protected]>
1 parent 83e12ea commit 93bf651

7 files changed

+306
-0
lines changed

README.md

+6
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,9 @@ We welcome everyone to contribute to this project by implementing a specificatio
105105

106106
### Bug Fix
107107
Bug reports may be submitted by [opening a new issue](https://github.com/prebid/prebid-server/issues/new/choose) and describing the error in detail with the steps to reproduce and example data. A member of the core development team will validate the bug and discuss next steps. You're encouraged to open an exploratory draft pull request to either demonstrate the bug by adding a test or offering a potential fix.
108+
The quickest way to start developing Prebid Server in a reproducible environment isolated from your host OS
109+
is by using Visual Studio Code with [Remote Container Setup](devcontainer.md).
110+
111+
## Learning Materials
112+
113+
To understand more about how Prebid Server in Go works and quickly spins up sample instances, refer to the `sample` folder which describes various structured and integrated examples. The examples are designed to run on any platform that supports `docker` container.

sample/001_banner/app.yaml

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
port: 8000 # main auction server port
2+
admin_port: 6060 # admin server listening port
3+
4+
external_url: localhost # host url of all 2 servers above
5+
status_response: "ok" # default response string for /status endpoint
6+
7+
gdpr:
8+
default_value: "0" # disable gdpr, explicitly specifying a default value is a requirement in prebid server config
9+
10+
# set up stored request storage using local file system
11+
stored_requests:
12+
filesystem:
13+
enabled: true
14+
directorypath: ./stored_requests/data/by_id
15+
16+
# set up stored response storage using local file system
17+
stored_responses:
18+
filesystem:
19+
enabled: true
20+
directorypath: ./stored_responses/data/by_id

sample/001_banner/pbjs.html

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
div.adslot {
6+
border-color: red;
7+
border-style: solid;
8+
width: 300px;
9+
height: 600px;
10+
}
11+
p.description {
12+
border-style: solid;
13+
}
14+
</style>
15+
<script src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
16+
<script>
17+
18+
var sizes = [
19+
[300, 250],
20+
[300, 600]
21+
];
22+
23+
// use the cool "Prebid Less" feature https://docs.prebid.org/dev-docs/adunit-reference.html#stored-imp
24+
var adUnits = [
25+
{
26+
code: 'test-div-1',
27+
mediaTypes: {
28+
banner: {
29+
sizes: sizes
30+
}
31+
},
32+
bids: [{
33+
module: "pbsBidAdapter",
34+
ortb2Imp: {
35+
ext: { prebid: { storedrequest: { id: 'test-imp-id' }}}
36+
}
37+
}]
38+
}
39+
]
40+
41+
function renderAllAdUnits() {
42+
var winners = pbjs.getHighestCpmBids();
43+
for (var i = 0; i < winners.length; i++) {
44+
renderOne(winners[i]);
45+
}
46+
}
47+
48+
// create an iframe in the div and write the winning ad into it
49+
function renderOne(winningBid) {
50+
if (winningBid && winningBid.adId) {
51+
var div = document.getElementById(winningBid.adUnitCode);
52+
if (div) {
53+
const iframe = document.createElement('iframe');
54+
iframe.scrolling = 'no';
55+
iframe.frameBorder = '0';
56+
iframe.marginHeight = '0';
57+
iframe.marginHeight = '0';
58+
iframe.name = `prebid_ads_iframe_${winningBid.adUnitCode}`;
59+
iframe.title = '3rd party ad content';
60+
iframe.sandbox.add(
61+
'allow-forms',
62+
'allow-popups',
63+
'allow-popups-to-escape-sandbox',
64+
'allow-same-origin',
65+
'allow-scripts',
66+
'allow-top-navigation-by-user-activation'
67+
);
68+
iframe.setAttribute('aria-label', 'Advertisment');
69+
iframe.style.setProperty('border', '0');
70+
iframe.style.setProperty('margin', '0');
71+
iframe.style.setProperty('overflow', 'hidden');
72+
div.appendChild(iframe);
73+
const iframeDoc = iframe.contentWindow.document;
74+
pbjs.renderAd(iframeDoc, winningBid.adId);
75+
}
76+
}
77+
}
78+
79+
</script>
80+
<script>
81+
var pbjs = pbjs || {};
82+
pbjs.que = pbjs.que || [];
83+
84+
pbjs.que.push(function () {
85+
pbjs.setConfig({
86+
s2sConfig: [{
87+
accountId: '1',
88+
adapter: "prebidServer",
89+
enabled: true,
90+
endpoint: {
91+
noP1Consent: "http://localhost:8000/openrtb2/auction",
92+
p1Consent: 'http://localhost:8000/openrtb2/auction',
93+
},
94+
timeout: 1000,
95+
debug: true,
96+
allowUnknownBidderCodes: true
97+
}],
98+
})
99+
100+
pbjs.addAdUnits(adUnits);
101+
pbjs.requestBids({
102+
bidsBackHandler: renderAllAdUnits
103+
})
104+
});
105+
</script>
106+
107+
</head>
108+
109+
<body>
110+
<h1>001_banner</h1>
111+
<p class="description">
112+
This demo uses Prebid.js to interact with Prebid Server to fill the ad slot <strong>test-div-1</strong>
113+
The auction request to Prebid Server uses a stored request, which in turn links to a stored response.</br>
114+
Look for the <strong>/auction</strong> request in your browser's developer tool to inspect the request
115+
and response.
116+
</p>
117+
<h2>&#8595I am ad unit test-div-1 &#8595</h2>
118+
<div id="test-div-1">
119+
</div>
120+
</body>
121+
</html>

sample/001_banner/stored_request.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"id": "test-imp-id",
3+
"banner": {
4+
"format": [
5+
{
6+
"w": 300,
7+
"h": 250
8+
},
9+
{
10+
"w": 300,
11+
"h": 600
12+
}
13+
]
14+
},
15+
"ext": {
16+
"prebid": {
17+
"bidder": {
18+
"pubmatic": {
19+
"publisherId": "111111",
20+
"adSlot": "test"
21+
}
22+
},
23+
"storedbidresponse": [
24+
{ "bidder": "pubmatic", "id": "test-bid-id" }
25+
]
26+
}
27+
}
28+
}
+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"id": "test-auction-id",
3+
"seatbid": [
4+
{
5+
"bid": [
6+
{
7+
"id": "test-bid-id",
8+
"impid": "test-div-1",
9+
"price": 1,
10+
"adm": "<img src =\"http://files.prebid.org/creatives/prebid300x250.png\" />",
11+
"adomain": [
12+
"www.addomain.com"
13+
],
14+
"iurl": "http://localhost11",
15+
"crid": "creative111",
16+
"w": 300,
17+
"h": 250,
18+
"mtype": 1,
19+
"ext": {
20+
"bidtype": 0,
21+
"dspid": 6,
22+
"origbidcpm": 1,
23+
"origbidcur": "USD",
24+
"prebid": {
25+
"meta": {
26+
"adaptercode": "pubmatic"
27+
},
28+
"targeting": {
29+
"hb_bidder": "pubmatic",
30+
"hb_pb": "1.00",
31+
"hb_size": "300x250"
32+
},
33+
"type": "banner",
34+
"video": {
35+
"duration": 0,
36+
"primary_category": ""
37+
}
38+
}
39+
}
40+
}
41+
],
42+
"seat": "pubmatic"
43+
}
44+
],
45+
"cur": "USD"
46+
}

sample/README.md

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Sample
2+
3+
The Sample describes several demos of quickly spinning up different Prebid Server instances with various preset configurations. These samples are intended for audiences with little knowledge about Prebid Server and plan to play around with it locally and see how it works.
4+
5+
# Installation
6+
7+
In the Sample, we use `docker` and `docker-compose` to instantiate examples; with docker providing a unified setup and interface, you can spin up a demo server instance locally with only one command without knowing all the complexities.
8+
The docker image used in `docker-compose.yml` is the `Dockerfile` residing in the root level of the repository.
9+
10+
## Option 1 - Standard Docker Engine
11+
Install `docker` and `docker-compose` via the [official docker page](https://docs.docker.com/compose/install/#scenario-one-install-docker-desktop). If you cannot use the official docker engine due to restrictions of its license, see the option below about using Podman instead of Docker.
12+
13+
## Option 2 - Podman
14+
From MacOS, you can use [podman](https://podman.io/) with these additional steps:
15+
16+
```sh
17+
$ brew install podman docker-compose
18+
$ podman machine init
19+
$ podman machine set --rootful
20+
$ podman machine start
21+
```
22+
23+
# Examples
24+
25+
## Common File & Structures
26+
All required files for each example are stored in a folder that follows the name pattern <number>_<name>. The `<number>` suggests its order and `<name`>` describes its title.
27+
28+
The following files will be present for every example and are exclusively catered to that example.
29+
1. `app.yaml` - the prebid server app config.
30+
2. `pbjs.html` - the HTML file with `Prebid JS` integration and communicates with the Prebid Server. It also provides a detailed explanation of the example.
31+
3. `*.json` - additional files required to support the example. e.g. stored request and stored response.
32+
33+
## Common steps
34+
35+
```sh
36+
#1 - To get to the sample folder if you are on the root repository directory.
37+
$ cd sample
38+
39+
#2a - This command builds a new image, you should execute this command whenever the repository source code changes.
40+
$ docker-compose build
41+
42+
#2b - Optionally you could run `docker-compose build --no-cache` if you want to build an completely new image without using cache but results in slower time to build it.
43+
$ docker-compose build --no-cache
44+
45+
#3a - Spin up a corresponding sample in a container - see Steps for details
46+
$ docker-compose up <number>_<name>
47+
48+
#3b - Optionally you could use `--force-recreate` flag if you want to recreate the container every time you spin up the container.
49+
$ docker-compose up <number>_<name> --force-recreate
50+
```
51+
52+
### Detailed Steps
53+
1. To prevent `app.yaml` from being overwritten by other config files. Ensure that `pbs.yaml` or `pbs.json` config file **MUST NOT** be present in the root directory of the repository.
54+
55+
2. Bring up an instance by running `docker-compose up <number>_<name>` in the `sample` folder.
56+
57+
3. Wait patiently until you see ` Admin server starting on: :6060` and `Main server starting on: :8000` in the command line output. This marks the Prebid Server instance finishing its initialization and is ready to serve the auction traffic.
58+
59+
4. you can copy the URL `http://localhost:8000/status` and paste it into your browser. You should see `ok` in the response which is another way to tell the Prebid Server that the main auction server is up and running.
60+
61+
5. Open a new tab in your browser and turn on the console UI. If you are using Chrome, you can right-click on the page and click `inspect`. Once the console UI is on, click on the `Network` tab to inspect the traffic later.
62+
63+
6. Copy the URL `http://localhost:8000/static/pbjs.html?pbjs_debug=true` into your browser. It starts the example immediately with debugging information from `Prebid JS`, and you can inspect the request and response between `Prebid JS` and `Prebid Server`.
64+
65+
7. After playing with the example, type `docker-compose down`. This is to shut down the existing Sample so you can start the next one you want to select.

sample/docker-compose.yml

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
version: "3.9"
2+
services:
3+
001_banner:
4+
platform: linux/amd64
5+
build:
6+
context: ../
7+
dockerfile: Dockerfile
8+
args:
9+
- TEST=false
10+
image: pbs-sample
11+
container_name: 001_banner
12+
privileged: true
13+
ports:
14+
- "8000:8000"
15+
- "6060:6060"
16+
volumes:
17+
- ../sample/001_banner/app.yaml:/usr/local/bin/pbs.yaml
18+
- ../sample/001_banner/pbjs.html:/usr/local/bin/static/pbjs.html
19+
- ../sample/001_banner/stored_request.json:/usr/local/bin/stored_requests/data/by_id/stored_imps/test-imp-id.json
20+
- ../sample/001_banner/stored_response.json:/usr/local/bin/stored_responses/data/by_id/stored_responses/test-bid-id.json

0 commit comments

Comments
 (0)