feat: add OF tracking docs for Node + Web (#780)

* feat: add OF tracking docs for Node + Web * fix: autoformatting * chore: cleanup * fix: formatting of wizard tags
DevCycleHQ · Nov 21, 2024 · 1230e0c · 1230e0c
1 parent 96dbdd6
commit 1230e0c
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 25 deletions.
diff --git a/docs/sdk/client-side-sdks/javascript/javascript-openfeature.md b/docs/sdk/client-side-sdks/javascript/javascript-openfeature.md
@@ -26,12 +26,15 @@ Install the OpenFeature Web SDK and DevCycle Web Provider:
 [//]: # (wizard-install-start)
 
 #### NPM
+
 ```bash
 npm install --save @devcycle/openfeature-web-provider
 ```
+
 [//]: # (wizard-install-end)
 
 #### Yarn
+
 If using `yarn` you will need to install peer-dependencies:
 
 ```bash
@@ -62,19 +65,34 @@ await OpenFeature.setProviderAndWait(devcycleProvider)
 // Get the OpenFeature client
 const openFeatureClient = OpenFeature.getClient()
 ```
-[//]: # (wizard-initialize-end)
 
+[//]: # (wizard-initialize-end)
 
 [//]: # (wizard-evaluate-start)
 
 Use a Variable value by passing the Variable key and default value to one of the OpenFeature flag evaluation methods
+
 ```typescript
 // Retrieve a boolean flag from the OpenFeature client
 const boolFlag = openFeatureClient.getBooleanValue('boolean-flag', false)
 ```
 
 [//]: # (wizard-evaluate-end)
 
+### Tracking Events
+
+You can use the OpenFeature `track` method to track events which will be sent to DevCycle as custom events. Calling `track` will queue the event, which will be sent in batches to the DevCycle servers.
+
+```typescript
+openFeatureClient.track('custom-event', {
+  target: 'event-target',
+  value: 100,
+  metaDataField: 'value',
+})
+```
+
+To track custom events with OpenFeature you are required to set the first argument as the event name. The event name will be used as the event's `type` in DevCycle, and you can optionally set a `value` / `target` / `date` as defined in the [DevCycleEvent Typescript Schema](https://github.com/search?q=repo%3ADevCycleHQ%2Fjs-sdks+export+interface+DevCycleEvent+language%3ATypeScript+path%3A*types.ts&type=code). Any additional properties will be added to the event as `metaData` fields.
+
 ### Passing DevCycleOptions to the DevCycleProvider
 
 Ensure that you pass any custom DevCycleOptions to the DevCycleProvider constructor

diff --git a/docs/sdk/client-side-sdks/react-native/react-native-expo-install.md b/docs/sdk/client-side-sdks/react-native/react-native-expo-install.md
@@ -15,15 +15,15 @@ To get started, install the React Native Expo SDK.
 
 The command to install the React Native Expo SDK is:
 
-[//]: # 'wizard-install-start'
+[//]: # (wizard-install-start)
 
 ### npx
 
 ```bash
 npx expo install @devcycle/react-native-expo-client-sdk
 ```
 
-[//]: # 'wizard-install-end'
+[//]: # (wizard-install-end)
 
 ### yarn
 
@@ -59,7 +59,7 @@ The [@react-native-async-storage/async-storage](https://www.npmjs.com/package/@r
 The [react-native-get-random-values](https://www.npmjs.com/package/react-native-get-random-values) package provides a polyfill for cryptographic functionality used to generate random IDs.
 The [react-native-device-info](https://www.npmjs.com/package/react-native-device-info) package provides information about the current device running the SDK, which is required to correctly apply targeting rules.
 
-[//]: # 'wizard-initialize-start'
+[//]: # (wizard-initialize-start)
 
 ## Import SDK Dependencies
 
@@ -89,7 +89,7 @@ export default withDevCycleProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(
 )
 ```
 
-[//]: # 'wizard-initialize-end'
+[//]: # (wizard-initialize-end)
 
 ## Example
 

diff --git a/docs/sdk/client-side-sdks/react-native/react-native-install.md b/docs/sdk/client-side-sdks/react-native/react-native-install.md
@@ -15,15 +15,15 @@ To get started, install the React Native SDK. For React Native Expo, see the [Ex
 
 The command to install the React Native SDK is:
 
-[//]: # 'wizard-install-start'
+[//]: # (wizard-install-start)
 
 ### npm
 
 ```bash
 npm install --save @devcycle/react-native-client-sdk
 ```
 
-[//]: # 'wizard-install-end'
+[//]: # (wizard-install-end)
 
 ### yarn
 
@@ -59,7 +59,7 @@ The [@react-native-async-storage/async-storage](https://www.npmjs.com/package/@r
 The [react-native-get-random-values](https://www.npmjs.com/package/react-native-get-random-values) package provides a polyfill for cryptographic functionality used to generate random IDs.
 The [react-native-device-info](https://www.npmjs.com/package/react-native-device-info) package provides information about the current device running the SDK, which is required to correctly apply targeting rules.
 
-[//]: # 'wizard-initialize-start'
+[//]: # (wizard-initialize-start)
 
 ## Import SDK Dependencies
 
@@ -89,7 +89,7 @@ export default withDevCycleProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(
 )
 ```
 
-[//]: # 'wizard-initialize-end'
+[//]: # (wizard-initialize-end)
 
 ## Example
 

diff --git a/docs/sdk/client-side-sdks/react-native/react-native-usage.md b/docs/sdk/client-side-sdks/react-native/react-native-usage.md
@@ -10,7 +10,7 @@ sidebar_custom_props: { icon: material-symbols:toggle-on }
 [![Expo package version](https://badgen.net/npm/v/@devcycle/react-native-expo-client-sdk)](https://www.npmjs.com/package/@devcycle/react-native-expo-client-sdk)
 [![GitHub](https://img.shields.io/github/stars/devcyclehq/js-sdks.svg?style=social&label=Star&maxAge=2592000)](https://github.com/devcyclehq/js-sdks)
 
-[//]: # 'wizard-evaluate-start'
+[//]: # (wizard-evaluate-start)
 
 ## Getting a Variable
 
@@ -39,7 +39,7 @@ const DevCycleFeaturePage = () => {
 }
 ```
 
-[//]: # 'wizard-evaluate-end'
+[//]: # (wizard-evaluate-end)
 
 ## useDevCycleClient
 

diff --git a/docs/sdk/client-side-sdks/roku/roku-gettingstarted.md b/docs/sdk/client-side-sdks/roku/roku-gettingstarted.md
@@ -8,7 +8,7 @@ sidebar_custom_props: { icon: material-symbols:rocket }
 
 [![GitHub](https://img.shields.io/github/stars/devcyclehq/roku-client-sdk.svg?style=social&label=Star&maxAge=2592000)](https://github.com/devcyclehq/roku-client-sdk)
 
-[//]: # 'wizard-initialize-start'
+[//]: # (wizard-initialize-start)
 
 ## Initializing the SDK
 
@@ -51,7 +51,7 @@ sub init()
 end sub
 ```
 
-[//]: # 'wizard-initialize-end'
+[//]: # (wizard-initialize-end)
 
 The user object may specify a unqiue `user_id` for a given User. If the `user_id` is not specified, the User is considered to be anonymous and we will utilize the Device ID as a unique identifier.
 

diff --git a/docs/sdk/client-side-sdks/roku/roku-install.md b/docs/sdk/client-side-sdks/roku/roku-install.md
@@ -16,12 +16,12 @@ This version of the DevCycle Client SDK supports the following platforms:
 
 ## Installation
 
-[//]: # 'wizard-install-start'
+[//]: # (wizard-install-start)
 
 ### Github
 
 Download the latest release from [Github Releases](https://github.com/DevCycleHQ/roku-client-sdk/releases) and extract the provided files into your source tree. You may need to rename the paths inside `DevCycleTask.xml` depending on your project structure.
 
 For SceneGraph usage, add a `DevCycleTask` node to your scene.
 
-[//]: # 'wizard-install-end'
+[//]: # (wizard-install-end)
diff --git a/docs/sdk/client-side-sdks/roku/roku-usage.md b/docs/sdk/client-side-sdks/roku/roku-usage.md
@@ -8,7 +8,7 @@ sidebar_custom_props: { icon: material-symbols:toggle-on }
 
 [![GitHub](https://img.shields.io/github/stars/devcyclehq/roku-client-sdk.svg?style=social&label=Star&maxAge=2592000)](https://github.com/devcyclehq/roku-client-sdk)
 
-[//]: # 'wizard-evaluate-start'
+[//]: # (wizard-evaluate-start)
 
 ## Using Variable Values
 
@@ -23,7 +23,7 @@ numValue = m.devcycleClient.getVariableValue('num_key', 4)
 jsonValue = m.devcycleClient.getVariableValue('json_key', {})
 ```
 
-[//]: # 'wizard-evaluate-end'
+[//]: # (wizard-evaluate-end)
 
 ## Grabbing All Features / Variables
 

diff --git a/docs/sdk/server-side-sdks/node/node-openfeature.md b/docs/sdk/server-side-sdks/node/node-openfeature.md
@@ -20,11 +20,13 @@ directly from the SDK using the `getOpenFeatureProvider()` method.
 Install the DevCycle NodeJS Server SDK and the OpenFeature Server SDK peer dependencies:
 
 #### NPM
+
 [//]: # (wizard-install-start)
 
 ```bash
 npm install --save @devcycle/nodejs-server-sdk @openfeature/server-sdk @openfeature/core
 ```
+
 [//]: # (wizard-install-end)
 
 #### Yarn
@@ -53,34 +55,50 @@ await OpenFeature.setProviderAndWait(await devcycleClient.getOpenFeatureProvider
 // Create the OpenFeature client
 openFeatureClient = OpenFeature.getClient()
 ```
+
 [//]: # (wizard-initialize-end)
 
 ### Evaluate a Variable
+
 [//]: # (wizard-evaluate-start)
 
-Use a Variable value by setting the EvaluationContext, then passing the Variable key and default value to one of the OpenFeature flag evaluation methods.
+Use a Variable value by creating the EvaluationContext, then passing the Variable key, default value, and EvaluationContext to one of the OpenFeature flag evaluation methods.
 
 ```typescript
 // Set the context for the OpenFeature client, you can use 'targetingKey' or 'user_id'
-openFeatureClient.setContext({ targetingKey: 'node_sdk_test' })
+const context = { targetingKey: 'node_sdk_test' }
 
 // Retrieve a boolean flag from the OpenFeature client
-const boolFlag = await openFeatureClient.getBooleanValue('boolean-flag', false)
-
+const boolFlag = await openFeatureClient.getBooleanValue('boolean-flag', false, context)
 ```
+
 [//]: # (wizard-evaluate-end)
 
+### Tracking Events
+
+You can use the OpenFeature `track` method to track events which will be sent to DevCycle as custom events. Calling `track` will queue the event, which will be sent in batches to the DevCycle servers.
+
+```typescript
+const context = { targetingKey: 'node_sdk_test' }
+openFeatureClient.track('custom-event', context, {
+  target: 'event-target',
+  value: 100,
+  metaDataField: 'value',
+})
+```
+
+To track custom events with OpenFeature you are required to set the first argument as the event name, and pass the EvaluationContext as the second argument. The event name will be used as the event's `type` in DevCycle, and you can optionally set a `value` / `target` / `date` as defined in the [DevCycleEvent Typescript Schema](https://github.com/search?q=repo%3ADevCycleHQ%2Fjs-sdks+export+interface+DevCycleEvent+language%3ATypeScript+path%3A*types.ts&type=code). Any additional properties will be added to the event as `metaData` fields.
+
 ### Passing DevCycleOptions to the DevCycleProvider
 
 Ensure that you pass any custom DevCycleOptions set on the `DevCycleClient` instance to the DevCycleProvider constructor
 
 ```typescript
 const options = { logger: dvcDefaultLogger({ level: 'debug' }) }
-const devcycleClient = initializeDevCycle(
-  DEVCYCLE_SERVER_SDK_KEY,
-  options,
+const devcycleClient = initializeDevCycle(DEVCYCLE_SERVER_SDK_KEY, options)
+await OpenFeature.setProviderAndWait(
+  await devcycleClient.getOpenFeatureProvider(),
 )
-await OpenFeature.setProviderAndWait(await devcycleClient.getOpenFeatureProvider())
 ```
 
 ### Required TargetingKey