Skip to content

Commit ffde949

Browse files
eiman-eltigani-ttdeiman-eltigani-ttd
committed
Merge main into branch, resolve conflicts keeping branch version
2 parents 3d48ce9 + b92ba10 commit ffde949

File tree

5 files changed

+561
-184
lines changed

5 files changed

+561
-184
lines changed

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "uid2-examples",
3-
"version": "0.2.58",
3+
"version": "0.2.60",
44
"private": true,
55
"description": "UID2 Integration Examples",
66
"license": "BSD-2-Clause"

‎web-integrations/google-secure-signals/react-client-side/src/SecureSignalsApp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ const SecureSignalsApp = () => {
114114

115115
const onIdentityUpdated = useCallback(
116116
(eventType, payload) => {
117-
console.log(`${IDENTITY_NAME} Callback`, payload);
117+
console.log(`${IDENTITY_NAME} Callback`, payload);
118118
updateElements(payload);
119119
},
120120
[updateElements]

‎web-integrations/javascript-sdk/react-client-side/src/ClientSideApp.tsx‎

Lines changed: 168 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ const ClientSideApp = () => {
4343
const [advertisingToken, setAdvertisingToken] = useState('undefined');
4444
const [loginRequired, setLoginRequired] = useState('yes');
4545
const [hasOptedOut, setHasOptedOut] = useState('no');
46-
const [updateCounter, setUpdateCounter] = useState(0);
4746
const [identityState, setIdentityState] = useState('');
4847
const [showLoginForm, setShowLoginForm] = useState(true);
4948

@@ -68,12 +67,6 @@ const ClientSideApp = () => {
6867
// Callback for identity updates
6968
const onIdentityUpdated = useCallback(
7069
(eventType: string, payload: any) => {
71-
if (
72-
payload?.identity &&
73-
(eventType === 'InitCompleted' || eventType === 'IdentityUpdated')
74-
) {
75-
setUpdateCounter((prev) => prev + 1);
76-
}
7770
updateGuiElements(payload);
7871
},
7972
[updateGuiElements]
@@ -110,89 +103,181 @@ const ClientSideApp = () => {
110103
};
111104

112105
return (
113-
<div>
114-
<h1>React Client-Side {IDENTITY_NAME} Integration Example using JavaScript SDK</h1>
115-
<p>
116-
This example demonstrates how a content publisher can follow the{' '}
117-
<a href={`${DOCS_BASE_URL}/guides/integration-javascript-client-side`}>
118-
Client-Side Integration Guide for JavaScript
119-
</a>{' '}
120-
to implement {IDENTITY_NAME} integration and generate {IDENTITY_NAME} tokens using React.{' '}
121-
<strong>Note:</strong> This is a <em>test-only</em> integration environment—not for production
122-
use. It does not perform real user authentication or generate production-level tokens. Do not
123-
use real user data on this page.
124-
</p>
125-
126-
<table id="uid2_state">
127-
<tbody>
128-
<tr>
129-
<td className="label">Ready for Targeted Advertising:</td>
130-
<td className="value">
131-
<pre>{targetedAdvertisingReady}</pre>
132-
</td>
133-
</tr>
134-
<tr>
135-
<td className="label">Advertising Token:</td>
136-
<td className="value">
137-
<pre>{advertisingToken}</pre>
138-
</td>
139-
</tr>
140-
<tr>
141-
<td className="label">Is Login Required?</td>
142-
<td className="value">
143-
<pre>{loginRequired}</pre>
144-
</td>
145-
</tr>
146-
<tr>
147-
<td className="label">Has opted out?</td>
148-
<td className="value">
149-
<pre>{hasOptedOut}</pre>
150-
</td>
151-
</tr>
152-
<tr>
153-
<td className="label">Identity Updated Counter:</td>
154-
<td className="value">
155-
<pre>{updateCounter}</pre>
156-
</td>
157-
</tr>
158-
<tr>
159-
<td className="label">Identity Callback State:</td>
160-
<td className="value">
161-
<pre>{identityState}</pre>
162-
</td>
163-
</tr>
164-
</tbody>
165-
</table>
166-
167-
{showLoginForm ? (
168-
<div id="login_form" className="form">
169-
<div className="email_prompt">
170-
<input
171-
type="text"
172-
id="email"
173-
name="email"
174-
placeholder="Enter an email address"
175-
style={{ borderStyle: 'none' }}
176-
value={email}
177-
onChange={(e) => setEmail(e.target.value)}
178-
/>
106+
<div className="page-wrapper">
107+
<div className="main-content">
108+
<h1>React Client-Side {IDENTITY_NAME} Integration Example using JavaScript SDK</h1>
109+
<p>
110+
This example demonstrates how a content publisher can integrate {IDENTITY_NAME} using client-side token generation with React, where the SDK generates tokens directly in the browser using public credentials. For documentation, see the{' '}
111+
<a href={`${DOCS_BASE_URL}/guides/integration-javascript-client-side`}>
112+
Client-Side Integration Guide for JavaScript
113+
</a>.
114+
</p>
115+
116+
<h2>{IDENTITY_NAME} Integration Status</h2>
117+
<table id="uid_state">
118+
<tbody>
119+
<tr>
120+
<td className="label">
121+
<div className="tooltip-wrapper">
122+
Ready for Targeted Advertising:
123+
<div className="tooltip">
124+
<span className="tooltip-trigger">?</span>
125+
<div className="tooltip-content">
126+
Indicates whether a valid {IDENTITY_NAME} token is present and can be used for personalized ad targeting.
127+
</div>
128+
</div>
129+
</div>
130+
</td>
131+
<td className="value">
132+
<pre>{targetedAdvertisingReady}</pre>
133+
</td>
134+
</tr>
135+
<tr>
136+
<td className="label">
137+
<div className="tooltip-wrapper">
138+
Advertising Token:
139+
<div className="tooltip">
140+
<span className="tooltip-trigger">?</span>
141+
<div className="tooltip-content">
142+
The encrypted {IDENTITY_NAME} token that is passed to ad systems without exposing raw user identity. It is automatically refreshed by the SDK in the background when expired.
143+
</div>
144+
</div>
145+
</div>
146+
</td>
147+
<td className="value">
148+
<pre>{advertisingToken}</pre>
149+
</td>
150+
</tr>
151+
<tr>
152+
<td className="label">
153+
<div className="tooltip-wrapper">
154+
Is Login Required?
155+
<div className="tooltip">
156+
<span className="tooltip-trigger">?</span>
157+
<div className="tooltip-content">
158+
Indicates whether a new {IDENTITY_NAME} token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
159+
</div>
160+
</div>
161+
</div>
162+
</td>
163+
<td className="value">
164+
<pre>{loginRequired}</pre>
165+
</td>
166+
</tr>
167+
<tr>
168+
<td className="label">
169+
<div className="tooltip-wrapper">
170+
Has opted out?
171+
<div className="tooltip">
172+
<span className="tooltip-trigger">?</span>
173+
<div className="tooltip-content">
174+
Shows whether the user has exercised opt-out, in which case no advertising token may be generated or used.
175+
</div>
176+
</div>
177+
</div>
178+
</td>
179+
<td className="value">
180+
<pre>{hasOptedOut}</pre>
181+
</td>
182+
</tr>
183+
<tr>
184+
<td className="label">
185+
<div className="tooltip-wrapper">
186+
Identity Callback State:
187+
<div className="tooltip">
188+
<span className="tooltip-trigger">?</span>
189+
<div className="tooltip-content">
190+
The complete identity object returned by the SDK. Contains the full {IDENTITY_NAME} identity data including refresh tokens and metadata.
191+
</div>
192+
</div>
193+
</div>
194+
</td>
195+
<td className="value">
196+
<pre>{identityState}</pre>
197+
</td>
198+
</tr>
199+
</tbody>
200+
</table>
201+
202+
{showLoginForm ? (
203+
<div id="login_form" className="form">
204+
<div className="email_prompt">
205+
<input
206+
type="text"
207+
id="email"
208+
name="email"
209+
placeholder="Enter an email address"
210+
value={email}
211+
onChange={(e) => setEmail(e.target.value)}
212+
/>
213+
<button type="button" className="button" onClick={handleLogin}>
214+
Generate {IDENTITY_NAME}
215+
</button>
216+
</div>
179217
</div>
180-
<div>
181-
<button type="button" className="button" onClick={handleLogin}>
182-
Generate {IDENTITY_NAME}
218+
) : (
219+
<div id="logout_form" className="form">
220+
<button type="button" className="button" onClick={handleLogout}>
221+
Clear {IDENTITY_NAME}
183222
</button>
184223
</div>
224+
)}
225+
</div>
226+
227+
<aside className="sidebar">
228+
<h3>📋 How to Test</h3>
229+
230+
<div className="section">
231+
<h4>Step 1: Generate {IDENTITY_NAME}</h4>
232+
<ul>
233+
<li>Enter an email address in the input field</li>
234+
<li>Click "Generate {IDENTITY_NAME}" button</li>
235+
<li>The SDK will initialize and request a token</li>
236+
</ul>
237+
</div>
238+
239+
<div className="section">
240+
<h4>Step 2: Observe Token State</h4>
241+
<ul>
242+
<li>Watch "Ready for Targeted Advertising" change to "yes"</li>
243+
<li>Check the advertising token appears in the table</li>
244+
<li>Note "Is Login Required?" becomes "no"</li>
245+
</ul>
246+
</div>
247+
248+
<div className="section">
249+
<h4>Step 3: Monitor Updates</h4>
250+
<ul>
251+
<li>Keep the page open to observe automatic token refreshes</li>
252+
<li>The SDK maintains the token in the background</li>
253+
<li>Identity state updates automatically as needed</li>
254+
</ul>
255+
</div>
256+
257+
<div className="section">
258+
<h4>Step 4: Test Opt-Out</h4>
259+
<ul>
260+
<li>Try the special email: <strong>[email protected]</strong></li>
261+
<li>Observe "Has opted out?" changes to "yes"</li>
262+
<li>No advertising token is generated</li>
263+
</ul>
185264
</div>
186-
) : (
187-
<div id="logout_form" className="form">
188-
<button type="button" className="button" onClick={handleLogout}>
189-
Clear {IDENTITY_NAME}
190-
</button>
265+
266+
<div className="section">
267+
<h4>What's Happening?</h4>
268+
<ul>
269+
<li><strong>Client-Side Token Generation:</strong> The SDK generates tokens directly in the browser using your public credentials</li>
270+
<li><strong>Auto-Refresh:</strong> Tokens are automatically refreshed by the SDK in the background when expired</li>
271+
<li><strong>Local Storage:</strong> The SDK stores identity in localStorage (__uid2_advertising_token or __euid_advertising_token) for persistence across page loads</li>
272+
</ul>
191273
</div>
192-
)}
274+
275+
<div className="note">
276+
<strong>Note:</strong> This is a test-only environment. Do not use real user data.
277+
</div>
278+
</aside>
193279
</div>
194280
);
195281
};
196282

197283
export default ClientSideApp;
198-

0 commit comments

Comments
 (0)