Skip to content

Update design for both react sites #135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eiman-eltigani-ttd merged 1 commit into from
Dec 4, 2025
Merged

Update design for both react sites #135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 195 additions & 73 deletions web-integrations/google-secure-signals/react-client-side/src/SecureSignalsApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const SecureSignalsApp = () => {

const onIdentityUpdated = useCallback(
(eventType, payload) => {
console.log(`${IDENTITY_NAME} Callback`, payload);
console.log(`${IDENTITY_NAME} Callback`, payload);
Copy link
Contributor

@ssundahlTTD ssundahlTTD Dec 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably don't need to keep the console.log in here.

updateElements(payload);
},
[updateElements]
Expand Down Expand Up @@ -307,119 +307,241 @@ const SecureSignalsApp = () => {
};

return (
<div>
<h1>
React Client-Side {IDENTITY_NAME} SDK Integration Example with Google Secure Signals
</h1>
<p>
This example demonstrates how a content publisher can follow the{' '}
<a href={`${DOCS_BASE_URL}/guides/integration-javascript-client-side`}>
Client-Side Integration Guide for JavaScript
</a>{' '}
to implement {IDENTITY_NAME} integration and generate {IDENTITY_NAME} tokens. Secure Signals is updated when the
page is reloaded. Reload the page in order to update Secure Signals in local storage.
</p>

<div id='page-content'>
<div id='video-container'>
<video id='video-element' ref={videoElementRef} onClick={handlePlay}>
<source src='https://storage.googleapis.com/interactive-media-ads/media/android.mp4' />
<source src='https://storage.googleapis.com/interactive-media-ads/media/android.webm' />
</video>
<div id='ad-container' ref={adContainerRef} onClick={handleAdContainerClick}></div>
<div className="page-wrapper">
<div className="main-content">
<h1>
React Client-Side {IDENTITY_NAME} SDK Integration Example with Google Secure Signals
</h1>
<p>
This example demonstrates how a content publisher can integrate {IDENTITY_NAME} with Google Secure Signals using client-side token generation with React, where the SDK generates tokens directly in the browser. 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>.
</p>

<div id='page-content'>
<div id='video-container'>
<video id='video-element' ref={videoElementRef} onClick={handlePlay}>
<source src='https://storage.googleapis.com/interactive-media-ads/media/android.mp4' />
<source src='https://storage.googleapis.com/interactive-media-ads/media/android.webm' />
</video>
<div id='ad-container' ref={adContainerRef} onClick={handleAdContainerClick}></div>
</div>
<button id='play-button' onClick={handlePlay}>
Play
</button>
</div>
<button id='play-button' onClick={handlePlay}>
Play
</button>
</div>

<div className='product-tables'>
<table id='uid2_state'>
<thead>
<tr>
<th>{IDENTITY_NAME} Status</th>
</tr>
</thead>
<h2>{IDENTITY_NAME} Integration Status</h2>
<table id='uid_state'>
<tbody>
<tr>
<td className='label'>Ready for Targeted Advertising:</td>
<td className='label'>
<div className="tooltip-wrapper">
Ready for Targeted Advertising:
<div className="tooltip">
<span className="tooltip-trigger">?</span>
<div className="tooltip-content">
Indicates whether a valid {IDENTITY_NAME} token is present and can be passed to Google Secure Signals for targeted advertising.
</div>
</div>
</div>
</td>
<td className='value'>
<pre>{targetedAdvertisingReady ? 'yes' : 'no'}</pre>
</td>
</tr>
<tr>
<td className='label'>{IDENTITY_NAME} Advertising Token:</td>
<td className='label'>
<div className="tooltip-wrapper">
Advertising Token:
<div className="tooltip">
<span className="tooltip-trigger">?</span>
<div className="tooltip-content">
The encrypted {IDENTITY_NAME} token passed to Google Secure Signals for advertising. It is automatically refreshed by the SDK in the background when expired.
</div>
</div>
</div>
</td>
<td className='value'>
<pre>{advertisingToken}</pre>
</td>
</tr>
<tr>
<td className='label'>Is {IDENTITY_NAME} Login Required?</td>
<td className='label'>
<div className="tooltip-wrapper">
Is Login Required?
<div className="tooltip">
<span className="tooltip-trigger">?</span>
<div className="tooltip-content">
Indicates whether a new {IDENTITY_NAME} token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
</div>
</div>
</div>
</td>
<td className='value'>
<pre>{loginRequired ? 'yes' : 'no'}</pre>
</td>
</tr>
<tr>
<td className='label'>{IDENTITY_NAME} Identity Callback State:</td>
<td className='label'>
<div className="tooltip-wrapper">
Has opted out?
<div className="tooltip">
<span className="tooltip-trigger">?</span>
<div className="tooltip-content">
Shows whether the user has exercised opt-out, in which case no advertising token may be generated or used.
</div>
</div>
</div>
</td>
<td className='value'>
<pre>{isOptedOut ? 'yes' : 'no'}</pre>
</td>
</tr>
<tr>
<td className='label'>
<div className="tooltip-wrapper">
Identity Callback State:
<div className="tooltip">
<span className="tooltip-trigger">?</span>
<div className="tooltip-content">
The complete identity object returned by the SDK. Contains the full {IDENTITY_NAME} identity data including refresh tokens and metadata.
</div>
</div>
</div>
</td>
<td className='value'>
<pre>{identityState}</pre>
</td>
</tr>
<tr>
<td className='label'>Secure Signals Loaded?</td>
<td className='label'>
<div className="tooltip-wrapper">
Secure Signals Loaded?
<div className="tooltip">
<span className="tooltip-trigger">?</span>
<div className="tooltip-content">
Indicates whether Google Secure Signals has successfully loaded and cached the {IDENTITY_NAME} token.
</div>
</div>
</div>
</td>
<td className='value'>
<pre>{secureSignalsLoaded ? 'yes' : 'no'}</pre>
</td>
</tr>
<tr>
<td className='label'>Secure Signals Value:</td>
<td className='label'>
<div className="tooltip-wrapper">
Secure Signals Value:
<div className="tooltip">
<span className="tooltip-trigger">?</span>
<div className="tooltip-content">
The {IDENTITY_NAME} data stored by Google Secure Signals in local storage for use in ad requests.
</div>
</div>
</div>
</td>
<td className='value'>
<pre>{secureSignalsValue}</pre>
</td>
</tr>
</tbody>
</table>
</div>

{isOptedOut ? (
<>
<div id='optout_banner' style={{ border: '3px solid #ffc107', padding: '15px', margin: '20px 0' }}>
<p style={{ margin: 0 }}>The email address you entered has opted out of {IDENTITY_NAME}.</p>
{isOptedOut ? (
<>
<div id='optout_banner' style={{ border: '3px solid #ffc107', padding: '15px', margin: '20px 0' }}>
<p style={{ margin: 0 }}>The email address you entered has opted out of {IDENTITY_NAME}.</p>
</div>
<div id='optout_message' className='form'>
<button type='button' className='button' onClick={handleTryAnother}>
Try Another Email
</button>
</div>
</>
) : !isLoggedIn ? (
<div id='login_form' className='form'>
<div className='email_prompt'>
<input
type='text'
id='email'
name='email'
placeholder='Enter an email address'
value={email}
onChange={handleEmailChange}
/>
<button type='button' className='button' onClick={handleLogin}>
Generate {IDENTITY_NAME}
</button>
</div>
</div>
<div id='optout_message' className='form'>
<button type='button' className='button' onClick={handleTryAnother}>
Try Another Email
</button>
</div>
</>
) : !isLoggedIn ? (
<div id='login_form' className='form'>
<div className='email_prompt'>
<input
type='text'
id='email'
name='email'
placeholder='Enter an email address'
style={{ borderStyle: 'none' }}
value={email}
onChange={handleEmailChange}
/>
</div>
<div>
<button type='button' className='button' onClick={handleLogin}>
Generate {IDENTITY_NAME}
) : (
<div id='logout_form' className='form'>
<button type='button' className='button' onClick={handleLogout}>
Clear {IDENTITY_NAME}
</button>
</div>
)}
</div>

<aside className="sidebar">
<h3>📋 How to Test</h3>

<div className="section">
<h4>Step 1: Generate {IDENTITY_NAME}</h4>
<ul>
<li>Enter an email address in the input field</li>
<li>Click "Generate {IDENTITY_NAME}" button</li>
<li>The SDK will initialize and request a token</li>
</ul>
</div>
) : (
<div id='logout_form' className='form'>
<form>
<button type='button' className='button' onClick={handleLogout}>
Clear {IDENTITY_NAME}
</button>
</form>

<div className="section">
<h4>Step 2: View Video Ad</h4>
<ul>
<li>Click the "Play" button to start the video</li>
<li>Google Secure Signals will use the {IDENTITY_NAME} token</li>
<li>Observe ad targeting with {IDENTITY_NAME}</li>
</ul>
</div>

<div className="section">
<h4>Step 3: Verify Secure Signals</h4>
<ul>
<li>Check "Secure Signals Loaded?" changes to "yes"</li>
<li>View the Secure Signals value in the table</li>
<li>Token is stored in localStorage for ad requests</li>
</ul>
</div>

<div className="section">
<h4>Step 4: Test Opt-Out</h4>
<ul>
<li>Clear {IDENTITY_NAME}, then try: <strong>[email protected]</strong></li>
<li>Observe "Has opted out?" changes to "yes"</li>
<li>No advertising token or Secure Signals are generated</li>
</ul>
</div>

<div className="section">
<h4>What's Happening?</h4>
<ul>
<li><strong>Client-Side Token Generation:</strong> The SDK generates tokens directly in the browser using your public credentials</li>
<li><strong>Secure Signals Integration:</strong> Google Secure Signals automatically retrieves and caches the {IDENTITY_NAME} token</li>
<li><strong>Local Storage:</strong> Both SDK identity and Secure Signals data are stored in localStorage for persistence</li>
</ul>
</div>

<div className="note">
<strong>Note:</strong> This is a test-only environment. Do not use real user data.
</div>
)}
</aside>
</div>
);
};
Expand Down
Loading