feat: add more tracking docs

content/en/patterns/content-management/carousel.mdx

@@ -279,6 +279,16 @@ To ensure consistent tracking, here’s a recommended event format:
 }
 ```
 
+### Key Metrics to Analyze
+
+Once tracking is in place, the following metrics provide actionable insights:
+
+- Engagement Rate → Percentage of users who interact with the carousel.
+- Slide Completion Rate → Percentage of users who view all slides.
+- Drop-off Rate → Percentage of users who only see the first slide before leaving.
+- Click-Through Rate (CTR) → Percentage of users clicking on any slide.
+- Auto-Play Pause Rate → How often users stop auto-rotation (if enabled).
+
 ### Insights & Optimization Based on Tracking
 
 By analyzing tracking data, we can optimize the carousel experience:

content/en/patterns/content-management/modal.mdx

@@ -204,6 +204,76 @@ graph TD
 - Avoid modal heights that extend beyond the viewport if possible
 - Don't make modals so narrow that the content becomes unnecessarily constrained
 
+## Tracking
+
+Tracking modal interactions helps measure engagement, detect usability issues, and optimize how modals contribute to user workflows. By capturing key actions, we can determine whether modals improve the user experience or create friction.
+
+### Key Tracking Points
+
+Each modal interaction provides valuable insights into user behavior. Below are the key events that should be tracked:
+
+| **Event Name**                 | **Description**                                                                          | **Why Track It?**                                                      |
+| ------------------------------ | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| `modal.view`                   | When the modal first appears on the screen.                                              | Helps measure how often users encounter the modal.                     |
+| `modal.open`                   | When a user manually opens the modal (e.g., by clicking a button).                       | Measures user-initiated engagement.                                    |
+| `modal.auto_open`              | When the modal opens automatically (e.g., a pop-up triggered by page behavior).          | Helps track modal effectiveness vs. annoyance.                         |
+| `modal.close`                  | When a user closes the modal (by clicking an "X", pressing Escape, or clicking outside). | Identifies how users dismiss the modal.                                |
+| `modal.dismiss_without_action` | When a user closes the modal without interacting with any content inside it.             | Indicates if the modal is irrelevant or intrusive.                     |
+| `modal.primary_action`         | When a user clicks the **primary CTA** (e.g., "Submit", "Confirm", "Continue").          | Tracks conversion and engagement with modal content.                   |
+| `modal.secondary_action`       | When a user clicks a **secondary action** (e.g., "Cancel", "Learn More", "Skip").        | Measures alternative user behaviors.                                   |
+| `modal.interaction_time`       | The time a user spends interacting with the modal before closing.                        | Helps determine if users are engaging with the content or ignoring it. |
+
+### Event Payload Structure
+
+To ensure consistent tracking, here’s a recommended event format:
+
+```json
+{
+  "event": "modal.primary_action",
+  "properties": {
+    "modal_id": "newsletter_signup",
+    "action_label": "Subscribe",
+    "interaction_time": 5.2 // in seconds
+  }
+}
+```
+
+### Key Metrics to Analyze
+
+Once tracking is in place, the following metrics provide actionable insights:
+
+- Open Rate → Percentage of users who see the modal (manual vs. auto-open).
+- Engagement Rate → Percentage of users who interact with the modal before closing.
+- Dismissal Rate → Percentage of users who close the modal without taking any action.
+- Completion Rate → Percentage of users who complete the modal’s primary action.
+- Time in Modal → Average time users spend inside the modal.
+
+### Insights & Optimization Based on Tracking
+
+By analyzing tracking data, we can optimize the modal experience:
+
+- 🚨 **High Dismissal Rate?**
+  → Users may find the modal intrusive or irrelevant.
+  **Optimization:** Adjust the timing, trigger conditions, or placement to make it feel more contextual.
+
+- ⏳ **Low Interaction Time?**
+  → Users may not be reading the content or may be overwhelmed.
+  **Optimization:** Simplify the message, use bullet points, or reduce the amount of required input.
+
+- 📉 **Low Completion Rate?**
+  → The primary action may not be compelling enough.
+  **Optimization:** Improve CTA wording, adjust positioning, or offer better incentives.
+
+- ⚡ **High "Escape Key" or Click Outside Dismissals?**
+  → Users may instinctively close the modal without engaging.
+  **Optimization:** Ensure the modal provides clear value upfront and isn't disrupting the user's flow.
+
+- 🔄 **High Auto-Open Close Rate?**
+  → If most users dismiss auto-open modals immediately, they may be perceived as annoying.
+  **Optimization:** Make them **manual-triggered only**, delay their appearance, or ensure they are only shown when truly relevant.
+
+By continuously monitoring these metrics, we can refine the modal’s effectiveness and ensure it enhances, rather than disrupts, the user experience.
+
 ## Code Examples
 
 ### Method 1: Basic Implementation

content/en/patterns/content-management/tooltip.mdx

@@ -204,6 +204,75 @@ graph TD
 - **Avoid excessive event listeners** that degrade performance.
 - **Don't trigger tooltips on every mouse movement**—use `mouseenter` instead of `mousemove`.
 
+## Tracking
+
+Tracking tooltip interactions helps measure their effectiveness, determine whether users find them useful, and identify potential usability issues. By analyzing tooltip engagement, we can assess whether tooltips enhance comprehension or if users ignore them.
+
+### Key Tracking Points
+
+Each tooltip interaction provides valuable insights into user behavior. Below are the key events that should be tracked:
+
+| **Event Name**             | **Description**                                                       | **Why Track It?**                                   |
+| -------------------------- | --------------------------------------------------------------------- | --------------------------------------------------- |
+| `tooltip.view`             | When the tooltip first appears (hover, focus, or auto-triggered).     | Determines how often users see tooltips.            |
+| `tooltip.auto_open`        | When a tooltip appears automatically without user action.             | Helps assess if tooltips are too intrusive.         |
+| `tooltip.hover_open`       | When a user opens a tooltip by hovering over a trigger element.       | Tracks hover-based interactions.                    |
+| `tooltip.focus_open`       | When a tooltip opens via keyboard focus.                              | Ensures accessibility engagement is measured.       |
+| `tooltip.click_open`       | When a tooltip opens via a user click (if applicable).                | Measures intentional user engagement.               |
+| `tooltip.close`            | When a tooltip is dismissed (moving cursor away, pressing Esc, etc.). | Tracks how users exit tooltips.                     |
+| `tooltip.interaction_time` | The time a user spends viewing the tooltip before closing it.         | Helps determine if tooltips are helpful or ignored. |
+
+### Event Payload Structure
+
+To ensure consistent tracking, here’s a recommended event format:
+
+```json
+{
+  "event": "tooltip.view",
+  "properties": {
+    "tooltip_id": "form_help_email",
+    "trigger_method": "hover", // or "focus", "click", "auto"
+    "interaction_time": 2.8 // in seconds
+  }
+}
+```
+
+### Key Metrics to Analyze
+
+Once tracking is in place, the following metrics provide actionable insights:
+
+- Tooltip View Rate → Percentage of users who trigger a tooltip.
+- Hover vs. Focus Activation Rate → Compares how users open tooltips (mouse vs. keyboard).
+- Dismissal Rate → Percentage of users who close the tooltip quickly.
+- Average Interaction Time → How long users keep the tooltip open.
+- Repeated Views Per User → Indicates if users need repeated clarification.
+
+### Insights & Optimization Based on Tracking
+
+By analyzing tracking data, we can optimize tooltip behavior:
+
+- 🚨 **Low Tooltip View Rate?**
+  → Users might not notice tooltips or may not need them.
+  **Optimization:** Ensure triggers are visually clear, adjust placement, or test if an inline explanation is more effective.
+
+- ⏳ **Short Interaction Time?**
+  → Users might be dismissing tooltips too quickly without reading them.
+  **Optimization:** Simplify content, increase font size, or extend the display duration before auto-hiding.
+
+- 📉 **High Dismissal Rate?**
+  → Tooltips may be appearing at the wrong time, covering important content, or distracting users.
+  **Optimization:** Adjust positioning, delay appearance, or use persistent inline text instead of a tooltip.
+
+- 🎯 **Low Focus Activation Rate?**
+  → Keyboard users may struggle to access tooltips, indicating accessibility issues.
+  **Optimization:** Ensure proper **ARIA attributes** (`aria-describedby`), focus management, and keyboard navigation support.
+
+- 🔄 **Frequent Repeated Views?**
+  → Users may not fully understand the tooltip content.
+  **Optimization:** Improve clarity, rewrite text concisely, or add supporting visuals like icons or links to more detailed help content.
+
+By continuously monitoring these metrics, we can refine tooltip usability and ensure they provide **real value** rather than unnecessary friction.
+
 ## Code Examples
 
 ### Basic Implementation