seperate table and data for uid2 and google secure information

Author: eiman-eltigani-ttd

web-integrations/google-secure-signals/server-side/public/stylesheets/app.css

@@ -128,6 +128,10 @@ h2 {
   border-bottom: 3px solid var(--primary-orange);
 }
 
+h2.section-teal {
+  border-bottom-color: var(--accent-teal);
+}
+
 p {
   font-size: 0.95rem;
   color: var(--text-gray);
@@ -146,8 +150,9 @@ a:hover {
   opacity: 0.8;
 }
 
-/* State Table */
-#uid_state {
+/* State Tables */
+#uid_state,
+#secure_signals_state {
   width: 100%;
   border-collapse: collapse;
   margin: 2rem 0;
@@ -158,19 +163,23 @@ a:hover {
   position: relative;
 }
 
-#uid_state tr {
+#uid_state tr,
+#secure_signals_state tr {
   border-bottom: 1px solid var(--border-color);
 }
 
-#uid_state tr:nth-child(even) {
+#uid_state tr:nth-child(even),
+#secure_signals_state tr:nth-child(even) {
   background-color: var(--bg-light);
 }
 
-#uid_state tr:last-child {
+#uid_state tr:last-child,
+#secure_signals_state tr:last-child {
   border-bottom: none;
 }
 
-#uid_state td {
+#uid_state td,
+#secure_signals_state td {
   padding: 1rem;
   vertical-align: top;
 }
@@ -336,7 +345,7 @@ a:hover {
 
 /* Video Container Styling */
 #googleAdContainer {
-  margin-bottom: 2rem;
+  margin-top: 2rem;
 }
 
 @media (max-width: 1024px) {

web-integrations/google-secure-signals/server-side/public/stylesheets/style.css

@@ -22,17 +22,15 @@
 #playButton {
   margin-top: 10px;
   vertical-align: top;
-  width: 350px;
-  height: 60px;
-  padding: 0;
-  font-size: 22px;
+  width: 100px;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 600;
   color: white;
   text-align: center;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
   background: #2c3e50;
   border: 0;
-  border-bottom: 2px solid #22303f;
+  border-radius: 6px;
   cursor: pointer;
-  -webkit-box-shadow: inset 0 -2px #22303f;
-  box-shadow: inset 0 -2px #22303f;
 }

web-integrations/google-secure-signals/server-side/views/index.html

@@ -11,19 +11,18 @@
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
 
     <script type="text/javascript">
-      const getAdvertisingToken = async () => {
+      const getUid2AdvertisingToken = async () => {
         const response = await fetch('/getFreshToken');
         const result = await response.json();
         console.log(result);
         return result.advertising_token;
       };
 
-      window.getAdvertisingToken = getAdvertisingToken;
+      window.getUid2AdvertisingToken = getUid2AdvertisingToken;
 
-      // If secureSignalProvider is initialized before getAdvertisingToken is assigned, call registerSecureSignalProvider
-      const providerName = '__' + '<%- identityName %>'.toLowerCase() + 'SecureSignalProvider';
-      if (window[providerName]) {
-        window[providerName].registerSecureSignalProvider();
+      // If uid2SecureSignalProvider is initialized before getUid2AdvertisingToken is assigned, call registerSecureSignalProvider
+      if (window.__uid2SecureSignalProvider) {
+        window.__uid2SecureSignalProvider.registerSecureSignalProvider();
       }
     </script>
     <script>
@@ -80,22 +79,33 @@ <h1>Server-Side <%- identityName %> Integration Example with Google Secure Signa
           [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/google-secure-signals/server-side">Source Code</a>]
         </p>
 
-        <% if (identity) { %>
-        <div id="googleAdContainer">
-          <div id="mainContainer">
-            <div id="content">
-              <video id="contentElement">
-                <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
-              </video>
+        <!-- Generate/Clear buttons at the top for easy access -->
+        <% if (!identity && !isOptout) { %>
+        <div id="login_form" class="form" style="margin-top: 0; margin-bottom: 2rem;">
+          <form action="/login" method="POST">
+            <div class="form-inline">
+              <input
+                type="text"
+                id="email"
+                name="email"
+                placeholder="Enter an email address"
+                class="email-input"
+              />
+              <input type="submit" value="Generate <%- identityName %>" class="button" />
             </div>
-            <div id="adContainer"></div>
-          </div>
-          <button id="playButton">Play</button>
-          <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
-          <script type="text/javascript" src="ads.js"></script>
+          </form>
+        </div>
+        <% } else if (isOptout) { %>
+        <div id="optout_form" class="form" style="margin-top: 0; margin-bottom: 2rem;">
+          <button type="button" class="button" id="try_another">Try Another Email</button>
+        </div>
+        <% } else { %>
+        <div id="logout_form" class="form" style="margin-top: 0; margin-bottom: 2rem;">
+          <button type="button" class="button" id="logout">Clear <%- identityName %></button>
         </div>
         <% } %>
 
+        <!-- UID2 Integration Status Section -->
         <h2><%- identityName %> Integration Status</h2>
 
         <table id="uid_state">
@@ -169,6 +179,12 @@ <h2><%- identityName %> Integration Status</h2>
             </td>
             <td class="value"><pre><%= identity ? JSON.stringify(identity, null, 2) : 'null' %></pre></td>
           </tr>
+        </table>
+
+        <!-- Google Secure Signals Section -->
+        <h2 class="section-teal">Google Secure Signals Status</h2>
+
+        <table id="secure_signals_state">
           <tr>
             <td class="label">
               <div class="tooltip-wrapper">
@@ -181,7 +197,7 @@ <h2><%- identityName %> Integration Status</h2>
                 </div>
               </div>
             </td>
-            <td class="value"><pre id="secure_signals_loaded">checking...</pre></td>
+            <td class="value"><pre id="secure_signals_loaded">no</pre></td>
           </tr>
           <tr>
             <td class="label">
@@ -195,32 +211,24 @@ <h2><%- identityName %> Integration Status</h2>
                 </div>
               </div>
             </td>
-            <td class="value"><pre id="secure_signals_value">checking...</pre></td>
+            <td class="value"><pre id="secure_signals_value">undefined</pre></td>
           </tr>
         </table>
 
-        <% if (!identity && !isOptout) { %>
-        <div id="login_form" class="form">
-          <form action="/login" method="POST">
-            <div class="form-inline">
-              <input
-                type="text"
-                id="email"
-                name="email"
-                placeholder="Enter an email address"
-                class="email-input"
-              />
-              <input type="submit" value="Generate <%- identityName %>" class="button" />
+        <!-- Video Ad Container - at the bottom -->
+        <% if (identity) { %>
+        <div id="googleAdContainer">
+          <div id="mainContainer">
+            <div id="content">
+              <video id="contentElement">
+                <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
+              </video>
             </div>
-          </form>
-        </div>
-        <% } else if (isOptout) { %>
-        <div id="optout_form" class="form">
-          <button type="button" class="button" id="try_another">Try Another Email</button>
-        </div>
-        <% } else { %>
-        <div id="logout_form" class="form">
-          <button type="button" class="button" id="logout">Clear <%- identityName %></button>
+            <div id="adContainer"></div>
+          </div>
+          <button id="playButton">Play</button>
+          <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
+          <script type="text/javascript" src="ads.js"></script>
         </div>
         <% } %>
       </div>