Skip to content

Commit 5a532c1

Browse files
[FSSDK-11403] init doc update
1 parent 85c0220 commit 5a532c1

File tree

1 file changed

+67
-41
lines changed

1 file changed

+67
-41
lines changed

README.md

+67-41
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ In addition, other environments are likely compatible but are not formally suppo
4242

4343
### Requirements
4444

45-
* JavaScript (Browser): Modern web browser that is ES5-compliant.
45+
* JavaScript (Browser): Modern web browser that is ES6-compliant.
4646

4747
* JavaScript (Node): Node 16.0.0+
4848

@@ -70,11 +70,44 @@ Using `deno` (no installation required):
7070
```javascript
7171
import optimizely from "npm:@optimizely/optimizely-sdk"
7272
```
73-
## Use the JavaScript SDK (Browser)
73+
## Use the JavaScript SDK
7474

75-
See the [Optimizely Feature Experimentation developer documentation for JavaScript (Browser)](https://docs.developers.optimizely.com/experimentation/v4.0.0-full-stack/docs/javascript-sdk) to learn how to set up your first JavaScript project and use the SDK for client-side applications.
75+
See the [Optimizely Feature Experimentation developer documentation for JavaScript](https://docs.developers.optimizely.com/experimentation/v4.0.0-full-stack/docs/javascript-sdk) to learn how to set up your first JavaScript project and use the SDK for client-side applications.
7676

77-
### Initialization (Browser)
77+
### Initialization (Using NPM)
78+
79+
```javascript
80+
import {
81+
createInstance,
82+
createPollingProjectConfigManager,
83+
createBatchEventProcessor,
84+
createOdpManager,
85+
} from "@optimizely/optimizely-sdk";
86+
87+
88+
const pollingConfigManager = createPollingProjectConfigManager({
89+
sdkKey: "<YOUR_SDK_KEY>",
90+
})
91+
const batchEventProcessor = createBatchEventProcessor()
92+
const odpManager = createOdpManager()
93+
94+
const optimizelyClient = createInstance({
95+
projectConfigManager: pollingConfigManager,
96+
eventProcessor: batchEventProcessor,
97+
odpManager: odpManager,
98+
})
99+
100+
if(optimizelyClient) {
101+
optimizelyClient.onReady().then(() => {
102+
console.log("Optimizely client is ready");
103+
}).catch((error) => {
104+
console.error("Error initializing Optimizely client:", error);
105+
});
106+
}
107+
108+
```
109+
110+
### Initialization (Using HTML)
78111

79112
The package has different entry points for different environments. The browser entry point is an ES module, which can be used with an appropriate bundler like **Webpack** or **Rollup**. Additionally, for ease of use during initial evaluations you can include a standalone umd bundle of the SDK in your web page by fetching it from [unpkg](https://unpkg.com/):
80113

@@ -89,45 +122,38 @@ When evaluated, that bundle assigns the SDK's exports to `window.optimizelySdk`.
89122

90123
As `window.optimizelySdk` should be a global variable at this point, you can continue to use it like so:
91124

92-
```javascript
93-
const optimizelyClient = window.optimizelySdk.createInstance({
94-
sdkKey: '<YOUR_SDK_KEY>',
95-
// datafile: window.optimizelyDatafile,
96-
// etc.
97-
});
98-
99-
optimizelyClient.onReady().then(({ success, reason }) => {
100-
if (success) {
101-
// Create the Optimizely user context, make decisions, and more here!
102-
}
103-
});
125+
```html
126+
<script>
127+
const {
128+
createInstance,
129+
createPollingProjectConfigManager,
130+
createBatchEventProcessor,
131+
createOdpManager
132+
} = window.optimizelySdk
133+
134+
const pollingConfigManager = createPollingProjectConfigManager({
135+
sdkKey: "<YOUR_SDK_KEY>",
136+
})
137+
const batchEventProcessor = createBatchEventProcessor()
138+
const odpManager = createOdpManager()
139+
140+
const optimizelyClient = createInstance({
141+
projectConfigManager: pollingConfigManager,
142+
eventProcessor: batchEventProcessor,
143+
odpManager: odpManager,
144+
})
145+
146+
if(optimizelyClient) {
147+
optimizelyClient.onReady().then(() => {
148+
console.log("Optimizely client is ready");
149+
}).catch((error) => {
150+
console.error("Error initializing Optimizely client:", error);
151+
});
152+
}
153+
</script>
104154
```
105155

106-
Regarding `EventDispatcher`s: In Node.js and browser environments, the default `EventDispatcher` is powered by the [`http/s`](https://nodejs.org/api/http.html) modules and by [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Browser_compatibility), respectively. In all other environments, you must supply your own `EventDispatcher`.
107156

108-
## Use the JavaScript SDK (Node)
109-
110-
See the [Optimizely Feature Experimentation developer documentation for JavaScript (Node)](https://docs.developers.optimizely.com/experimentation/v4.0.0-full-stack/docs/javascript-node-sdk) to learn how to set up your first JavaScript project and use the SDK for server-side applications.
111-
112-
### Initialization (Node)
113-
114-
The package has different entry points for different environments. The node entry point is CommonJS module.
115-
116-
```javascript
117-
const optimizelySdk = require('@optimizely/optimizely-sdk');
118-
119-
const optimizelyClient = optimizelySdk.createInstance({
120-
sdkKey: '<YOUR_SDK_KEY>',
121-
// datafile: window.optimizelyDatafile,
122-
// etc.
123-
});
124-
125-
optimizelyClient.onReady().then(({ success, reason }) => {
126-
if (success) {
127-
// Create the Optimizely user context, make decisions, and more here!
128-
}
129-
});
130-
```
131157

132158
Regarding `EventDispatcher`s: In Node.js environment, the default `EventDispatcher` is powered by the [`http/s`](https://nodejs.org/api/http.html) module.
133159

@@ -207,4 +233,4 @@ First-party code (under `packages/optimizely-sdk/lib/`, `packages/datafile-manag
207233

208234
- Ruby - https://github.com/optimizely/ruby-sdk
209235

210-
- Swift - https://github.com/optimizely/swift-sdk
236+
- Swift - https://github.com/optimizely/swift-sdk

0 commit comments

Comments
 (0)