example-javascript-browser/index-js-sdk.html at master · splitio/example-javascript-browser · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css">
    <title>Hello FME JavaScript SDK</title>
    <!-- For other bundle versions see https://developer.harness.io/docs/feature-management-experimentation/sdks-and-infrastructure/client-side-sdks/browser-sdk#initialization -->
    <script src="https://cdn.split.io/sdk/split-11.11.1.min.js"></script>
  </head>
  <body>
    <script>
      function main()
      {
        // CHANGE THIS: Copy and paste your Harness FME client-side SDK API key.
        // In Harness, look under FME Settings | Projects | View | SDK API Keys.
        var sdkKey = 'YOUR_SDK_KEY';

        // CHANGE THIS: Copy and paste the feature flag name from Harness FME.
        var featureFlagName = 'FEATURE_FLAG_NAME';

        // CHANGE THIS: Provide a user or account ID (usually a dynamic value). This value
        // is used for feature flag targeting (for matching with a flag targeting rule and
        // for percentage distribution within a targeting rule).
        var userKey = 'user001';

        var div = document.createElement('div');
        div.appendChild(document.createTextNode('Initializing...'));
        document.body.appendChild(div);

        if ( sdkKey == 'YOUR_SDK_KEY' ) {
          div.replaceChild(document.createTextNode('Please edit index-js-browser-sdk-full.html to ' +
          'set your authorization key and feature flag name, then reload the page.'), div.firstChild);
          return;
        }

        sdk = splitio({
          core: {
            authorizationKey: sdkKey,
            key: userKey
          },
          debug: 'DEBUG'
        });

        var client = sdk.client();

        function evaluateFlag() {

          // Evaluate the feature flag for the given user or account. Feature flag impressions
          // (evaluation info) should appear in Live tail soon after you run the demo.
          var treatment = client.getTreatment(featureFlagName);
          console.log(`The treatment for feature flag ${featureFlagName} is ${treatment}.`);

          div.replaceWith(
            Object.assign(
              document.createElement('div'),
              { innerHTML: `For <b>${userKey}</b> the treatment for feature flag <b>${featureFlagName}</b> is <b>${treatment}</b>.` }
            )
          );
        }

        client.once(client.Event.SDK_READY , evaluateFlag);
        client.on  (client.Event.SDK_UPDATE, evaluateFlag);

        document.body.appendChild(document.createElement('p'))
        b = document.body.appendChild(
          Object.assign(
            document.createElement('button'),
            { innerText: 'Send event',
              onclick: () => {
                client.track('user', 'click', 1, null);             // Send event to FME. You'll see events recieved in Data hub | Live tail.
                b.appendChild(document.createTextNode(" \u2714"));  // append ✔ to button text
              }
            }
          )
        );

      }
      main();
    </script>
  </body>
</html>