Skip to content

Commit 0bae262

Browse files
ashleysmithTTDashleysmithTTD
authored
Merge pull request #169 from IABTechLab/ans-UID2-4677-react-secure-signals-example-site
react secure signals example site
2 parents a0e8984 + ea36719 commit 0bae262

File tree

19 files changed

+17337
-0
lines changed

19 files changed

+17337
-0
lines changed

‎.github/workflows/publish-secure-signal-examples.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,3 +93,10 @@ jobs:
9393
push: true
9494
tags: ${{ steps.meta.outputs.tags }}
9595
labels: ${{ steps.meta.outputs.labels }}
96+
- name: Build and push Docker React image
97+
uses: docker/build-push-action@v5
98+
with:
99+
context: examples/google-secure-signals-integration/react_client_side
100+
push: true
101+
tags: ${{ steps.meta.outputs.tags }}
102+
labels: ${{ steps.meta.outputs.labels }}

‎.github/workflows/release-secure-signals-react-uid2.yml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
name: Release Secure Signal Examples Docker Image for UID2 React
2+
run-name: ${{ inputs.release_type == 'Snapshot' && 'Publish Pre-release' || format('Release {0}', inputs.release_type)}} Secure Signal Examples Docker Image for UID2 React by @${{ github.actor }}
3+
on:
4+
workflow_dispatch:
5+
inputs:
6+
release_type:
7+
type: choice
8+
description: The type of release
9+
options:
10+
- Major
11+
- Minor
12+
- Patch
13+
- Snapshot
14+
required: true
15+
16+
jobs:
17+
incrementVersionNumber:
18+
uses: IABTechLab/uid2-shared-actions/.github/workflows/shared-increase-version-number.yaml@v2
19+
with:
20+
release_type: ${{ inputs.release_type }}
21+
working_dir: examples/google-secure-signals-integration/react_client_side
22+
secrets: inherit
23+
24+
publishForSecureSignalsExampleReact:
25+
uses: IABTechLab/uid2-shared-actions/.github/workflows/shared-publish-to-docker-versioned.yaml@v3
26+
needs: incrementVersionNumber
27+
with:
28+
new_version: ${{ needs.incrementVersionNumber.outputs.new_version }}
29+
image_tag: ${{ needs.incrementVersionNumber.outputs.image_tag }}
30+
release_type: ${{ inputs.release_type }}
31+
docker_file: examples/google-secure-signals-integration/react_client_side/Dockerfile
32+
docker_context: examples/google-secure-signals-integration/react_client_side
33+
docker_image_name: iabtechlab/uid2-secure-signals-example-react
34+
docker_registry: ghcr.io
35+
force_release: no
36+
secrets: inherit

‎examples/google-secure-signals-integration/react_client_side/.dockerignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
npm-debug.log

‎examples/google-secure-signals-integration/react_client_side/.gitignore‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎examples/google-secure-signals-integration/react_client_side/Dockerfile‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
FROM node:20.11.0-alpine3.18
2+
3+
WORKDIR /usr/src/app
4+
5+
COPY . .
6+
RUN npm install
7+
8+
EXPOSE 3000
9+
CMD [ "npm", "start" ]

‎examples/google-secure-signals-integration/react_client_side/README.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# UID2 React Secure Signals Integration Example
2+
3+
This example demonstrates how a content publisher who is working with [Google Interactive Media Ads(IMA) SDKs](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side) can use [Google Secure Signal](https://support.google.com/admanager/answer/10488752) and the [UID2 SDK for JavaScript](https://unifiedid.com/docs/sdks/sdk-ref-javascript) to share UID2 directly with bidders, in an implementation that uses this JS SDK on the client side in a React App.
4+
5+
## Build and Run the Example Application
6+
7+
The easiest way to try the example is to use the following docker build command:
8+
9+
```
10+
docker build . -t uid2-secure-signals-react
11+
docker run -it --rm -p 3000:3000 uid2-secure-signals-react
12+
```
13+
14+
The example app will be up and running at localhost:3000
15+
16+
If needed, to close the application, terminate the docker container or use the `Ctrl+C` keyboard shortcut.
17+
18+
## Test the Example Application
19+
20+
The example application illustrates the steps documented in the [Google Ad Manager Secure Signals Integration Guide](https://unifiedid.com/docs/guides/integration-google-ss). For an overview of the high-level workflow for establishing UID2 identity, API reference, and explanation of the UID2 cookie format, see [UID2 SDK for JavaScript](https://unifiedid.com/docs/sdks/client-side-identity).
21+
22+
The following table outlines and annotates the steps you may take to test and explore the example application.
23+
24+
| Step | Description | Comments |
25+
| :--: | :---------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
26+
| 1 | In your browser, navigate to the application main page at `http://localhost:3000`. | The displayed main [page](src/SecureSignalsApp.tsx) of the example application provides a login form for the user to complete the UID2 login process.</br>IMPORTANT: A real-life application must also display a form for the user to express their consent to targeted advertising. |
27+
| 2 | In the text field at the bottom, enter the user email address that you want to use for testing and click **Log In**. | The click calls the Secure Signal [`clearAllCache()`](https://developers.google.com/publisher-tag/reference#googletag.secureSignals.SecureSignalProvidersArray_clearAllCache) function, to clear all cached signals from local storage. Then, it makes a call on the client side to the `setIdentityFromEmail` function of the JS SDK ([Configuring the SDK for Javascript](https://unifiedid.com/docs/guides/integration-javascript-client-side#configure-the-sdk-for-javascript)). |
28+
| 3 | A confirmation message appears with the established UID2 identity information. | The displayed identity information is the `body` property of the [JSON response payload](https://unifiedid.com/docs/endpoints/post-token-generate#decrypted-json-response-format) from the `client-generate` response. Next, the identity information is passed to the UID2 SDK [`setIdentity()`](https://unifiedid.com/docs/sdks/sdk-ref-javascript#setidentityidentity-identity-void) function. If the identity is valid, the SDK stores it either in local storage or a first-party UID2 cookie (see [UID2 Storage Format](https://unifiedid.com/docs/sdks/sdk-ref-javascript#uid2-storage-format) for use on subsequent page loads.) |
29+
| 4 | Click the **Back to the main page** link. | On the updated application main page, note the newly populated **UID2 Advertising Token** value and a video player. While the [page](src/SecureSignalsApp.tsx) is loading, [GPT](https://developers.google.com/publisher-tag/reference#googletag) auto-loads the Secure Signal UID2 script which pushes the advertising token to GPT local storage, and the [IMA](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side) makes an ad request which transmits the encoded signal in the request. The [page](src/SecureSignalsApp.tsx) calls the [init()](https://unifiedid.com/docs/sdks/sdk-ref-javascript#initopts-object-void) function again, but this time without passing an explicit identity. Instead, the identity is loaded from the first-party cookie or local storage. |
30+
| 5 | Click **Play**. | This triggers AdsManager to insert the ad returned from the ad request, for display. The ad tag used in this example contains a 10-second pre-roll ad. |
31+
| 6 | (Optional) Right-click the main page to inspect the source code. | When the UID2 SDK initialization is complete, the SDK invokes the passed [callback function](https://unifiedid.com/docs/sdks/client-side-identity#callback-function) (`onUid2IdentityUpdated()` in this example).</br>IMPORTANT: The callback updates the page elements with the state of UID2 identity: this is the place where you should define your logic for initiating targeted advertising. |
32+
| 7 | Keep the application main page open or refresh it after awhile and note the UID2 identity state, updated counter, and login information values. | In the background, the UID2 SDK continuously validates whether the advertising token is up-to-date and refreshes it automatically when needed. If the refresh succeeds, the user opts out, or the refresh token expires, the callback function is invoked and the UI elements are updated with the current state of the UID2 identity. For details, see [Workflow States and Transitions](https://unifiedid.com/docs/sdks/client-side-identity#workflow-states-and-transitions) and [Background Token Auto-Refresh](https://unifiedid.com/docs/sdks/client-side-identity#background-token-auto-refresh). |
33+
| 8 | To exit the application, click **Log Out**. | This calls the UID2 SDK [`disconnect()`](https://unifiedid.com/docs/sdks/sdk-ref-javascript#disconnect-void) function, which clears the UID2 session and the first-party cookie or local storage and calls the Secure Signal [`clearAllCache()`](https://developers.google.com/publisher-tag/reference#googletag.secureSignals.SecureSignalProvidersArray_clearAllCache) function to clear all cached signals. This call also makes the UID2 SDK [`isLoginRequired()`](https://unifiedid.com/docs/sdks/sdk-ref-javascript#isloginrequired-boolean) function return `true`, which presents the user with the login form again.<br/> NOTE: The page displays the **Log Out** button as long as the user identity is valid and refreshable. |

0 commit comments

Comments
 (0)