react secure signals example site

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

@@ -93,3 +93,10 @@ jobs:
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+      - name: Build and push Docker React image
+        uses: docker/build-push-action@v5
+        with:
+          context: examples/google-secure-signals-integration/react_client_side
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

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

@@ -0,0 +1,36 @@
+name: Release Secure Signal Examples Docker Image for UID2 React
+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 }}
+on:
+  workflow_dispatch:
+    inputs:
+      release_type:
+        type: choice
+        description: The type of release
+        options:
+          - Major
+          - Minor
+          - Patch
+          - Snapshot
+        required: true
+
+jobs:
+  incrementVersionNumber:
+    uses: IABTechLab/uid2-shared-actions/.github/workflows/shared-increase-version-number.yaml@v2
+    with:
+      release_type: ${{ inputs.release_type }}
+      working_dir: examples/google-secure-signals-integration/react_client_side
+    secrets: inherit
+
+  publishForSecureSignalsExampleReact:
+    uses: IABTechLab/uid2-shared-actions/.github/workflows/shared-publish-to-docker-versioned.yaml@v3
+    needs: incrementVersionNumber
+    with:
+      new_version: ${{ needs.incrementVersionNumber.outputs.new_version }}
+      image_tag: ${{ needs.incrementVersionNumber.outputs.image_tag }}
+      release_type: ${{ inputs.release_type }}
+      docker_file: examples/google-secure-signals-integration/react_client_side/Dockerfile
+      docker_context: examples/google-secure-signals-integration/react_client_side
+      docker_image_name: iabtechlab/uid2-secure-signals-example-react
+      docker_registry: ghcr.io
+      force_release: no
+    secrets: inherit

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

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

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

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

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

@@ -0,0 +1,9 @@
+FROM node:20.11.0-alpine3.18
+
+WORKDIR /usr/src/app
+
+COPY . .
+RUN npm install
+
+EXPOSE 3000
+CMD [ "npm", "start" ]

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

@@ -0,0 +1,33 @@
+# UID2 React Secure Signals Integration Example
+
+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.
+
+## Build and Run the Example Application
+
+The easiest way to try the example is to use the following docker build command:
+
+```
+docker build . -t uid2-secure-signals-react
+docker run -it --rm -p 3000:3000 uid2-secure-signals-react
+```
+
+The example app will be up and running at localhost:3000
+
+If needed, to close the application, terminate the docker container or use the `Ctrl+C` keyboard shortcut.
+
+## Test the Example Application
+
+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).
+
+The following table outlines and annotates the steps you may take to test and explore the example application.
+
+| Step | Description                                                                                                                                     | Comments                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| :--: | :---------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|  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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+|  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)).                                                                                                                                                                                                                                                                                                                         |
+|  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.)                                                                                                                                                                     |
+|  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. |
+|  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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+|  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.                                                                                                                                                                                                                                                                                                                                                                                                           |
+|  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).                                                                                                                                                                                                     |
+|  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.                                                                     |