diff --git a/examples/google-secure-signals-integration/react_client_side/public/images/favicon.png b/examples/google-secure-signals-integration/react_client_side/public/images/favicon.png new file mode 100644 index 00000000..48885e04 Binary files /dev/null and b/examples/google-secure-signals-integration/react_client_side/public/images/favicon.png differ diff --git a/examples/google-secure-signals-integration/react_client_side/public/index.html b/examples/google-secure-signals-integration/react_client_side/public/index.html index d6810538..f6a7a7e8 100644 --- a/examples/google-secure-signals-integration/react_client_side/public/index.html +++ b/examples/google-secure-signals-integration/react_client_side/public/index.html @@ -2,39 +2,23 @@ - + - - + + + + - UID2 Publisher Client-Server React Integration Example
- diff --git a/examples/google-secure-signals-integration/react_client_side/public/manifest.json b/examples/google-secure-signals-integration/react_client_side/public/manifest.json index 080d6c77..f9051fe7 100644 --- a/examples/google-secure-signals-integration/react_client_side/public/manifest.json +++ b/examples/google-secure-signals-integration/react_client_side/public/manifest.json @@ -1,23 +1,6 @@ { "short_name": "React App", "name": "Create React App Sample", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - }, - { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" - } - ], "start_url": ".", "display": "standalone", "theme_color": "#000000", diff --git a/examples/google-secure-signals-integration/react_client_side/src/scripts/ads.js b/examples/google-secure-signals-integration/react_client_side/public/scripts/ads.js similarity index 100% rename from examples/google-secure-signals-integration/react_client_side/src/scripts/ads.js rename to examples/google-secure-signals-integration/react_client_side/public/scripts/ads.js diff --git a/examples/google-secure-signals-integration/react_client_side/src/App.css b/examples/google-secure-signals-integration/react_client_side/src/App.css deleted file mode 100644 index 165d1b07..00000000 --- a/examples/google-secure-signals-integration/react_client_side/src/App.css +++ /dev/null @@ -1,106 +0,0 @@ -body { - padding: 50px; - font: 14px 'Lucida Grande', Helvetica, Arial, sans-serif; -} - -a { - color: #00b7ff; -} - -.button { - border-style: none; - cursor: pointer; - align-items: center; - height: 40px; - width: 401px; - text-align: center; - position: absolute; - letter-spacing: 0.28px; - box-sizing: border-box; - color: white; - font-family: 'Raleway', Helvetica, Arial, serif; - font-size: 14px; - font-style: normal; - font-weight: 700; - text-transform: none; - text-indent: 0px; - text-shadow: none; - margin: 0em; - padding: 1px 6px; - background-color: rgba(2, 10, 64, 1); - border-image: initial; -} - -.form { - margin-top: 40px; -} - -.email_prompt { - align-items: center; - align-self: center; - background-color: white; - border: 1px solid rgba(2, 10, 64, 1); - border-radius: 2px; - box-sizing: border-box; - display: inline-flex; - flex-direction: row; - flex-shrink: 0; - height: 40px; - justify-content: flex-start; - margin-right: 1px; - margin-bottom: 20px; - min-width: 399px; - padding: 0 16px; - position: relative; - width: auto; -} - -#email { - background-color: white; - flex-shrink: 0; - height: auto; - letter-spacing: 0.12px; - line-height: 16px; - min-height: 16px; - position: relative; - text-align: left; - white-space: nowrap; - width: 351px; - color: rgba(2, 10, 64, 1); - font-family: 'Raleway', Helvetica, Arial, serif; - font-size: 12px; - font-style: normal; - font-weight: 500; - padding: 1px 2px; - outline: none; -} - -h1 { - padding-bottom: 20px; -} - -#uid2_state { - margin-top: 30px; -} -#uid2_state .label { - white-space: nowrap; - padding-right: 20px; -} -#uid2_state tr { - margin-top: 10px; - font-size: 12px; -} - -.message { - color: green; - padding: 20px; - margin-left: -22px; - font-size: 16px; - font-weight: 500; - border: 2px solid green; - border-radius: 5px; -} - -.intro { - display: block; -} diff --git a/examples/google-secure-signals-integration/react_client_side/src/App.tsx b/examples/google-secure-signals-integration/react_client_side/src/App.tsx deleted file mode 100644 index ea5ed494..00000000 --- a/examples/google-secure-signals-integration/react_client_side/src/App.tsx +++ /dev/null @@ -1,235 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; - -import './styles/app.css'; -import './styles/ads.css'; - -interface global { - __uid2: any; -} - -const clientSideIdentityOptions = { - subscriptionId: 'toPh8vgJgt', - serverPublicKey: - 'UID2-X-I-MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEKAbPfOz7u25g1fL6riU7p2eeqhjmpALPeYoyjvZmZ1xM2NM8UeOmDZmCIBnKyRZ97pz5bMCjrs38WM22O7LJuw==', -}; - -const App = () => { - const [isLoggedIn, setIsLoggedIn] = useState(false); - const [secureSignalsLoaded, setSecureSignalsLoaded] = useState('no'); - const [secureSignalsValue, setSecureSignalsValue] = useState(''); - const [targetedAdvertisingReady, setTargetedAdvertisingReady] = useState('no'); - const [advertisingToken, setAdvertisingToken] = useState('undefined'); - const [loginRequired, setLoginRequired] = useState('yes'); - const [identityState, setIdentityState] = useState(''); - const [email, setEmail] = useState('test@example.com'); - - const videoRef = useRef(null); - - useEffect(() => { - // Load any necessary scripts here if needed - const loadScripts = () => { - const script1 = document.createElement('script'); - script1.src = 'https://cdn.integ.uidapi.com/uid2-sdk-3.9.0.js'; - script1.async = true; - document.body.appendChild(script1); - - const script2 = document.createElement('script'); - script2.src = 'https://cdn.integ.uidapi.com/uid2SecureSignal.js'; - script2.async = true; - document.body.appendChild(script2); - - // Ensure Secure Signals are loaded - script2.onload = () => setSecureSignalsLoaded('yes'); - }; - loadScripts(); - }, []); - - const handleLogin = () => { - //updateElements(); - setIsLoggedIn(true); - }; - - const handleLogout = () => { - //updateElements(); - setIsLoggedIn(false); - }; - - const handlePlay = () => { - // Handle play button functionality for video - // Use ref to play the video element - if (videoRef.current) { - videoRef.current.play(); - } - }; - - const handleEmailChange = (e: React.ChangeEvent) => { - setEmail(e.target.value); - }; - - const updateElements = (status) => { - if (__uid2.getAdvertisingToken()) { - setTargetedAdvertisingReady('yes'); - } else { - setTargetedAdvertisingReady('no'); - } - const token = __uid2.getAdvertisingToken(); - setAdvertisingToken(String(token)); - - if (!__uid2.isLoginRequired() || __uid2.isLoginRequired() === true) { - setLoginRequired('yes'); - } else { - setLoginRequired('no'); - } - - setIdentityState(String(JSON.stringify(status, null, 2))); - - const uid2LoginRequired = __uid2.isLoginRequired(); - if (uid2LoginRequired) { - setIsLoggedIn(false); - } else { - setIsLoggedIn(true); - } - - const secureSignalsStorage = localStorage['_GESPSK-uidapi.com']; - if (token && !secureSignalsStorage) { - //Token is valid but Secure Signals has not been refreshed. Reload the page. - location.reload(); - } - const secureSignalsStorageJson = secureSignalsStorage && JSON.parse(secureSignalsStorage); - if (secureSignalsStorageJson && secureSignalsStorageJson[1]) { - setSecureSignalsLoaded('yes'); - setSecureSignalsValue(JSON.stringify(secureSignalsStorageJson, null, 2)); - } else { - setSecureSignalsLoaded('no'); - setSecureSignalsValue('undefined'); - } - }; - - const isEnabled = (product) => { - return $(`#${product}_state th input`)[0].checked; - }; - - function onUid2IdentityUpdated(eventType, payload) { - console.log('UID2 Callback', payload); - // allow secure signals time to load - setTimeout(() => updateElements(payload), 1000); - } - - return ( -
-

- UID2 Publisher Client-Side Integration Example using UID2 JavaScript SDK, Secure Signals -

-

- This example demonstrates how a content publisher can follow the{' '} - - Client-Side Integration Guide for JavaScript - {' '} - to implement UID2 integration and generate UID2 tokens. Secure Signals is updated when the - page is reloaded. Reload the page in order to update Secure Signals in local storage. -

- -
-
- -
-
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- UID2 Enabled -
Ready for Targeted Advertising: - 
{targetedAdvertisingReady}
-
UID2 Advertising Token: - 
{advertisingToken}
-
Is UID2 Login Required? - 
{loginRequired}
-
UID2 Identity Callback State: - 
{identityState}
-
Secure Signals Loaded? - 
{secureSignalsLoaded ? 'Yes' : 'No'}
-
Secure Signals Value: - 
{secureSignalsValue}
-
-
- - {!isLoggedIn ? ( -
-
- -
-
- -
-
- ) : ( -
-
- -
-
- )} - - {/* Additional scripts that were originally loaded in the HTML */} - - - -
- ); -}; - -export default App; diff --git a/examples/google-secure-signals-integration/react_client_side/src/SecureSignalsApp.tsx b/examples/google-secure-signals-integration/react_client_side/src/SecureSignalsApp.tsx new file mode 100644 index 00000000..d995cbc0 --- /dev/null +++ b/examples/google-secure-signals-integration/react_client_side/src/SecureSignalsApp.tsx @@ -0,0 +1,408 @@ +import React, { useState, useEffect, useRef, useCallback } from 'react'; + +import './styles/app.css'; +import './styles/ads.css'; + +declare global { + interface Window { + __uid2: any; + getAdvertisingToken: any; + googletag: any; + } +} + +const clientSideIdentityOptions = { + subscriptionId: 'LBk2xJsgrS', + serverPublicKey: + 'UID2-X-L-MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEWyCP9O/6ppffj8f5PUWsEhAoMNdTBnpnkiOPZBkVnLkxOyTjPsKzf5J3ApPHzutAGNGgKAzFc6TuCfo+BWsZtQ==', +}; + +const SecureSignalsApp = () => { + const [isLoggedIn, setIsLoggedIn] = useState(false); + const [secureSignalsLoaded, setSecureSignalsLoaded] = useState(false); + const [secureSignalsValue, setSecureSignalsValue] = useState('undefined'); + const [targetedAdvertisingReady, setTargetedAdvertisingReady] = useState(false); + const [advertisingToken, setAdvertisingToken] = useState('undefined'); + const [loginRequired, setLoginRequired] = useState(true); + const [identityState, setIdentityState] = useState(''); + const [email, setEmail] = useState('test@example.com'); + const [identity, setIdentity] = useState(null); + const [isUid2Enabled, setIsUid2Enabled] = useState(true); + const [adsLoaded, setAdsLoaded] = useState(false); + + // useRef hook to directly access DOM elements on the page + const videoRef = useRef(null); + const videoElementRef = useRef(null); + const playButtonRef = useRef(null); + const adContainerRef = useRef(null); + + let adDisplayContainer; + let adsLoader; + let adsManager; + + const updateElements = (status) => { + if (window.__uid2.getAdvertisingToken()) { + setTargetedAdvertisingReady(true); + } else { + setTargetedAdvertisingReady(false); + } + setAdvertisingToken(String(window.__uid2.getAdvertisingToken())); + + if (window.__uid2.isLoginRequired() === true) { + setLoginRequired(true); + setIsLoggedIn(false); + } else { + setLoginRequired(false); + setIsLoggedIn(true); + } + + setIdentityState(String(JSON.stringify(status, null, 2))); + + // allow secure signals time to load + setTimeout(updateSecureSignals, 500); + }; + + const isEnabled = (product: string): boolean => { + if (product === 'uid2') { + return isUid2Enabled; + } + return false; + }; + + const onUid2IdentityUpdated = useCallback( + (eventType, payload) => { + console.log('UID2 Callback', payload); + updateElements(payload); + }, + [updateElements] + ); + + useEffect(() => { + // Add callbacks for UID2 JS SDK + window.__uid2.callbacks.push(onUid2IdentityUpdated); + window.__uid2.callbacks.push((eventType, payload) => { + let __uid2 = window.__uid2; + if (eventType === 'SdkLoaded') { + __uid2.init({ + baseUrl: 'http://localhost:8080', + }); + } + if (eventType === 'InitCompleted') { + if (__uid2.isLoginRequired()) { + __uid2.setIdentity(identity); + setIdentity(identity); + } + } + }); + + // initialize ads manager + let videoElement = videoElementRef.current!; + let playButton = playButtonRef.current!; + + initializeIMA(); + videoElement.addEventListener('play', function (event) { + loadAds(event); + }); + playButton.addEventListener('click', function (event) { + videoElement.play(); + }); + + // add event listener for resize + window.addEventListener('resize', function (event) { + console.log('window resized'); + if (adsManager) { + let width = videoElement.clientWidth; + let height = videoElement.clientHeight; + adsManager.resize(width, height, google.ima.ViewMode.NORMAL); + } + }); + }, []); + + function initializeIMA() { + console.log('initializing IMA'); + let adContainer = adContainerRef.current!; + let videoElement = videoElementRef.current!; + adContainer.addEventListener('click', adContainerClick); + adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement); + adsLoader = new google.ima.AdsLoader(adDisplayContainer); + adsLoader.addEventListener( + google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, + onAdsManagerLoaded, + false + ); + adsLoader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError, false); + + // Let the AdsLoader know when the video has ended + videoElement.addEventListener('ended', function () { + adsLoader.contentComplete(); + }); + + let adsRequest = new google.ima.AdsRequest(); + adsRequest.adTagUrl = + 'https://pubads.g.doubleclick.net/gampad/ads?' + + 'iu=/21775744923/external/single_ad_samples&sz=640x480&' + + 'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&' + + 'gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator='; + + // Specify the linear and nonlinear slot sizes. This helps the SDK to + // select the correct creative if multiple are returned. + adsRequest.linearAdSlotWidth = videoElement.clientWidth; + adsRequest.linearAdSlotHeight = videoElement.clientHeight; + adsRequest.nonLinearAdSlotWidth = videoElement.clientWidth; + adsRequest.nonLinearAdSlotHeight = videoElement.clientHeight / 3; + + // Pass the request to the adsLoader to request ads + adsLoader.requestAds(adsRequest); + } + + function loadAds(event) { + // Prevent this function from running on if there are already ads loaded + if (adsLoaded) { + return; + } + setAdsLoaded(true); + + // Prevent triggering immediate playback when ads are loading + event.preventDefault(); + + console.log('loading ads'); + + let videoElement = videoElementRef.current!; + + // Initialize the container. Must be done via a user action on mobile devices. + videoElement.load(); + adDisplayContainer.initialize(); + + let width = videoElement.clientWidth; + let height = videoElement.clientHeight; + try { + adsManager.init(width, height, google.ima.ViewMode.NORMAL); + adsManager.start(); + } catch (adError) { + // Play the video without ads, if an error occurs + console.log('AdsManager could not be started'); + videoElement.play(); + } + } + + function onAdsManagerLoaded(adsManagerLoadedEvent) { + // Instantiate the AdsManager from the adsLoader response and pass it the video element. + let videoElement = videoElementRef.current!; + adsManager = adsManagerLoadedEvent.getAdsManager(videoElement); + adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError); + adsManager.addEventListener( + google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, + onContentPauseRequested + ); + adsManager.addEventListener( + google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, + onContentResumeRequested + ); + adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, onAdLoaded); + } + + function onAdError(adErrorEvent) { + // Handle the error logging. + console.log(adErrorEvent.getError()); + if (adsManager) { + adsManager.destroy(); + } + } + + function onContentPauseRequested() { + videoElementRef.current!.pause(); + } + + function onContentResumeRequested() { + videoElementRef.current!.play(); + } + + function adContainerClick(event) { + console.log('ad container clicked'); + let videoElement = videoElementRef.current!; + if (videoElement.paused) { + videoElement.play(); + } else { + videoElement.pause(); + } + } + + function onAdLoaded(adEvent) { + let ad = adEvent.getAd(); + if (!ad.isLinear()) { + videoElementRef.current!.play(); + } + } + + const loadSecureSignals = () => { + const script2 = document.createElement('script'); + script2.src = 'https://cdn.integ.uidapi.com/uid2SecureSignal.js'; + script2.async = true; + script2.onload = () => { + console.log('secure signals script loaded'); + }; + document.body.append(script2); + }; + + const handleLogin = async () => { + window.googletag.secureSignalProviders.clearAllCache(); + + try { + if (isEnabled('uid2')) { + await window.__uid2.setIdentityFromEmail(email, clientSideIdentityOptions); + loadSecureSignals(); + } + } catch (e) { + console.error('setIdentityFromEmail failed', e); + } + }; + + const handleLogout = () => { + window.googletag.secureSignalProviders.clearAllCache(); + if (isEnabled('uid2')) { + window.__uid2.disconnect(); + } + }; + + const handlePlay = () => { + // Handle play button functionality for video + // Use ref to play the video element + videoRef.current!.play(); + }; + + const handleEmailChange = (e: React.ChangeEvent) => { + setEmail(e.target.value); + }; + + const updateSecureSignals = () => { + const secureSignalsStorage = localStorage['_GESPSK-uidapi.com']; + const secureSignalsStorageJson = secureSignalsStorage && JSON.parse(secureSignalsStorage); + if (secureSignalsStorageJson && secureSignalsStorageJson[1]) { + setSecureSignalsLoaded(true); + setSecureSignalsValue(JSON.stringify(secureSignalsStorageJson, null, 2)); + } else { + setSecureSignalsLoaded(false); + setSecureSignalsValue('undefined'); + } + }; + + const handleCheckboxChange = (e: React.ChangeEvent) => { + setIsUid2Enabled(e.target.checked); + }; + + return ( +
+

+ UID2 Publisher Client-Side Integration Example using UID2 JavaScript SDK, Secure Signals +

+

+ This example demonstrates how a content publisher can follow the{' '} + + Client-Side Integration Guide for JavaScript + {' '} + to implement UID2 integration and generate UID2 tokens. Secure Signals is updated when the + page is reloaded. Reload the page in order to update Secure Signals in local storage. +

+ +
+
+ +
+
+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ UID2 Enabled{' '} + +
Ready for Targeted Advertising: + 
{targetedAdvertisingReady ? 'yes' : 'no'}
+
UID2 Advertising Token: + 
{advertisingToken}
+
Is UID2 Login Required? + 
{loginRequired ? 'yes' : 'no'}
+
UID2 Identity Callback State: + 
{identityState}
+
Secure Signals Loaded? + 
{secureSignalsLoaded ? 'yes' : 'no'}
+
Secure Signals Value: + 
{secureSignalsValue}
+
+
+ + {!isLoggedIn ? ( +
+
+ +
+
+ +
+
+ ) : ( +
+
+ +
+
+ )} +
+ ); +}; + +export default SecureSignalsApp; diff --git a/examples/google-secure-signals-integration/react_client_side/src/google.d.ts b/examples/google-secure-signals-integration/react_client_side/src/google.d.ts new file mode 100644 index 00000000..81aa11ac --- /dev/null +++ b/examples/google-secure-signals-integration/react_client_side/src/google.d.ts @@ -0,0 +1,2 @@ +// src/google.d.ts +declare var google: any; diff --git a/examples/google-secure-signals-integration/react_client_side/src/index.js b/examples/google-secure-signals-integration/react_client_side/src/index.js index 6619e756..9e213c0a 100644 --- a/examples/google-secure-signals-integration/react_client_side/src/index.js +++ b/examples/google-secure-signals-integration/react_client_side/src/index.js @@ -1,11 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App.tsx'; +import './styles/index.css'; +import SecureSignalsApp from './SecureSignalsApp.tsx'; -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render( - - - -); +const rootElement = document.getElementById('root'); +const root = ReactDOM.createRoot(rootElement); +root.render(); diff --git a/examples/google-secure-signals-integration/react_client_side/src/logo.svg b/examples/google-secure-signals-integration/react_client_side/src/logo.svg deleted file mode 100644 index 9dfc1c05..00000000 --- a/examples/google-secure-signals-integration/react_client_side/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/examples/google-secure-signals-integration/react_client_side/src/scripts/scripts.js b/examples/google-secure-signals-integration/react_client_side/src/scripts/scripts.js deleted file mode 100644 index f4dd539d..00000000 --- a/examples/google-secure-signals-integration/react_client_side/src/scripts/scripts.js +++ /dev/null @@ -1,83 +0,0 @@ -const clientSideIdentityOptions = { - subscriptionId: 'toPh8vgJgt', - serverPublicKey: - 'UID2-X-I-MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEKAbPfOz7u25g1fL6riU7p2eeqhjmpALPeYoyjvZmZ1xM2NM8UeOmDZmCIBnKyRZ97pz5bMCjrs38WM22O7LJuw==', -}; - -function updateGuiElements(state) { - $('#targeted_advertising_ready').text(__uid2.getAdvertisingToken() ? 'yes' : 'no'); - const token = __uid2.getAdvertisingToken(); - $('#advertising_token').text(String(token)); - $('#login_required').text( - __uid2.isLoginRequired() || __uid2.isLoginRequired() === undefined ? 'yes' : 'no' - ); - $('#identity_state').text(String(JSON.stringify(state, null, 2))); - - const uid2LoginRequired = __uid2.isLoginRequired(); - if (uid2LoginRequired) { - $('#login_form').show(); - $('#logout_form').hide(); - } else { - $('#login_form').hide(); - $('#logout_form').show(); - } - - const secureSignalsStorage = localStorage['_GESPSK-uidapi.com']; - if (token && !secureSignalsStorage) { - //Token is valid but Secure Signals has not been refreshed. Reload the page. - location.reload(); - } - const secureSignalsStorageJson = secureSignalsStorage && JSON.parse(secureSignalsStorage); - if (secureSignalsStorageJson && secureSignalsStorageJson[1]) { - $('#secure_signals_loaded').text('yes'); - $('#secure_signals_value').text(JSON.stringify(secureSignalsStorageJson, null, 2)); - } else { - $('#secure_signals_loaded').text('no'); - $('#secure_signals_value').text('undefined'); - } -} - -function isEnabled(product) { - return $(`#${product}_state th input`)[0].checked; -} - -function onUid2IdentityUpdated(eventType, payload) { - console.log('UID2 Callback', payload); - // allow secure signals time to load - setTimeout(() => updateGuiElements(payload), 1000); -} - -function onDocumentReady() { - $('#logout').click(() => { - window.googletag.secureSignalProviders.clearAllCache(); - if (isEnabled('uid2')) { - __uid2.disconnect(); - } - }); - - $('#login').click(async () => { - window.googletag.secureSignalProviders.clearAllCache(); - const email = $('#email').val(); - - try { - if (isEnabled('uid2')) { - await __uid2.setIdentityFromEmail(email, clientSideIdentityOptions); - } - } catch (e) { - console.error('setIdentityFromEmail failed', e); - } - }); -} - -window.__uid2 = window.__uid2 || {}; -window.__uid2.callbacks = window.__uid2.callbacks || []; - -window.__uid2.callbacks.push(onUid2IdentityUpdated); -window.__uid2.callbacks.push((eventType, payload) => { - if (eventType === 'SdkLoaded') { - window.__uid2.init({ - baseUrl: 'https://operator-integ.uidapi.com', - }); - $(document).ready(onDocumentReady); - } -}); diff --git a/examples/google-secure-signals-integration/react_client_side/src/index.css b/examples/google-secure-signals-integration/react_client_side/src/styles/index.css similarity index 100% rename from examples/google-secure-signals-integration/react_client_side/src/index.css rename to examples/google-secure-signals-integration/react_client_side/src/styles/index.css diff --git a/examples/google-secure-signals-integration/react_client_side/views/index.tsx b/examples/google-secure-signals-integration/react_client_side/views/index.tsx deleted file mode 100644 index 244eb78a..00000000 --- a/examples/google-secure-signals-integration/react_client_side/views/index.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; - -const UID2PublisherIntegration = () => { - const [isLoggedIn, setIsLoggedIn] = useState(false); - const [secureSignalsLoaded, setSecureSignalsLoaded] = useState(false); - const [secureSignalsValue, setSecureSignalsValue] = useState(''); - const [targetedAdvertisingReady, setTargetedAdvertisingReady] = useState(''); - const [advertisingToken, setAdvertisingToken] = useState(''); - const [loginRequired, setLoginRequired] = useState(''); - const [identityState, setIdentityState] = useState(''); - - const videoRef = useRef(null); - - useEffect(() => { - // Load any necessary scripts here if needed - const loadScripts = () => { - const script1 = document.createElement('script'); - script1.src = 'https://cdn.integ.uidapi.com/uid2-sdk-3.9.0.js'; - script1.async = true; - document.body.appendChild(script1); - - const script2 = document.createElement('script'); - script2.src = 'https://cdn.integ.uidapi.com/uid2SecureSignal.js'; - script2.async = true; - document.body.appendChild(script2); - - // Ensure Secure Signals are loaded - script2.onload = () => setSecureSignalsLoaded(true); - }; - loadScripts(); - }, []); - - const handleLogin = () => { - // Handle login logic here (this is just a placeholder) - setIsLoggedIn(true); - }; - - const handleLogout = () => { - // Handle logout logic here (this is just a placeholder) - setIsLoggedIn(false); - }; - - const handlePlay = () => { - // Handle play button functionality for video - // Use ref to play the video element - if (videoRef.current) { - videoRef.current.play(); - } - }; - - return ( -
-

- UID2 Publisher Client-Side Integration Example using UID2 JavaScript SDK, Secure Signals -

-

- This example demonstrates how a content publisher can follow the - - Client-Side Integration Guide for JavaScript - - to implement UID2 integration and generate UID2 tokens. Secure Signals is updated when the - page is reloaded. Reload the page in order to update Secure Signals in local storage. -

- -
-
- -
-
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- UID2 Enabled -
Ready for Targeted Advertising: - 
{targetedAdvertisingReady}
-
UID2 Advertising Token: - 
{advertisingToken}
-
Is UID2 Login Required? - 
{loginRequired}
-
UID2 Identity Callback State: - 
{identityState}
-
Secure Signals Loaded? - 
{secureSignalsLoaded ? 'Yes' : 'No'}
-
Secure Signals Value: - 
{secureSignalsValue}
-
-
- - {!isLoggedIn ? ( -
-
- -
-
- -
-
- ) : ( -
-
- -
-
- )} - - {/* Additional scripts that were originally loaded in the HTML */} - - - -
- ); -}; - -export default UID2PublisherIntegration;