Skip to content

Commit ea36719

Browse files
ashleysmithTTDashleysmithTTD
committed
small changes to clean up app
1 parent 09235a9 commit ea36719

File tree

5 files changed

+173
-131
lines changed

5 files changed

+173
-131
lines changed

‎examples/google-secure-signals-integration/react_client_side/package.json‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,7 @@
2828
"react-app/jest"
2929
]
3030
},
31-
"browserslist": {
32-
"production": [
33-
">0.2%",
34-
"not dead",
35-
"not op_mini all"
36-
],
37-
"development": [
38-
"last 1 chrome version",
39-
"last 1 firefox version",
40-
"last 1 safari version"
41-
]
42-
}
31+
"browserslist": [
32+
"defaults"
33+
]
4334
}

‎examples/google-secure-signals-integration/react_client_side/public/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@
55
<link rel="shortcut icon" href="images/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<meta name="description" content="Web site created using create-react-app" />
98
<head>
10-
<script src="https://cdn.integ.uidapi.com/uid2-sdk-3.9.0.js"></script>
9+
<script src="https://cdn.integ.uidapi.com/uid2-sdk-3.10.0.js"></script>
1110
<script
1211
type="text/javascript"
1312
src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"

‎examples/google-secure-signals-integration/react_client_side/src/SecureSignalsApp.tsx‎

Lines changed: 111 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ declare global {
1212
}
1313

1414
const clientSideIdentityOptions = {
15-
subscriptionId: 'toPh8vgJgt',
15+
subscriptionId: 'LBk2xJsgrS',
1616
serverPublicKey:
17-
'UID2-X-I-MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEKAbPfOz7u25g1fL6riU7p2eeqhjmpALPeYoyjvZmZ1xM2NM8UeOmDZmCIBnKyRZ97pz5bMCjrs38WM22O7LJuw==',
17+
'UID2-X-L-MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEWyCP9O/6ppffj8f5PUWsEhAoMNdTBnpnkiOPZBkVnLkxOyTjPsKzf5J3ApPHzutAGNGgKAzFc6TuCfo+BWsZtQ==',
1818
};
1919

2020
const SecureSignalsApp = () => {
@@ -32,14 +32,12 @@ const SecureSignalsApp = () => {
3232

3333
// useRef hook to directly access DOM elements on the page
3434
const videoElementRef = useRef<HTMLVideoElement | null>(null);
35-
const playButtonRef = useRef<HTMLButtonElement | null>(null);
3635
const adContainerRef = useRef<HTMLDivElement | null>(null);
36+
const adDisplayContainerRef = useRef<google.ima.AdDisplayContainer | null>(null);
37+
const adsLoaderRef = useRef<google.ima.AdsLoader | null>(null);
38+
const adsManagerRef = useRef<google.ima.AdsManager | null>(null);
3739

38-
let adDisplayContainer;
39-
let adsLoader;
40-
let adsManager;
41-
42-
const updateElements = (status) => {
40+
const updateElements = useCallback((status) => {
4341
if (window.__uid2.getAdvertisingToken()) {
4442
setTargetedAdvertisingReady(true);
4543
} else {
@@ -59,7 +57,7 @@ const SecureSignalsApp = () => {
5957

6058
// allow secure signals time to load
6159
setTimeout(updateSecureSignals, 500);
62-
};
60+
}, []);
6361

6462
const isEnabled = (product: string): boolean => {
6563
if (product === 'uid2') {
@@ -76,54 +74,31 @@ const SecureSignalsApp = () => {
7674
[updateElements]
7775
);
7876

79-
useEffect(() => {
80-
// Add callbacks for UID2 JS SDK
81-
window.__uid2.callbacks.push(onUid2IdentityUpdated);
82-
window.__uid2.callbacks.push((eventType, payload) => {
83-
let __uid2 = window.__uid2;
84-
if (eventType === 'SdkLoaded') {
85-
__uid2.init({
86-
baseUrl: 'https://operator-integ.uidapi.com',
87-
});
88-
}
89-
if (eventType === 'InitCompleted') {
90-
if (__uid2.isLoginRequired()) {
91-
__uid2.setIdentity(identity);
92-
setIdentity(identity);
93-
}
94-
}
95-
});
96-
97-
// initialize ads manager
98-
let videoElement = videoElementRef.current!;
99-
let playButton = playButtonRef.current!;
100-
101-
initializeIMA();
102-
videoElement.addEventListener('play', function (event) {
103-
loadAds(event);
104-
});
105-
playButton.addEventListener('click', function (event) {
106-
videoElement.play();
107-
});
77+
const initializeIMA = useCallback(() => {
78+
console.log('initializing IMA');
10879

109-
// add event listener for resize
110-
window.addEventListener('resize', function (event) {
111-
console.log('window resized');
112-
if (adsManager) {
113-
let width = videoElement.clientWidth;
114-
let height = videoElement.clientHeight;
115-
adsManager.resize(width, height, google.ima.ViewMode.NORMAL);
116-
}
117-
});
118-
}, []);
80+
function onAdsManagerLoaded(adsManagerLoadedEvent) {
81+
// Instantiate the AdsManager from the adsLoader response and pass it the video element.
82+
let adsManager = adsManagerLoadedEvent.getAdsManager(videoElementRef.current);
83+
adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
84+
adsManager.addEventListener(
85+
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
86+
onContentPauseRequested
87+
);
88+
adsManager.addEventListener(
89+
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
90+
onContentResumeRequested
91+
);
92+
adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, onAdLoaded);
93+
adsManagerRef.current = adsManager;
94+
}
11995

120-
function initializeIMA() {
121-
console.log('initializing IMA');
122-
let adContainer = adContainerRef.current!;
123-
let videoElement = videoElementRef.current!;
124-
adContainer.addEventListener('click', adContainerClick);
125-
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
126-
adsLoader = new google.ima.AdsLoader(adDisplayContainer);
96+
//adContainerRef.current!.addEventListener('click', adContainerClick);
97+
adDisplayContainerRef.current = new google.ima.AdDisplayContainer(
98+
adContainerRef.current!,
99+
videoElementRef.current!
100+
);
101+
let adsLoader = new google.ima.AdsLoader(adDisplayContainerRef.current);
127102
adsLoader.addEventListener(
128103
google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
129104
onAdsManagerLoaded,
@@ -132,7 +107,7 @@ const SecureSignalsApp = () => {
132107
adsLoader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError, false);
133108

134109
// Let the AdsLoader know when the video has ended
135-
videoElement.addEventListener('ended', function () {
110+
videoElementRef.current!.addEventListener('ended', function () {
136111
adsLoader.contentComplete();
137112
});
138113

@@ -145,66 +120,89 @@ const SecureSignalsApp = () => {
145120

146121
// Specify the linear and nonlinear slot sizes. This helps the SDK to
147122
// select the correct creative if multiple are returned.
148-
adsRequest.linearAdSlotWidth = videoElement.clientWidth;
149-
adsRequest.linearAdSlotHeight = videoElement.clientHeight;
150-
adsRequest.nonLinearAdSlotWidth = videoElement.clientWidth;
151-
adsRequest.nonLinearAdSlotHeight = videoElement.clientHeight / 3;
123+
adsRequest.linearAdSlotWidth = videoElementRef.current!.clientWidth;
124+
adsRequest.linearAdSlotHeight = videoElementRef.current!.clientHeight;
125+
adsRequest.nonLinearAdSlotWidth = videoElementRef.current!.clientWidth;
126+
adsRequest.nonLinearAdSlotHeight = videoElementRef.current!.clientHeight / 3;
152127

153128
// Pass the request to the adsLoader to request ads
154129
adsLoader.requestAds(adsRequest);
155-
}
156-
157-
function loadAds(event) {
158-
// Prevent this function from running on if there are already ads loaded
159-
if (adsLoaded) {
160-
return;
161-
}
162-
setAdsLoaded(true);
163-
164-
// Prevent triggering immediate playback when ads are loading
165-
event.preventDefault();
166-
167-
console.log('loading ads');
130+
adsLoaderRef.current = adsLoader;
131+
}, []);
168132

169-
let videoElement = videoElementRef.current!;
133+
const loadAds = useCallback(
134+
(event) => {
135+
// Prevent this function from running on if there are already ads loaded
136+
if (adsLoaded) {
137+
return;
138+
}
139+
setAdsLoaded(true);
140+
141+
// Prevent triggering immediate playback when ads are loading
142+
event.preventDefault();
143+
144+
console.log('loading ads');
145+
146+
// Initialize the container. Must be done via a user action on mobile devices.
147+
videoElementRef.current!.load();
148+
adDisplayContainerRef.current!.initialize();
149+
150+
let width = videoElementRef.current!.clientWidth;
151+
let height = videoElementRef.current!.clientHeight;
152+
try {
153+
adsManagerRef.current!.init(width, height, google.ima.ViewMode.NORMAL);
154+
adsManagerRef.current!.start();
155+
} catch (adError) {
156+
// Play the video without ads, if an error occurs
157+
console.log('AdsManager could not be started');
158+
videoElementRef.current!.play();
159+
}
160+
},
161+
[adsLoaded]
162+
);
170163

171-
// Initialize the container. Must be done via a user action on mobile devices.
172-
videoElement.load();
173-
adDisplayContainer.initialize();
164+
useEffect(() => {
165+
// Add callbacks for UID2 JS SDK
166+
window.__uid2.callbacks.push(onUid2IdentityUpdated);
167+
window.__uid2.callbacks.push((eventType, payload) => {
168+
let __uid2 = window.__uid2;
169+
if (eventType === 'SdkLoaded') {
170+
__uid2.init({
171+
baseUrl: 'http://localhost:8080',
172+
});
173+
}
174+
if (eventType === 'InitCompleted') {
175+
if (__uid2.isLoginRequired()) {
176+
__uid2.setIdentity(identity);
177+
setIdentity(identity);
178+
}
179+
}
180+
});
181+
}, [identity, onUid2IdentityUpdated]);
174182

175-
let width = videoElement.clientWidth;
176-
let height = videoElement.clientHeight;
177-
try {
178-
adsManager.init(width, height, google.ima.ViewMode.NORMAL);
179-
adsManager.start();
180-
} catch (adError) {
181-
// Play the video without ads, if an error occurs
182-
console.log('AdsManager could not be started');
183-
videoElement.play();
184-
}
185-
}
183+
useEffect(() => {
184+
// initialize ads manager
185+
initializeIMA();
186+
// videoElementRef.current!.addEventListener('play', function (event) {
187+
// loadAds(event);
188+
// });
186189

187-
function onAdsManagerLoaded(adsManagerLoadedEvent) {
188-
// Instantiate the AdsManager from the adsLoader response and pass it the video element.
189-
let videoElement = videoElementRef.current!;
190-
adsManager = adsManagerLoadedEvent.getAdsManager(videoElement);
191-
adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError);
192-
adsManager.addEventListener(
193-
google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
194-
onContentPauseRequested
195-
);
196-
adsManager.addEventListener(
197-
google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
198-
onContentResumeRequested
199-
);
200-
adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, onAdLoaded);
201-
}
190+
// add event listener for resize
191+
window.addEventListener('resize', function (event) {
192+
console.log('window resized');
193+
if (adsManagerRef.current) {
194+
let width = videoElementRef.current!.clientWidth;
195+
let height = videoElementRef.current!.clientHeight;
196+
adsManagerRef.current.resize(width, height, google.ima.ViewMode.NORMAL);
197+
}
198+
});
199+
}, [initializeIMA, loadAds]);
202200

203201
function onAdError(adErrorEvent) {
204202
// Handle the error logging.
205203
console.log(adErrorEvent.getError());
206-
if (adsManager) {
207-
adsManager.destroy();
204+
if (adsManagerRef.current) {
205+
adsManagerRef.current.destroy();
208206
}
209207
}
210208

@@ -216,13 +214,12 @@ const SecureSignalsApp = () => {
216214
videoElementRef.current!.play();
217215
}
218216

219-
function adContainerClick(event) {
217+
function handleAdContainerClick(event) {
220218
console.log('ad container clicked');
221-
let videoElement = videoElementRef.current!;
222-
if (videoElement.paused) {
223-
videoElement.play();
219+
if (videoElementRef.current!.paused) {
220+
videoElementRef.current!.play();
224221
} else {
225-
videoElement.pause();
222+
videoElementRef.current!.pause();
226223
}
227224
}
228225

@@ -291,8 +288,7 @@ const SecureSignalsApp = () => {
291288
return (
292289
<div>
293290
<h1>
294-
UID2 Publisher Client-Side Integration Example using React, UID2 JavaScript SDK, Secure
295-
Signals
291+
UID2 Publisher Client-Side Integration Example using UID2 JavaScript SDK, Secure Signals
296292
</h1>
297293
<p>
298294
This example demonstrates how a content publisher can follow the{' '}
@@ -305,13 +301,13 @@ const SecureSignalsApp = () => {
305301

306302
<div id='page-content'>
307303
<div id='video-container'>
308-
<video id='video-element' ref={videoElementRef}>
304+
<video id='video-element' ref={videoElementRef} onClick={handlePlay}>
309305
<source src='https://storage.googleapis.com/interactive-media-ads/media/android.mp4' />
310306
<source src='https://storage.googleapis.com/interactive-media-ads/media/android.webm' />
311307
</video>
312-
<div id='ad-container' ref={adContainerRef}></div>
308+
<div id='ad-container' ref={adContainerRef} onClick={handleAdContainerClick}></div>
313309
</div>
314-
<button id='play-button' ref={playButtonRef} onClick={handlePlay}>
310+
<button id='play-button' onClick={handlePlay}>
315311
Play
316312
</button>
317313
</div>

0 commit comments

Comments
 (0)