-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
65 lines (48 loc) · 3.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ad Demo Page - RapidPrebidServer - s2s header bidding</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<span>Contact us via <a href="https://t.me/RapidCodeLab" target="_blank"/>Telegram</a> and <a href="https://discord.gg/nKdsZZGV" target="_blank"/>Discord</a></span>
<header>RapidPrebidServer - S2S Header Bidding - Ad Demo Page</header>
<span><a href="https://github.com/RapidCodeLab/rapid-prebid-server" target="_blank"/>RapidPrebidServer on GitHub</a></span>
<h3>Hey! What's going on here!?</h3>
<article>
This page is a demonstration of how <a href="https://github.com/RapidCodeLab/rapid-prebid-server"/>RapidPrebidServer</a> works.
<br/>
<br/>
<img src="images/header-bidding-demo.jpg" alt="RapidPrebidServer - s2s header bidding"/><br/>
From left to right on the image: <br/><br/>
<p>The webpage has ad placements known as Ad Entities. These entities appear as simple <cite>div</cite> elements with a <cite>data-entity-id</cite> attribute that includes the Ad Entity ID within the <a href="https://github.com/RapidCodeLab/rapid-prebid-server"/>RapidPrebidServer</a>.
</p>
<p>Once the page has loaded and the DOM is ready, the <a href="https://github.com/RapidCodeLab/ad-provider.js"/>ad-provider.js</a> script searches for all the ad placements present on the page and gathers their respective IDs into a singular array. After this step, the script sends an <cite>HTTP POST request</cite> with the collected IDs of ad objects to the <a href="https://github.com/RapidCodeLab/rapid-prebid-server"/>RapidPrebidServer</a>.
</p>
<p>
The <a href="https://github.com/RapidCodeLab/rapid-prebid-server"/>RapidPrebidServer</a> receives a request from <a href="https://github.com/RapidCodeLab/ad-provider.js"/>ad-provider.js</a> and creates an <cite>OpenRTB BidRequest</cite> object with <cite>Imp</cite> objects for each ad from the request. It then sends this request to all connected DSPs simultaneously via the <cite>OpenRTB</cite> protocol. After receiving all <cite>OpenRTB BidResponses</cite>, the server conducts an auction for each Ad Entity. The winning creatives are sent back to <cite>ad-provider.js</cite>, which then displays them on the page.
</p>
<p>
To optimize page load times, we use a <i class="red">single JS script and HTTP request</i> to RapidPrebidServer to serve <cite>all ad places</cite> on the page. This is in contrast to the classic method of using a separate JS script and request for each ad place.
</p>
</article>
<h3>The two <a href="https://github.com/RapidCodeLab/FakeDSP"/>demo fake DSPs</a> are responsible for serving the following ad places.</h3>
<h5>AdEntity #1: one banner 728x90</h5>
<div data-entity-id="40dc031a-5cf9-4d26-b72f-ebcf01c46c23"></div>
<h5>AdEntity #2: six native objects</h5>
<div class="ad-container" data-entity-id="40dc031a-5cf9-4d26-b72f-ebcf01c46c26">
<div class="ad-container-header">
<h2>Recomendation Widget: </h2>
<span>Sponsored By: <a href="" target="_blank">PrebidLab</a></span>
</div>
</div>
<h5>AdEntity #3: one banner 728x90</h5>
<div data-entity-id="40dc031a-5cf9-4d26-b72f-ebcf01c46c27"></div>
<br/><br/>
<span>Contact us via <a href="https://t.me/RapidCodeLab" target="_blank"/>Telegram</a> and <a href="https://discord.gg/nKdsZZGV" target="_blank"/>Discord</a></span>
<script type="text/javascript" src="demo.js"/></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>