Improve protected audiences demos (#64)

Optable · Oct 23, 2023 · 73a7784 · 73a7784
1 parent 0623425
commit 73a7784
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 33 deletions.
diff --git a/demos/ads/protected-audience/ad.html.tpl b/demos/ads/protected-audience/ad.html.tpl
@@ -2,7 +2,7 @@
 <html>
   <head>
   </head>
-  <body>
+  <body style="margin: 0; padding: 0">
     <script>
       const params = new URLSearchParams(window.location.search);
 

diff --git a/demos/ads/protected-audience/advertiser.html.tpl b/demos/ads/protected-audience/advertiser.html.tpl
@@ -24,24 +24,10 @@
         <div class="twelve column">
           <h4>Join Ad Interest Group</h4>
         </div>
-      </div>
-      <div class="row">
-        <div class="twelve column">
-
-          <pre><code style="padding: 20px">const cookiesTransport = (new URLSearchParams(window.location.search)).get("cookies") === "yes"
-window.optable = window.optable || { cmd: [] };
-
-optable.cmd.push(() => {
-  optable.instance = new optable.SDK({
-    host: "${SANDBOX_HOST}",
-    initPassport: JSON.parse("${SANDBOX_INIT}"),
-    site: "web-sdk-demo",
-    insecure: ${SANDBOX_INSECURE},
-    cookies: cookiesTransport,
-  });
-
-  optable.instance.joinAdInterestGroup();
-})</code></pre>
+        <div class="row">
+          <div class="twelve column">
+            <button onclick="joinAdInterestGroup()">Join Ad Interest Group</button>
+          </div>
         </div>
       </div>
     </div>
@@ -50,6 +36,12 @@ optable.cmd.push(() => {
       const cookiesTransport = (new URLSearchParams(window.location.search)).get("cookies") === "yes"
       window.optable = window.optable || { cmd: [] };
 
+      function joinAdInterestGroup() {
+        optable.cmd.push(() => {
+          optable.instance.joinAdInterestGroup();
+        })
+      }
+
       optable.cmd.push(() => {
         optable.instance = new optable.SDK({
           host: "${SANDBOX_HOST}",
@@ -58,8 +50,6 @@ optable.cmd.push(() => {
           insecure: JSON.parse("${SANDBOX_INSECURE}"),
           cookies: cookiesTransport,
         });
-
-        optable.instance.joinAdInterestGroup();
       })
     </script>
   </body>

diff --git a/demos/ads/protected-audience/publisher.html.tpl b/demos/ads/protected-audience/publisher.html.tpl
@@ -24,26 +24,46 @@
         </div>
       </div>
       <div class="row">
-        <div class="twelve column">
-          <div id="adspot1">
-            <script>
+        <div class="twelve column" style="display: flex; flex-direction: column; gap: 30px">
+          <div id="medium" style="text-align: center; width: 300px; height: 250px; border: 1px dotted gray">
+            Medium Rectangle goes here
+          </div>
+          <div id="leaderboard" style="text-align: center; width: 728px; height: 90px; border: 1px dotted gray">
+            Leaderboard goes here
+          </div>
+
+          <div>
+            <button onclick="runAdAuction('medium')">Run Ad Auction for Medium Rectangle</button>
+            <button onclick="runAdAuction('leaderboard')">Run Ad Auction for Leaderboard</button>
+          </div>
+
+          <script>
+            function runAdAuction(spotID) {
+              const spot = document.getElementById(spotID);
+              const box = spot.getBoundingClientRect();
+              const width = Math.round(box.width) - 2;
+              const height = Math.round(box.height) - 2;
+
               navigator.runAdAuction({
                 seller: window.location.origin,
                 decisionLogicURL: window.location.origin + "/ads/protected-audience/decision-logic.js",
+                requestedSize: { width: width + "px", height: height + "px" },
                 interestGroupBuyers: ["https://${ADS_HOST}"],
                 resolveToConfig: true
               })
               .then(function(config) {
-                const adFrame = document.createElement("fencedframe")
-                adFrame.config = config
-                adFrame.style.width = "100%"
-                adFrame.style.height = "100%"
-                adFrame.style.border = "none"
-                adFrame.style.overflow = "hidden"
-                document.getElementById("adspot1").replaceChildren(adFrame)
+                if (config) {
+                  const adFrame = document.createElement("fencedframe")
+                  adFrame.config = config
+                  adFrame.style.border = "none"
+                  adFrame.style.overflow = "hidden"
+                  spot.replaceChildren(adFrame)
+                } else {
+                  alert("No ad returned or auction error.")
+                }
               })
-            </script>
-          </div>
+            }
+          </script>
         </div>
       </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ @@
     <html>
       <head>
       </head>
-      <body>
+      <body style="margin: 0; padding: 0">
         <script>
           const params = new URLSearchParams(window.location.search);
@@ Expand Down @@