uid2-web-integrations/examples/cstg/html/index.html at 05fc5aa6b84c13c29e85c1540be47ad09933ea53 · IABTechLab/uid2-web-integrations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>UID2 Publisher Client-Side Integration Example using UID2 JavaScript SDK</title>
    <link rel="stylesheet" type="text/css" href="/stylesheets/app.css" />
    <link rel="shortcut icon" href="/images/favicon.png" />
    <script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script defer src="{{ UID_JS_SDK_URL }}"></script>
    <script>
      const clientSideIdentityOptions = {
        subscriptionId: '{{ SUBSCRIPTION_ID }}',
        serverPublicKey: '{{ SERVER_PUBLIC_KEY }}',
      };

      let callbackCounter = 0;

      // __uid2 for UID2 SDK, __euid for EUID SDK.
      const sdkName = '{{ UID_JS_SDK_NAME }}';

      function getUidSdk() {
        return window[sdkName];
      }

      function updateGuiElements(state) {
        const sdk = getUidSdk();
        $('#targeted_advertising_ready').text(sdk.getAdvertisingToken() ? 'yes' : 'no');
        $('#advertising_token').text(String(sdk.getAdvertisingToken()));
        $('#login_required').text(
          sdk.isLoginRequired() || sdk.isLoginRequired() === undefined ? 'yes' : 'no'
        );
        $(`#has_opted_out`).text(sdk.hasOptedOut() ? 'yes' : 'no');
        $('#update_counter').text(callbackCounter);
        $('#identity_state').text(String(JSON.stringify(state, null, 2)));

        updateSharedGuiElements();
      }

      function updateSharedGuiElements() {
        if (getUidSdk().isLoginRequired()) {
          $('#login_form').show();
          $('#logout_form').hide();
        } else {
          $('#login_form').hide();
          $('#logout_form').show();
        }
      }

      function onIdentityUpdated(eventType, payload) {
        if (
          payload?.identity &&
          (eventType === 'InitCompleted' || eventType === 'IdentityUpdated')
        ) {
          ++callbackCounter;
        }
        updateGuiElements(payload);
      }

      function onDocumentReady() {
        $('#logout').click(() => {
          getUidSdk().disconnect();
          updateGuiElements(undefined);
        });

        $('#login').click(async () => {
          const email = $('#email').val();

          try {
            await getUidSdk().setIdentityFromEmail(email, clientSideIdentityOptions);
          } catch (e) {
            console.error('setIdentityFromEmail failed', e);
          }
        });
      }

      window[sdkName] = window[sdkName] || {};
      const sdk = getUidSdk();
      sdk.callbacks = sdk.callbacks || [];

      sdk.callbacks.push(onIdentityUpdated);
      sdk.callbacks.push((eventType, payload) => {
        if (eventType === 'SdkLoaded') {
          getUidSdk().init({
            baseUrl: '{{ UID_BASE_URL }}',
          });
          $(document).ready(onDocumentReady);
        }
      });
    </script>
  </head>
  <body>
    <h1>UID2 Publisher Client-Side Integration Example using UID2 JavaScript SDK</h1>
    <p>
      This example demonstrates how a content publisher can follow the
      <a href="https://unifiedid.com/docs/guides/integration-javascript-client-side"
        >Client-Side Integration Guide for JavaScript
      </a>
      to implement UID2 integration and generate UID2 tokens.
      <strong>Note:</strong> This is a <em>test-only</em> integration environment—not for production
      use. It does not perform real user authentication or generate production-level tokens. Do not
      use real user data on this page.
    </p>
    <table id="uid2_state">
      <tr>
        <td class="label">Ready for Targeted Advertising:</td>
        <td class="value"><pre id="targeted_advertising_ready"></pre></td>
      </tr>
      <tr>
        <td class="label">Advertising Token:</td>
        <td class="value"><pre id="advertising_token"></pre></td>
      </tr>
      <tr>
        <td class="label">Is Login Required?</td>
        <td class="value"><pre id="login_required"></pre></td>
      </tr>
      <tr>
        <td class="label">Has opted out?</td>
        <td class="value"><pre id="has_opted_out"></pre></td>
      </tr>
      <tr>
        <td class="label">Identity Updated Counter:</td>
        <td class="value"><pre id="update_counter"></pre></td>
      </tr>
      <tr>
        <td class="label">Identity Callback State:</td>
        <td class="value"><pre id="identity_state"></pre></td>
      </tr>
    </table>
    <div id="login_form" style="display: none" class="form">
      <div class="email_prompt">
        <input
          type="text"
          id="email"
          name="email"
          placeholder="Enter an email address"
          style="border-style: none"
        />
      </div>
      <div><button type="button" class="button" id="login">Generate UID2</button>></div>
    </div>
    <div id="logout_form" style="display: none" class="form">
      <form>
        <button type="button" class="button" id="logout">Clear UID2</button>
      </form>
    </div>
  </body>
</html>