Skip to content

Commit b98d054

Browse files
eiman-eltigani-ttdeiman-eltigani-ttd
authored
Merge pull request #122 from IABTechLab/eee-UID2-5808-modernize-ui-client-server-sample-sites
Modernize UI for client-server sample sites
2 parents c938f88 + 4b41458 commit b98d054

File tree

9 files changed

+1580
-474
lines changed

9 files changed

+1580
-474
lines changed

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

Lines changed: 340 additions & 82 deletions
Large diffs are not rendered by default.

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

Lines changed: 188 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313

1414
<script>
1515
$(document).ready(() => {
16-
let callbackCounter = 0;
1716
const sdkName = '<%- uidJsSdkName %>';
1817
let sdk = window[sdkName];
1918
sdk = sdk || { callbacks: [] };
@@ -24,7 +23,6 @@
2423
);
2524
$("#advertising_token").html(String(sdk.getAdvertisingToken()));
2625
$("#login_required").html(sdk.isLoginRequired() ? "yes" : "no");
27-
$("#update_counter").html(callbackCounter);
2826
$("#identity_state").html(String(JSON.stringify(payload, null, 2)));
2927

3028
// Update Secure Signals values displayed in the GUI
@@ -86,12 +84,6 @@
8684
}
8785

8886
function onIdentityUpdated(eventType, payload) {
89-
if (
90-
payload?.identity &&
91-
(eventType === "InitCompleted" || eventType === "IdentityUpdated")
92-
) {
93-
++callbackCounter;
94-
}
9587
// Allow secure signals time to load
9688
setTimeout(() => updateGuiElements(payload), 1000);
9789
}
@@ -142,77 +134,197 @@
142134
</script>
143135
</head>
144136
<body>
145-
<%- include('intro.html'); -%>
146-
<p>
147-
<strong>Note:</strong> This is a <em>test-only</em> integration environment—not for production
148-
use. It does not perform real user authentication or generate production-level tokens. Do not
149-
use real user data on this page.
150-
</p>
151-
<div id="googleAdContainer" style="display: none">
152-
<div id="mainContainer">
153-
<div id="content">
154-
<video id="contentElement">
155-
<source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
156-
</video>
137+
<div class="page-wrapper">
138+
<div class="main-content">
139+
<%- include('intro.html'); -%>
140+
141+
<div id="googleAdContainer" style="display: none">
142+
<div id="mainContainer">
143+
<div id="content">
144+
<video id="contentElement">
145+
<source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
146+
</video>
147+
</div>
148+
<div id="adContainer"></div>
149+
</div>
150+
<button id="playButton">Play</button>
151+
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
152+
<script type="text/javascript" src="ads.js"></script>
153+
</div>
154+
155+
<h2><%- identityName %> Integration Status</h2>
156+
157+
<table id="uid_state">
158+
<tr>
159+
<td class="label">
160+
<div class="tooltip-wrapper">
161+
Ready for Targeted Advertising:
162+
<div class="tooltip">
163+
<span class="tooltip-trigger">?</span>
164+
<div class="tooltip-content">
165+
Indicates whether a valid <%- identityName %> token is present and can be used for personalized ad targeting.
166+
</div>
167+
</div>
168+
</div>
169+
</td>
170+
<td class="value"><pre id="targeted_advertising_ready"></pre></td>
171+
</tr>
172+
<tr>
173+
<td class="label">
174+
<div class="tooltip-wrapper">
175+
Advertising Token:
176+
<div class="tooltip">
177+
<span class="tooltip-trigger">?</span>
178+
<div class="tooltip-content">
179+
The encrypted <%- identityName %> token that is passed to ad systems without exposing raw user identity. It is automatically refreshed by the SDK in the background when expired.
180+
</div>
181+
</div>
182+
</div>
183+
</td>
184+
<td class="value"><pre id="advertising_token"></pre></td>
185+
</tr>
186+
<tr>
187+
<td class="label">
188+
<div class="tooltip-wrapper">
189+
Is Login Required?
190+
<div class="tooltip">
191+
<span class="tooltip-trigger">?</span>
192+
<div class="tooltip-content">
193+
Indicates whether a new <%- identityName %> token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
194+
</div>
195+
</div>
196+
</div>
197+
</td>
198+
<td class="value"><pre id="login_required"></pre></td>
199+
</tr>
200+
<tr>
201+
<td class="label">
202+
<div class="tooltip-wrapper">
203+
Identity Callback State:
204+
<div class="tooltip">
205+
<span class="tooltip-trigger">?</span>
206+
<div class="tooltip-content">
207+
The complete identity object returned by the SDK. Contains the full <%- identityName %> identity data including refresh tokens and metadata.
208+
</div>
209+
</div>
210+
</div>
211+
</td>
212+
<td class="value"><pre id="identity_state"></pre></td>
213+
</tr>
214+
<tr>
215+
<td class="label">
216+
<div class="tooltip-wrapper">
217+
Secure Signals Loaded?
218+
<div class="tooltip">
219+
<span class="tooltip-trigger">?</span>
220+
<div class="tooltip-content">
221+
Indicates whether Google Secure Signals has successfully loaded and stored the <%- identityName %> token. Returns "yes" when signals are available in localStorage.
222+
</div>
223+
</div>
224+
</div>
225+
</td>
226+
<td class="value"><pre id="secure_signals_loaded"></pre></td>
227+
</tr>
228+
<tr>
229+
<td class="label">
230+
<div class="tooltip-wrapper">
231+
Secure Signals Value:
232+
<div class="tooltip">
233+
<span class="tooltip-trigger">?</span>
234+
<div class="tooltip-content">
235+
The encrypted <%- identityName %> signals stored by Google in localStorage under the key '<%- secureSignalsStorageKey %>'. These signals are shared with Google Ad Manager.
236+
</div>
237+
</div>
238+
</div>
239+
</td>
240+
<td class="value"><pre id="secure_signals_value"></pre></td>
241+
</tr>
242+
</table>
243+
244+
<div id="optout_banner" style="display: none" class="optout-banner">
245+
<p>The email address you entered has opted out of <%- identityName %>.</p>
246+
</div>
247+
248+
<div id="login_form" style="display: none" class="form">
249+
<form action="/login" method="POST">
250+
<div class="form-inline">
251+
<input
252+
type="text"
253+
id="email"
254+
name="email"
255+
placeholder="Enter an email address"
256+
class="email-input"
257+
/>
258+
<input type="submit" value="Generate <%- identityName %>" class="button" />
259+
</div>
260+
</form>
261+
</div>
262+
263+
<div id="logout_form" style="display: none" class="form">
264+
<button type="button" class="button" id="logout">Clear <%- identityName %></button>
265+
</div>
266+
267+
<div id="optout_form" style="display: none" class="form">
268+
<button type="button" class="button" id="try_another">Try Another Email</button>
157269
</div>
158-
<div id="adContainer"></div>
159270
</div>
160-
<button id="playButton">Play</button>
161-
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
162-
<script type="text/javascript" src="ads.js"></script>
163-
</div>
164-
<table id="uid2_state">
165-
<tr>
166-
<td class="label">Ready for Targeted Advertising:</td>
167-
<td class="value"><pre id="targeted_advertising_ready"></pre></td>
168-
</tr>
169-
<tr>
170-
<td class="label"><%- identityName %> Advertising Token:</td>
171-
<td class="value"><pre id="advertising_token"></pre></td>
172-
</tr>
173-
<tr>
174-
<td class="label">Is <%- identityName %> Login Required?</td>
175-
<td class="value"><pre id="login_required"></pre></td>
176-
</tr>
177-
<tr>
178-
<td class="label"><%- identityName %> Identity Updated Counter:</td>
179-
<td class="value"><pre id="update_counter"></pre></td>
180-
</tr>
181-
<tr>
182-
<td class="label"><%- identityName %> Identity Callback State:</td>
183-
<td class="value"><pre id="identity_state"></pre></td>
184-
</tr>
185-
<tr>
186-
<td class="label">Secure Signals Loaded?</td>
187-
<td class="value"><pre id="secure_signals_loaded"></pre></td>
188-
</tr>
189-
<tr>
190-
<td class="label">Secure Signals Value:</td>
191-
<td class="value"><pre id="secure_signals_value"></pre></td>
192-
</tr>
193-
</table>
194-
<div id="optout_banner" style="display: none; border: 3px solid #ffc107; padding: 15px; margin: 20px 0;">
195-
<p style="margin: 0;">The email address you entered has opted out of <%- identityName %>.</p>
196-
</div>
197-
<div id="login_form" style="display: none" class="form">
198-
<form action="/login" method="POST">
199-
<div class="email_prompt">
200-
<input
201-
type="text"
202-
id="email"
203-
name="email"
204-
placeholder="Enter an email address"
205-
style="border-style: none"
206-
/>
271+
272+
<!-- Sidebar for Instructions -->
273+
<aside class="sidebar">
274+
<h3>📋 How to Test</h3>
275+
276+
<div class="section">
277+
<h4>Step 1: Generate <%- identityName %></h4>
278+
<ul>
279+
<li>Enter an email address in the input field</li>
280+
<li>Click "Generate <%- identityName %>" button</li>
281+
<li>The server generates a token and passes it to the SDK</li>
282+
</ul>
207283
</div>
208-
<div><input type="submit" value="Generate <%- identityName %>" class="button" /></div>
209-
</form>
210-
</div>
211-
<div id="logout_form" style="display: none" class="form">
212-
<button type="button" class="button" id="logout">Clear <%- identityName %></button>
213-
</div>
214-
<div id="optout_form" style="display: none" class="form">
215-
<button type="button" class="button" id="try_another">Try Another Email</button>
284+
285+
<div class="section">
286+
<h4>Step 2: View Video Ad</h4>
287+
<ul>
288+
<li>Video player appears after successful token generation</li>
289+
<li>Click "Play" to watch the ad</li>
290+
<li>Ad request includes <%- identityName %> token via Secure Signals</li>
291+
</ul>
292+
</div>
293+
294+
<div class="section">
295+
<h4>Step 3: Check Secure Signals</h4>
296+
<ul>
297+
<li>Verify "Secure Signals Loaded?" shows "yes"</li>
298+
<li>Check "Secure Signals Value" displays encrypted token data</li>
299+
<li>This confirms integration with Google Ad Manager</li>
300+
</ul>
301+
</div>
302+
303+
<div class="section">
304+
<h4>Step 4: Test Opt-Out</h4>
305+
<ul>
306+
<li>Clear your current identity with the button</li>
307+
<li>Try the special email: <strong>[email protected]</strong></li>
308+
<li>Observe the opt-out banner appears</li>
309+
<li>No token or Secure Signals are generated</li>
310+
</ul>
311+
</div>
312+
313+
<div class="section">
314+
<h4>What's Happening?</h4>
315+
<ul>
316+
<li><strong>Server-Side Token Generation:</strong> The server generates <%- identityName %> tokens using your API key and passes them to the SDK</li>
317+
<li><strong>Auto-Refresh:</strong> Tokens are automatically refreshed by the SDK in the background when expired</li>
318+
<li><strong>Local Storage:</strong> The SDK stores identity in localStorage (__uid2_advertising_token or __euid_advertising_token) for persistence across page loads</li>
319+
<li><strong>Google Secure Signals:</strong> Encrypted tokens are stored in localStorage under <%- secureSignalsStorageKey %> and shared with Google Ad Manager</li>
320+
<li><strong>IMA SDK:</strong> Displays video ads with <%- identityName %> targeting</li>
321+
</ul>
322+
</div>
323+
324+
<div class="note">
325+
<strong>Note:</strong> This is a test-only environment. Do not use real user data.
326+
</div>
327+
</aside>
216328
</div>
217329
</body>
218330
</html>

0 commit comments

Comments
 (0)