diff --git a/docs/product/explore/metrics/metrics-examples.mdx b/docs/product/explore/metrics/metrics-examples.mdx
index f36b4522b8b0b..42147cb608aa1 100644
--- a/docs/product/explore/metrics/metrics-examples.mdx
+++ b/docs/product/explore/metrics/metrics-examples.mdx
@@ -5,74 +5,61 @@ description: "Get some inspiration by browsing through example use cases for cus
 ---
 
 If you're not sure where to start, here are a few examples of how you can use custom metrics.
+To track something using
 
 ## Frontend Examples
 
 <details open>
   <summary>Count button clicks on subpages</summary>
 
-  * Metric type: `counter`
+  * Aggregation: `count`
   * Example JavaScript code:
 
   ```JavaScript
-  Sentry.metrics.increment("button_click", 1, {
-    tags: { browser: "Firefox", subpage: "signup" }
-  });
+  Sentry.startSpan({ name: "mySpan"}, (span) => {
+    span.setAttributes({
+   ”button_click”: 1,
+   browser: "Firefox",
+   subpage: "signup",
+    });
+  }
   ```
-</details>
-
-<details>
-  <summary>Track number of user signups</summary>
 
-  * Metric type: `counter`
-  * Example JavaScript code:
+  * Example
 
-  ```JavaScript
-  Sentry.metrics.increment("signups", 1, {
-    tags: { plan_type: “freemium”, region: "EU" }
-  });
-  ```
 </details>
 
 <details>
-  <summary>Measure UX improvement to signup form</summary>
+  <summary>Track number of user signups</summary>
 
-  * Metric type: `distribution`
+  * Metric type: `count`
   * Example JavaScript code:
 
   ```JavaScript
-  Sentry.metrics.distribution("login.time_to_finish_form", 14.3, {
-   tags: { subpage: “signup” },
-   unit: “second”
+  const span = Sentry.startInactiveSpan({name: “mySpan”});
+    span.setAttributes({
+    ”signups”: 1,
+    “plan_type”: “freemium”,
+    region: "EU",
   });
+  span.end()
   ```
 </details>
 
 <details>
-  <summary>Track the loading time for a component</summary>
+  <summary>Measure UX improvement to signup form</summary>
 
   * Metric type: `distribution`
   * Example JavaScript code:
 
   ```JavaScript
-  Sentry.metrics.distribution("component_load_time", 15.0, {
-   tags: { type: "important" },
-   unit: "millisecond"
-  });
-  ```
-</details>
 
-<details>
-  <summary>Track API request payloads</summary>
-
-  * Metric type: `distribution`
-  * Example JavaScript code:
-
-  ```JavaScript
-  Sentry.metrics.distribution("api_request_payload", 136.3, {
-    tags: { api_name: “maps_provider”, subpage: “signup” },
-    unit: “kilobyte”
-  });
+  Sentry.startSpan({ name: "mySpan"}, (span) => {
+    span.setAttributes({
+   ”login.time_to_finish_form”: 14.3,
+   subpage: "signup",
+    });
+  }
   ```
 </details>
 
@@ -83,22 +70,12 @@ If you're not sure where to start, here are a few examples of how you can use cu
   * Example JavaScript code:
 
   ```JavaScript
-  Sentry.metrics.gauge("concurrent_users", 10, {
-   tags: { browser: "Firefox" }
-  });
-  ```
-</details>
-
-<details>
-  <summary>Track the number of items in a shopping cart</summary>
-
-  * Metric type: `gauge`
-  * Example JavaScript code:
-
-  ```JavaScript
-  Sentry.metrics.gauge("shopping_cart_item_count", itemCount, {
-   tags: { platform: "web" }
-  });
+  Sentry.startSpan({ name: "mySpan"}, (span) => {
+   span.setAttributes({
+     ”concurrent_users”: 10,
+     browser: "firefox",
+   });
+ }
   ```
 </details>
 
@@ -109,27 +86,16 @@ If you're not sure where to start, here are a few examples of how you can use cu
   * Example JavaScript code:
 
   ```JavaScript
-  Sentry.metrics.set("user_view", "jane", {
-   tags: {"page": "/home" }
-  });
-  ```
-</details>
-
-<details>
-  <summary>Count unique number of user sessions</summary>
-
-  * Metric type: `set`
-  * Example JavaScript code:
-
-  ```JavaScript
-  Sentry.metrics.set("unique_active_sessions", sessionId, {
-   tags: { platform: "mobile" }
-  });
+  Sentry.startSpan({ name: "mySpan"}, (span) => {
+   span.setAttributes({
+     ”user_view”: “jane”,
+     page: "home",
+   });
+ }
   ```
 </details>
 
 
-
 ## Backend Examples
 
 <details open>