add telemetry tutorial for nodejs

Author: zhiyuanliang-ms

articles/azure-app-configuration/TOC.yml

@@ -226,6 +226,8 @@
       href: howto-telemetry.md
     - name: Python
       href: howto-telemetry-python.md
+    - name: JavaScript
+      href: howto-telemetry-javascript.md
 - name: CI/CD integration
   items:
   - name: Use configuration files

articles/azure-app-configuration/howto-telemetry-javascript.md

@@ -11,9 +11,160 @@ ms.date: 06/25/2025
 
 # Enable telemetry for feature flags in a Node.js application
 
-In this tutorial, you use telemetry in your Python application to track feature flag evaluations and custom events. Telemetry allows you to make informed decisions about your feature management strategy. You utilize the feature flag with telemetry enabled created in [Enable telemetry for feature flags](./howto-telemetry.md). Before proceeding, ensure that you create a feature flag named *Greeting* in your Configuration store with telemetry enabled. This tutorial builds on top of [use variant feature flags](./howto-variant-feature-flags-python.md).
+In this tutorial, you use telemetry in your Node.js application to track feature flag evaluations and custom events. Telemetry allows you to make informed decisions about your feature management strategy. You utilize the feature flag with telemetry enabled created in [Enable telemetry for feature flags](./howto-telemetry.md). Before proceeding, ensure that you create a feature flag named *Greeting* in your Configuration store with telemetry enabled. This tutorial builds on top of [Tutorial: Use variant feature flags in a Node.js application](./howto-variant-feature-flags-javascript.md).
 
 ## Prerequisites
 
-- The variant feature flag with telemetry enabled from [Enable telemetry for feature flags](./howto-telemetry.md).
-- The application from [Use variant feature flags](./howto-variant-feature-flags-python.md).
+- [Enable telemetry for feature flags](./howto-telemetry.md).
+- [Tutorial: Use variant feature flags in a Node.js application](./howto-variant-feature-flags-javascript.md).
+
+## Add telemetry to your Node.js application
+
+1. Install the following packages.
+
+    ```bash
+    npm install @microsoft/feature-management-applicationinsights-node
+    ```
+
+1. Open `server.js` and add the following code in the beginning to connect to Application Insights to publish telemetry.
+
+    ```js
+    const appInsightsConnectionString = process.env.APPLICATIONINSIGHTS_CONNECTION_STRING;
+    const applicationInsights = require("applicationinsights");
+    applicationInsights.setup(appInsightsConnectionString).start();
+
+    const express = require("express");
+    const server = express();
+    // existing code ...
+    ```
+
+1. Add the following import.
+
+    ```js
+    const { createTelemetryPublisher, trackEvent } = require("@microsoft/feature-management-applicationinsights-node");
+    ```
+
+1. Create and register the telemetry publisher when initializing the `FeatureManager`.
+
+    ```js
+    // existing code ...
+    const featureFlagProvider = new ConfigurationMapFeatureFlagProvider(appConfig);
+    const publishTelemetry = createTelemetryPublisher(applicationInsights.defaultClient);
+    featureManager = new FeatureManager(featureFlagProvider, {
+        onFeatureEvaluated: publishTelemetry
+    });
+    // existing code ...
+    ```
+
+    The `publishTelemetry` callback will send telemetry data each time a feature flag is evaluated.
+
+1. Track custom events for user interactions. Modify the `/api/like` endpoint to send telemetry data to Application Insights whenever a user likes content. This helps you analyze which feature variants perform better.
+
+    ```js
+    server.post("/api/like", (req, res) => {
+        const { UserId } = req.body;
+        if (UserId === undefined) {
+            return res.status(400).send({ error: "UserId is required" });
+        }
+        trackEvent(applicationInsights.defaultClient, UserId, { name: "Liked" });
+        res.status(200).send();
+    });
+    ```
+
+## Run the application
+
+1. Application insights requires a connection string to connect to your Application Insights resource. Set the `APPLICATIONINSIGHTS_CONNECTION_STRING` environment variable to the connection string for your Application Insights resource.
+
+    ```cmd
+    setx APPLICATIONINSIGHTS_CONNECTION_STRING "applicationinsights-connection-string"
+    ```
+
+    If you use PowerShell, run the following command:
+
+    ```powershell
+    $Env:APPLICATIONINSIGHTS_CONNECTION_STRING = "applicationinsights-connection-string"
+    ```
+
+    If you use macOS or Linux, run the following command:
+
+    ```bash
+    export APPLICATIONINSIGHTS_CONNECTION_STRING='applicationinsights-connection-string'
+    ```
+
+1. Run the application, [see step 4 of Use variant feature flags](./howto-variant-feature-flags-javascript.md#run-the-application).
+
+1. Use 10 different users to visit the application. As you use a different user, you get a different message variant for some of them. ~50% of the time you get no message. 25% of the time you get the message "Hello!" and 25% of the time you get "I hope this makes your day!".
+
+1. With some of the users click the **Like**(heart) button to trigger the telemetry event.
+
+    > [!div class="mx-imgBorder"]
+    > ![Screenshot of the application with like button clicked.](./media/howto-telemetry-javascript/like-button.png)
+
+1. Open your Application Insights resource in the Azure portal and select **Logs** under **Monitoring**. In the query window, run the following query to see the telemetry events:
+
+    ```kusto
+    // Step 1: Get distinct users and their Variant from FeatureEvaluation
+    let evaluated_users =
+        customEvents
+        | where name == "FeatureEvaluation"
+        | extend TargetingId = tostring(customDimensions.TargetingId),
+                Variant = tostring(customDimensions.Variant)
+        | summarize Variant = any(Variant) by TargetingId;
+
+    // Step 2: Get distinct users who emitted a "Like"
+    let liked_users =
+        customEvents
+        | where name == "Liked"
+        | extend TargetingId = tostring(customDimensions.TargetingId)
+        | summarize by TargetingId;
+
+    // Step 3: Join them to get only the evaluated users who also liked
+    let hearted_users =
+        evaluated_users
+        | join kind=inner (liked_users) on TargetingId
+        | summarize HeartedUsers = dcount(TargetingId) by Variant;
+
+    // Step 4: Total evaluated users per variant
+    let total_users =
+        evaluated_users
+        | summarize TotalUsers = dcount(TargetingId) by Variant;
+
+    // Step 5: Combine results
+    let combined_data =
+        total_users
+        | join kind=leftouter (hearted_users) on Variant
+        | extend HeartedUsers = coalesce(HeartedUsers, 0)
+        | extend PercentageHearted = strcat(round(HeartedUsers * 100.0 / TotalUsers, 1), "%")
+        | project Variant, TotalUsers, HeartedUsers, PercentageHearted;
+
+    // Step 6: Add total row
+    let total_sum =
+        combined_data
+        | summarize
+            TotalUsers = sum(TotalUsers),
+            HeartedUsers = sum(HeartedUsers)
+        | extend
+            Variant = "All",
+            PercentageHearted = strcat(round(HeartedUsers * 100.0 / TotalUsers, 1), "%")
+        | project Variant, TotalUsers, HeartedUsers, PercentageHearted;
+
+    // Step 7: Output
+    combined_data
+    | union (total_sum)
+    ```
+
+    > [!div class="mx-imgBorder"]
+    > ![Screenshot of Application Insights showing the results table with four rows; All, Simple, Long, and None with their respective user counts and percentages.](./media/howto-telemetry-javascript/telemetry-results.png)
+
+    You see one "FeatureEvaluation" for each time the quote page was loaded and one "Liked" event for each time the like button was clicked. The "FeatureEvaluation" event have a custom property called `FeatureName` with the name of the feature flag that was evaluated. Both events have a custom property called `TargetingId` with the name of the user that liked the quote.
+
+## Additional resources
+
+- [Quote of the Day sample](https://github.com/Azure-Samples/quote-of-the-day-javascript)
+
+## Next steps
+
+For the full feature rundown of the JavaScript feature management library, refer to the following document.
+
+> [!div class="nextstepaction"]
+> [JavaScript Feature Management](./feature-management-javascript-reference.md)

articles/azure-app-configuration/howto-telemetry-python.md

@@ -11,12 +11,12 @@ ms.date: 05/06/2025
 
 # Enable telemetry for feature flags in a Python application
 
-In this tutorial, you use telemetry in your Python application to track feature flag evaluations and custom events. Telemetry allows you to make informed decisions about your feature management strategy. You utilize the feature flag with telemetry enabled created in [Enable telemetry for feature flags](./howto-telemetry.md). Before proceeding, ensure that you create a feature flag named *Greeting* in your Configuration store with telemetry enabled. This tutorial builds on top of [use variant feature flags](./howto-variant-feature-flags-python.md).
+In this tutorial, you use telemetry in your Python application to track feature flag evaluations and custom events. Telemetry allows you to make informed decisions about your feature management strategy. You utilize the feature flag with telemetry enabled created in [Enable telemetry for feature flags](./howto-telemetry.md). Before proceeding, ensure that you create a feature flag named *Greeting* in your Configuration store with telemetry enabled. This tutorial builds on top of [Tutorial: Use variant feature flags in a Python application](./howto-variant-feature-flags-python.md).
 
 ## Prerequisites
 
 - The variant feature flag with telemetry enabled from [Enable telemetry for feature flags](./howto-telemetry.md).
-- The application from [Use variant feature flags](./howto-variant-feature-flags-python.md).
+- The application from [Tutorial: Use variant feature flags in a Python application](./howto-variant-feature-flags-python.md).
 
 ## Add telemetry to your Python application
 
@@ -105,46 +105,64 @@ In this tutorial, you use telemetry in your Python application to track feature
     export APPLICATIONINSIGHTS_CONNECTION_STRING='applicationinsights-connection-string'
     ```
 
-1. Run the application, [see step 2 of Use variant feature flags](./howto-variant-feature-flags-python.md#build-and-run-the-app) .
+1. Run the application, [see step 2 of Use variant feature flags](./howto-variant-feature-flags-python.md#build-and-run-the-app).
+
 1. Create 10 different users and log into the application. As you log in with each user, you get a different message variant for some of them. ~50% of the time you get no message. 25% of the time you get the message "Hello!" and 25% of the time you get "I hope this makes your day!".
+
 1. With some of the users select the **Like** button to trigger the telemetry event.
+
 1. Open your Application Insights resource in the Azure portal and select **Logs** under **Monitoring**. In the query window, run the following query to see the telemetry events:
 
     ```kusto
-    // Total users
-    let total_users =
+    // Step 1: Get distinct users and their Variant from FeatureEvaluation
+    let evaluated_users =
         customEvents
         | where name == "FeatureEvaluation"
-        | summarize TotalUsers = count() by Variant = tostring(customDimensions.Variant);
-    
-    // Hearted users
-    let hearted_users =
+        | extend TargetingId = tostring(customDimensions.TargetingId),
+                Variant = tostring(customDimensions.Variant)
+        | summarize Variant = any(Variant) by TargetingId;
+
+    // Step 2: Get distinct users who emitted a "Like"
+    let liked_users =
         customEvents
-        | where name == "FeatureEvaluation"
+        | where name == "Liked"
         | extend TargetingId = tostring(customDimensions.TargetingId)
-        | join kind=inner (
-            customEvents
-            | where name == "Liked"
-            | extend TargetingId = tostring(customDimensions.TargetingId)
-        ) on TargetingId
-        | summarize HeartedUsers = count() by Variant = tostring(customDimensions.Variant);
-    
-    // Calculate the percentage of hearted users over total users
+        | summarize by TargetingId;
+
+    // Step 3: Join them to get only the evaluated users who also liked
+    let hearted_users =
+        evaluated_users
+        | join kind=inner (liked_users) on TargetingId
+        | summarize HeartedUsers = dcount(TargetingId) by Variant;
+
+    // Step 4: Total evaluated users per variant
+    let total_users =
+        evaluated_users
+        | summarize TotalUsers = dcount(TargetingId) by Variant;
+
+    // Step 5: Combine results
     let combined_data =
         total_users
         | join kind=leftouter (hearted_users) on Variant
         | extend HeartedUsers = coalesce(HeartedUsers, 0)
         | extend PercentageHearted = strcat(round(HeartedUsers * 100.0 / TotalUsers, 1), "%")
         | project Variant, TotalUsers, HeartedUsers, PercentageHearted;
-    
-    // Calculate the sum of total users and hearted users of all variants
+
+    // Step 6: Add total row
     let total_sum =
         combined_data
-        | summarize Variant="All", TotalUsers = sum(TotalUsers), HeartedUsers = sum(HeartedUsers);
-    
-    // Display the combined data along with the sum of total users and hearted users
+        | summarize
+            TotalUsers = sum(TotalUsers),
+            HeartedUsers = sum(HeartedUsers)
+        | extend
+            Variant = "All",
+            PercentageHearted = strcat(round(HeartedUsers * 100.0 / TotalUsers, 1), "%")
+        | project Variant, TotalUsers, HeartedUsers, PercentageHearted;
+
+    // Step 7: Output
     combined_data
     | union (total_sum)
+
     ```
 
     > [!div class="mx-imgBorder"]

articles/azure-app-configuration/howto-variant-feature-flags-python.md

@@ -11,7 +11,7 @@ ms.topic: how-to
 ms.date: 05/06/2025
 ---
 
-# Use variant feature flags in a Python application
+# Tutorial: Use variant feature flags in a Python application
 
 In this tutorial, you use a variant feature flag to manage experiences for different user segments in an example application, *Quote of the Day*. You utilize the variant feature flag created in [How to variant feature flags](./howto-variant-feature-flags.md). Before proceeding, ensure you create the variant feature flag named *Greeting* in your App Configuration store.