Skip to content

Commit 3d48ce9

Browse files
eiman-eltigani-ttdeiman-eltigani-ttd
committed
seperate tables for google secure signal and prebid
1 parent 8d15659 commit 3d48ce9

File tree

16 files changed

+1288
-519
lines changed

16 files changed

+1288
-519
lines changed

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

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -128,13 +128,26 @@ h2 {
128128
border-bottom: 3px solid var(--primary-orange);
129129
}
130130

131+
/* Teal section header for Google Secure Signals */
132+
h2.section-teal {
133+
border-bottom: 3px solid var(--accent-teal);
134+
}
135+
131136
p {
132137
font-size: 0.95rem;
133-
color: var(--text-gray);
138+
color: var(--text-dark);
134139
margin-bottom: 2rem;
135140
line-height: 1.8;
136141
}
137142

143+
/* Section summary - same styling as intro but gray */
144+
p.section-summary {
145+
font-size: 0.95rem;
146+
color: var(--text-gray);
147+
margin-bottom: 1rem;
148+
line-height: 1.8;
149+
}
150+
138151
a {
139152
color: var(--link-color);
140153
text-decoration: underline;
@@ -146,32 +159,36 @@ a:hover {
146159
opacity: 0.8;
147160
}
148161

149-
/* State Table */
150-
#uid_state {
162+
/* State Tables */
163+
#uid_state,
164+
#secure_signals_state {
151165
width: 100%;
152166
border-collapse: collapse;
153167
margin: 2rem 0;
154168
font-size: 0.875rem;
155169
border: 1px solid var(--border-color);
156170
border-radius: 8px;
157-
overflow: hidden;
158-
position: relative;
159171
overflow: visible;
172+
position: relative;
160173
}
161174

162-
#uid_state tr {
175+
#uid_state tr,
176+
#secure_signals_state tr {
163177
border-bottom: 1px solid var(--border-color);
164178
}
165179

166-
#uid_state tr:nth-child(even) {
180+
#uid_state tr:nth-child(even),
181+
#secure_signals_state tr:nth-child(even) {
167182
background-color: var(--bg-light);
168183
}
169184

170-
#uid_state tr:last-child {
185+
#uid_state tr:last-child,
186+
#secure_signals_state tr:last-child {
171187
border-bottom: none;
172188
}
173189

174-
#uid_state td {
190+
#uid_state td,
191+
#secure_signals_state td {
175192
padding: 1rem;
176193
vertical-align: top;
177194
}
@@ -200,6 +217,11 @@ a:hover {
200217
margin-top: 2rem;
201218
}
202219

220+
.form.top-form {
221+
margin-top: 0;
222+
margin-bottom: 2rem;
223+
}
224+
203225
.form-inline {
204226
display: flex;
205227
gap: 0;
@@ -260,6 +282,21 @@ a:hover {
260282
border-radius: 8px;
261283
}
262284

285+
/* Opt-out banner */
286+
.optout-banner {
287+
background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
288+
border-left: 4px solid var(--accent-yellow);
289+
padding: 1rem 1.25rem;
290+
margin: 1rem 0 2rem 0;
291+
border-radius: 6px;
292+
}
293+
294+
.optout-banner p {
295+
margin: 0;
296+
color: var(--text-dark);
297+
font-weight: 500;
298+
}
299+
263300
/* Tooltip Styles - Matching Self-Serve Portal */
264301
.tooltip-wrapper {
265302
display: inline-flex;
@@ -338,7 +375,7 @@ a:hover {
338375
@media (max-width: 1024px) {
339376
.page-wrapper {
340377
flex-direction: column;
341-
}
378+
}
342379

343380
.sidebar {
344381
position: static;
@@ -360,7 +397,7 @@ a:hover {
360397
.email-input {
361398
border-right: 2px solid var(--border-color);
362399
border-bottom: none;
363-
}
400+
}
364401

365402
.button {
366403
width: 100%;

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,19 @@
2020
}
2121

2222
#playButton {
23-
margin-top: 10px;
24-
vertical-align: top;
25-
width: 350px;
26-
height: 60px;
27-
padding: 0;
28-
font-size: 22px;
23+
width: 100px;
24+
height: 36px;
25+
margin-top: 0.5rem;
26+
background: var(--button-navy, rgba(2, 10, 64, 1));
2927
color: white;
30-
text-align: center;
31-
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
32-
background: #2c3e50;
33-
border: 0;
34-
border-bottom: 2px solid #22303f;
28+
border: none;
29+
border-radius: 6px;
30+
font-size: 0.9rem;
31+
font-weight: 600;
3532
cursor: pointer;
36-
-webkit-box-shadow: inset 0 -2px #22303f;
37-
box-shadow: inset 0 -2px #22303f;
33+
transition: all 0.2s ease;
34+
}
35+
36+
#playButton:hover {
37+
background: var(--button-navy-hover, rgba(2, 10, 64, 0.9));
3838
}

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

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -138,20 +138,35 @@
138138
<div class="main-content">
139139
<%- include('intro.html'); -%>
140140

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>
141+
<!-- Generate/Clear buttons at the top for easy access -->
142+
<div id="login_form" style="display: none" class="form top-form">
143+
<form action="/login" method="POST">
144+
<div class="form-inline">
145+
<input
146+
type="text"
147+
id="email"
148+
name="email"
149+
placeholder="Enter an email address"
150+
class="email-input"
151+
/>
152+
<input type="submit" value="Generate <%- identityName %>" class="button" />
147153
</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>
154+
</form>
153155
</div>
154156

157+
<div id="logout_form" style="display: none" class="form top-form">
158+
<button type="button" class="button" id="logout">Clear <%- identityName %></button>
159+
</div>
160+
161+
<div id="optout_form" style="display: none" class="form top-form">
162+
<button type="button" class="button" id="try_another">Try Another Email</button>
163+
</div>
164+
165+
<div id="optout_banner" style="display: none" class="optout-banner">
166+
<p>The email address you entered has opted out of <%- identityName %>.</p>
167+
</div>
168+
169+
<!-- UID2 Integration Status Section -->
155170
<h2><%- identityName %> Integration Status</h2>
156171

157172
<table id="uid_state">
@@ -211,6 +226,13 @@ <h2><%- identityName %> Integration Status</h2>
211226
</td>
212227
<td class="value"><pre id="identity_state"></pre></td>
213228
</tr>
229+
</table>
230+
231+
<!-- Google Secure Signals Section -->
232+
<h2 class="section-teal">Google Secure Signals Status</h2>
233+
<p class="section-summary">The Secure Signals SDK reads the <%- identityName %> token from localStorage and encrypts it for Google Ad Manager.</p>
234+
235+
<table id="secure_signals_state">
214236
<tr>
215237
<td class="label">
216238
<div class="tooltip-wrapper">
@@ -241,31 +263,19 @@ <h2><%- identityName %> Integration Status</h2>
241263
</tr>
242264
</table>
243265

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" />
266+
<!-- Video Ad Container - at the bottom -->
267+
<div id="googleAdContainer" style="display: none">
268+
<div id="mainContainer">
269+
<div id="content">
270+
<video id="contentElement">
271+
<source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
272+
</video>
259273
</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>
274+
<div id="adContainer"></div>
275+
</div>
276+
<button id="playButton">Play</button>
277+
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
278+
<script type="text/javascript" src="ads.js"></script>
269279
</div>
270280
</div>
271281

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

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,33 @@
77
<link rel="stylesheet" type="text/css" href="/styles/app.css" />
88
<link rel="shortcut icon" href="images/favicon.png" />
99
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
10-
<script>
11-
12-
</script>
1310
</head>
1411
<body>
1512
<div class="page-wrapper">
1613
<!-- Main Content Area -->
1714
<div class="main-content">
1815
<h1>Client-Side ${IDENTITY_NAME} Integration with Google Secure Signals</h1>
1916
<p class="intro">
20-
This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Google Secure Signals</strong> for Google Ad Manager, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-javascript-client-side">Client-Side Integration Guide for JavaScript</a> and <a href="${DOCS_BASE_URL}/guides/integration-google-ss">Google Ad Manager Secure Signals Integration Guide</a>.
17+
This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Google Secure Signals</strong> for Google Ad Manager, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-javascript-client-side">Client-Side Integration Guide for JavaScript</a> and <a href="${DOCS_BASE_URL}/guides/integration-google-ss">Google Ad Manager Secure Signals Integration Guide</a>. [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/google-secure-signals/client-side">Source Code</a>]
2118
</p>
2219

20+
<!-- Generate/Clear buttons at the top for easy access -->
21+
<div id="login_form" style="display: none" class="form" style="margin-top: 0; margin-bottom: 2rem;">
22+
<div class="email_prompt">
23+
<input
24+
type="text"
25+
id="email"
26+
name="email"
27+
placeholder="Enter an email address"
28+
/>
29+
<button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
30+
</div>
31+
</div>
32+
<div id="logout_form" style="display: none" class="form top-form">
33+
<button type="button" class="button" id="logout">Clear ${IDENTITY_NAME}</button>
34+
</div>
35+
36+
<!-- UID2 Integration Status Section -->
2337
<h2>${IDENTITY_NAME} Integration Status</h2>
2438

2539
<table id="uid_state">
@@ -93,6 +107,13 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
93107
</td>
94108
<td class="value"><pre id="identity_state"></pre></td>
95109
</tr>
110+
</table>
111+
112+
<!-- Google Secure Signals Section -->
113+
<h2 class="section-teal">Google Secure Signals Status</h2>
114+
<p class="section-summary">The Secure Signals SDK reads the ${IDENTITY_NAME} token from localStorage and encrypts it for Google Ad Manager.</p>
115+
116+
<table id="secure_signals_state">
96117
<tr>
97118
<td class="label">
98119
<div class="tooltip-wrapper">
@@ -123,6 +144,7 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
123144
</tr>
124145
</table>
125146

147+
<!-- Video Ad Container - at the bottom -->
126148
<div id="page-content">
127149
<div id="video-container">
128150
<video id="video-element">
@@ -133,21 +155,6 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
133155
</div>
134156
<button id="play-button">Play</button>
135157
</div>
136-
137-
<div id="login_form" style="display: none" class="form">
138-
<div class="email_prompt">
139-
<input
140-
type="text"
141-
id="email"
142-
name="email"
143-
placeholder="Enter an email address"
144-
/>
145-
<button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
146-
</div>
147-
</div>
148-
<div id="logout_form" style="display: none" class="form">
149-
<button type="button" class="button" id="logout">Clear ${IDENTITY_NAME}</button>
150-
</div>
151158
</div>
152159

153160
<!-- Sidebar for Instructions -->

0 commit comments

Comments
 (0)