From c05d412635911a7e1901f350e409755aa662c462 Mon Sep 17 00:00:00 2001 From: Pavel Sanicovich Date: Wed, 15 Nov 2023 06:17:09 +0300 Subject: [PATCH 1/2] before pull --- index.html | 101 ++--------------------------------------------------- style.css | 94 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 98 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index ae9a30a..70380a4 100644 --- a/index.html +++ b/index.html @@ -4,104 +4,9 @@ Ad Demo Page - RapidPrebidServer - s2s header bidding - - - - + + +
Ad Demo Page

banner

diff --git a/style.css b/style.css new file mode 100644 index 0000000..b8f2a84 --- /dev/null +++ b/style.css @@ -0,0 +1,94 @@ + + body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + margin: 0; + padding: 20px; + font-family: Arial, sans-serif; + } + + .ad-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + background-color:#ccc; + padding:0px 5px; + gap: 20px; + max-width: 90%; + width: 100%; + } + + .ad { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #f5f5f5; + border: 1px solid #ccc; + padding: 10px; + width: 220px; + min-height: 150px; + height:auto; + text-align: center; + } + .ad-container-header{ + flex: 0 0 100%; + font-size:1em; + border-bottom:1px solid #000; + background-color:#000; + color: #fff; + padding:10px 5px; + } + .ad-container-header > h2{ + display:inline; + margin:0.3em; + } + .ad-container-header > span{ + display:inline; + float:right; + } + .ad > a { + text-decoration: none; + color: #000; + } + + .ad > a:hover { + text-decoration: underline; + } + + .ad > a > div > img { + width: 100%; + height: auto; + } + + .ad > a > h3 { + font-size: 0.9em; + margin: 0; + padding: 0; + } + + .ad > a > p { + font-size: 0.7em;; + margin: 5px 0 0; + padding: 0; + } + + .banner-ad { + height: 200px; + background: lightblue; + } + + .video-ad { + height: 250px; + background: lightgreen; + margin-top: 20px; + } + + .audio-ad { + height: 100px; + background: lightyellow; + margin-top: 20px; + } From c9a497cb76d23e33e74e064b66cdfc7a7c34a6ee Mon Sep 17 00:00:00 2001 From: Pavel Sanicovich Date: Wed, 15 Nov 2023 06:51:05 +0300 Subject: [PATCH 2/2] text correction --- index.html | 24 ++++++++++++++---------- style.css | 27 ++++++++++++++++++++------- 2 files changed, 34 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index eaea668..893b2a3 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Ad Demo Page - RapidPrebidServer - s2s header bidding - + @@ -14,26 +14,31 @@

Hey! What's going on here!?

- On this page, we demonstrate how RapidPrebidServer works.

+ This page is a demonstration of how RapidPrebidServer works. +
+
RapidPrebidServer - s2s header bidding
- From left to right on image:

+ From left to right on the image:

-

The web page contains ad placements aka Ad Entity. Entity looks like simple div element with attribute data-entity-id that contains Ad Entity id inside RapidPrebidServer. +

The webpage has ad placements known as Ad Entities. These entities appear as simple div elements with a data-entity-id attribute that includes the Ad Entity ID within the RapidPrebidServer.

+

Once the page has loaded and the DOM is ready, the ad-provider.js 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 HTTP POST request with the collected IDs of ad objects to the RapidPrebidServer. +

+

- When the page loads and the DOM is ready, the ad-provider.js will find all the ad placements on the page and collect their ids into one array. After that, the script sends an http POST request with the collected IDs of ad objects to the RapidPrebidServer. + The RapidPrebidServer receives a request from ad-provider.js and creates an OpenRTB BidRequest object with Imp objects for each ad from the request. It then sends this request to all connected DSPs simultaneously via the OpenRTB protocol. After receiving all OpenRTB BidResponses, the server conducts an auction for each Ad Entity. The winning creatives are sent back to ad-provider.js, which then displays them on the page.

-

The RapidPrebidServer receives a request from the ad-provider.js, creates a OpenRTB BidRequest object containing Imp objects for each ad object from the request. The RapidPrebidServer sends a OpenRTB BidRequest to all connected DSPs simultaneously via the OpenRTB protocol. After receiving a OpenRTB BidResonse from all DSPs, the server conducts an auction for each Ad Entity. The winner creatives are sent back to the ad-provider.js. The ad-provider.js displays creatives on the page.

-

For servicing all ad places on page, we include only one js-script and provide only one http request to RapidPrebidServer. It dramatically decreases page load times, opposite classic way, when for each ad place includes one js scripts and make one request. + +

+ To optimize page load times, we use a single JS script and HTTP request to RapidPrebidServer to serve all ad places on the page. This is in contrast to the classic method of using a separate JS script and request for each ad place.

-

The following ad places served by two demo fake DSPs

+

The two demo fake DSPs are responsible for serving the following ad places.

AdEntity #1: one banner 728x90
->>>>>>> refs/remotes/origin/main
@@ -54,7 +59,6 @@
AdEntity #3: one banner 728x90


Contact us via Telegram and Discord - diff --git a/style.css b/style.css index b8f2a84..0e01f27 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,26 @@ - - body { + body { display: flex; flex-direction: column; align-items: center; justify-content: center; - min-height: 100vh; margin: 0; padding: 20px; - font-family: Arial, sans-serif; + font: small-caps 400 17px monospace; } + header{ + font-size:1.4em; + } + article{ + max-width:900px; + text-align:center; + } + h5, .red{ + color:red; + } + cite{ + color: green; + } .ad-container { display: flex; flex-wrap: wrap; @@ -19,6 +30,7 @@ gap: 20px; max-width: 90%; width: 100%; + font: 12px courier; } .ad { @@ -61,7 +73,8 @@ .ad > a > div > img { width: 100%; - height: auto; + height: 220px; + object-fit:cover; } .ad > a > h3 { @@ -74,7 +87,7 @@ font-size: 0.7em;; margin: 5px 0 0; padding: 0; - } + } .banner-ad { height: 200px; @@ -91,4 +104,4 @@ height: 100px; background: lightyellow; margin-top: 20px; - } + } w