[docs-11806] New "Getting Started" Guide for Feature Flags

config/_default/menus/main.en.yaml

@@ -100,146 +100,151 @@ menu:
       url: getting_started/devsecops
       parent: getting_started
       weight: 10
+    - name: Feature Flags
+      identifier: getting_started_feature_flags
+      url: getting_started/feature_flags/
+      parent: getting_started
+      weight: 11
     - name: Incident Management
       identifier: getting_started_incident_management
       url: getting_started/incident_management/
       parent: getting_started
-      weight: 11
+      weight: 12
     - name: Integrations
       identifier: getting_started_integrations
       url: getting_started/integrations/
       parent: getting_started
-      weight: 12
+      weight: 13
     - name: AWS
       identifier: getting_started_with_aws
       url: getting_started/integrations/aws/
-      weight: 1201
+      weight: 1301
       parent: getting_started_integrations
     - name: Azure
       identifier: getting_started_with_azure
       url: getting_started/integrations/azure/
-      weight: 1202
+      weight: 1302
       parent: getting_started_integrations
     - name: Google Cloud
       identifier: getting_started_with_google_cloud
       url: getting_started/integrations/google_cloud/
-      weight: 1203
+      weight: 1303
       parent: getting_started_integrations
     - name: Terraform
       identifier: getting_started_with_terraform
       url: getting_started/integrations/terraform/
-      weight: 1204
+      weight: 1304
       parent: getting_started_integrations
     - name: Internal Developer Portal
       identifier: getting_started_internal_developer_portal
       url: getting_started/internal_developer_portal/
       parent: getting_started
-      weight: 13
+      weight: 14
     - name: Logs
       identifier: getting_started_logs
       url: getting_started/logs/
       parent: getting_started
-      weight: 14
+      weight: 15
     - name: Monitors
       identifier: getting_started_monitors
       url: getting_started/monitors/
       parent: getting_started
-      weight: 15
+      weight: 16
     - name: OpenTelemetry
       identifier: getting_started_opentelemetry
       url: getting_started/opentelemetry/
       parent: getting_started
-      weight: 16
+      weight: 17
     - name: Profiler
       identifier: getting_started_profiler
       url: getting_started/profiler/
       parent: getting_started
-      weight: 17
+      weight: 18
     - name: Session Replay
       identifier: getting_started_session_replay
       url: getting_started/session_replay/
       parent: getting_started
-      weight: 18
+      weight: 19
     - name: Security
       identifier: getting_started_security
       url: getting_started/security/
       parent: getting_started
-      weight: 19
+      weight: 20
     - name: App and API Protection
       identifier: getting_started_application_security
       url: getting_started/security/application_security
       parent: getting_started_security
-      weight: 1901
+      weight: 2001
     - name: Cloud Security
       identifier: getting_started_cloud_security_management
       url: getting_started/security/cloud_security_management/
       parent: getting_started_security
-      weight: 1902
+      weight: 2002
     - name: Cloud SIEM
       identifier: getting_started_cloud_siem
       url: getting_started/security/cloud_siem/
       parent: getting_started_security
-      weight: 1903
+      weight: 2003
     - name: Code Security
       identifier: getting_started_code_security
       url: getting_started/code_security/
       parent: getting_started_security
-      weight: 1904
+      weight: 2004
     - name: Serverless for AWS Lambda
       identifier: getting_started_serverless
       url: getting_started/serverless/
       parent: getting_started
-      weight: 20
+      weight: 21
     - name: Software Delivery
       identifier: getting_started_software_delivery
       url: getting_started/software_delivery/
       parent: getting_started
-      weight: 21
+      weight: 22
     - name: CI Visibility
       identifier: getting_started_ci_visibility
       url: getting_started/ci_visibility/
       parent: getting_started_software_delivery
-      weight: 2101
+      weight: 2201
     - name: Test Optimization
       identifier: getting_started_test_optimization
       url: getting_started/test_optimization/
       parent: getting_started_software_delivery
-      weight: 2102
+      weight: 2202
     - name: Test Impact Analysis
       identifier: getting_started_test_impact_analysis
       url: getting_started/test_impact_analysis/
       parent: getting_started_software_delivery
-      weight: 2103
+      weight: 2203
     - name: Synthetic Monitoring and Testing
       identifier: getting_started_synthetics
       url: getting_started/synthetics/
       parent: getting_started
-      weight: 22
+      weight: 23  
     - name: API Tests
       identifier: getting_started_api_test
       url: getting_started/synthetics/api_test
       parent: getting_started_synthetics
-      weight: 2201
+      weight: 2301
     - name: Browser Tests
       identifier: getting_started_browser_test
       url: getting_started/synthetics/browser_test
       parent: getting_started_synthetics
-      weight: 2202
+      weight: 2302
     - name: Mobile App Tests
       identifier: getting_started_mobile_app
       url: getting_started/synthetics/mobile_app_testing
       parent: getting_started_synthetics
-      weight: 2203
+      weight: 2303
     - name: Continuous Testing
       identifier: getting_started_continuous_testing
       url: getting_started/continuous_testing/
       parent: getting_started_synthetics
-      weight: 2204
+      weight: 2304
     - name: Private Locations
       identifier: getting_started_private_location
       url: getting_started/synthetics/private_location
       parent: getting_started_synthetics
-      weight: 2205
+      weight: 2305
     - name: Tags
       identifier: tagging_
       url: getting_started/tagging/

content/en/getting_started/feature_flags/_index.md

@@ -0,0 +1,129 @@
+---
+title: Getting Started with Feature Flags
+further_reading:
+- link: 'https://github.com/DataDog/openfeature-js-client/blob/main/README.md'
+  tag: 'Source Code'
+  text: 'OpenFeature JavaScript client documentation'
+---
+
+## Overview
+
+Datadog feature flags offer a powerful, integrated way to manage feature delivery, with built-in observability and seamless integration across the platform.
+
+* **Real-time metrics:** Understand who's receiving each variant, as well as how your flag impacts the health & performance of your application—all in real time.
+
+* **Supports any data type:** Use Booleans, strings, numbers or full JSON objects—whatever your use case requires.
+
+* **Built for experimentation:** Target specific audiences for A/B tests, roll out features gradually with canary releases, and automatically roll back when regressions are detected.
+
+* **Integration with Datadog:** Out-of-the-box integration with Datadog metrics, change tracking events, and more—no additional instrumentation needed.
+
+* **OpenFeature compatible:** Built on the OpenFeature standard, ensuring compatibility with existing OpenFeature implementations and providing a vendor-neutral approach to feature flag management.
+
+## Configure your environments
+
+Your organization likely already has pre-configured environments for Development, Staging, and Production. If you need to configure these or any other environments, navigate to the [**Environments**][3] page to create tag queries for each environment. You can also identify which environment should be considered a Production environment.
+
+{{< img src="getting_started/feature_flags/environments-list.png" alt="Environments list" style="width:100%;" >}}
+
+## Create your first feature flag
+
+### Step 1: Import and initialize the SDK
+
+First, install `@datadog/openfeature-browser` and `@openfeature/web-sdk` as dependencies in your project:
+
+
+```
+yarn add @datadog/openfeature-browser @openfeature/web-sdk
+```
+
+Then, add the following to your project to initialize the SDK:
+
+```js
+import { DatadogProvider } from '@datadog/openfeature-browser';
+import { OpenFeature } from '@openfeature/web-sdk';
+
+// Initialize the provider
+const provider = new DatadogProvider({
+   clientToken: '<CLIENT_TOKEN>',
+   applicationId: '<APPLICATION_ID>',
+   enableExposureLogging: true,
+   site: 'datadoghq.com',
+   env: '<YOUR_ENV>',
+   service: 'my-service',
+   version: '1.0.0',
+});
+
+// Set the provider
+await OpenFeature.setProvider(provider);
+```
+
+More information about OpenFeature SDK configuration options can be found in its [README][1].
+
+### Step 2: Create a feature flag
+
+Use the [feature flags creation UI][2] to bootstrap your first feature flag. By default, the flag is disabled in all environments.
+
+### Step 3: Evaluate the flag and write feature code
+
+In your application code, use the SDK to evaluate the flag and gate the new feature.
+
+```js
+import { OpenFeature } from '@openfeature/web-sdk';
+
+const client = OpenFeature.getClient();
+
+// If applicable, set relevant attributes on the client's global context
+// (e.g. org id, user email)
+await OpenFeature.setContext({
+   org: { id: 2 },
+   user: { id: 'user-123', email: 'user@example.com' }
+});
+
+// This is what the SDK returns if the flag is disabled in
+// the current environment
+const fallback = false; 
+
+const showFeature = await client.getBooleanValue('show-new-feature', fallback);
+if (showFeature) {
+   // Feature code here
+}
+```
+
+After you've completed this step, redeploy the application to pick up these changes. Additional usage examples can be found in the SDK's [README][1].
+
+### Step 4: Define targeting rules and enable the feature flag
+
+Now that the application is ready to check the value of your flag, you can start adding targeting rules. Targeting rules enable you to define where or to whom to serve different variants of your feature. 
+
+Go to **Feature Flags**, select your flag, then select **Targeting Rules & Rollouts**. Select the environment whose rules you want to modify from the dropdown, and click **Edit Targeting Rules**.
+
+{{< img src="getting_started/feature_flags/ff-targeting-rules-and-rollouts.png" alt="Targeting Rules & Rollouts" style="width:100%;" >}}
+
+### Step 5: Publish the rules in your environments
+
+After saving changes to the targeting rules, publish those rules by enabling your flag in the environment of your choice. 
+
+<div class="alert alert-info">
+As a general best practice, changes should be rolled out in a Staging environment before rolling out in Production.
+</div>
+
+Go to **Targeting Rules & Rollouts > Per environment override**, and select **Use targeting rules** in the dropdown under the environment where you want to enable the rules.
+
+{{< img src="getting_started/feature_flags/publish-targeting-rules.png" alt="Publish targeting rules" style="width:100%;" >}}
+
+The flag serves your targeting rules in this environment. You can continue to edit these targeting rules to control where the variants are served.
+
+### Step 6: Monitor your rollout
+
+Monitor the feature rollout from the feature flag details page, which provides real-time exposure tracking and metrics such as **error rate** and **page load time**. As you incrementally release the feature with the flag, view the **Real-Time Metric Overview** panel in the Datadog UI to see how the feature impacts application performance.
+
+{{< img src="getting_started/feature_flags/real-time-flag-metrics.png" alt="Real-time flag metrics panel" style="width:100%;" >}}
+
+## Further reading
+
+{{< partial name="whats-next/whats-next.html" >}}
+
+[1]: https://github.com/DataDog/openfeature-js-client/blob/main/README.md
+[2]: https://app.datadoghq.com/feature-flags/create
+[3]: https://app.datadoghq.com/feature-flags/environments