From 5ce7018aa3695c15e8832b1a0a241009a5330d3a Mon Sep 17 00:00:00 2001
From: Lenny Chen <lenny.chen@temporal.io>
Date: Mon, 22 Jun 2026 11:54:49 -0700
Subject: [PATCH] Add analytics tracking to IntegrationsGrid component

Add data-analytics-* attributes to track user interactions:
- Card clicks (integration name)
- Filter pill toggles (SDK and tag, with value)
- Search input usage
---
 src/components/IntegrationsGrid/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/IntegrationsGrid/index.tsx b/src/components/IntegrationsGrid/index.tsx
index 1125b52e5f..707af4bd92 100644
--- a/src/components/IntegrationsGrid/index.tsx
+++ b/src/components/IntegrationsGrid/index.tsx
@@ -82,6 +82,8 @@ function IntegrationCard({ item }: { item: Integration }) {
       to={item.href}
       className={styles.card}
       {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+      data-analytics-id={`integrations-card-${item.name}`}
+      data-analytics-action="click"
     >
       <div className={styles.cardHeader}>
         <h3 className={styles.cardName}>
@@ -146,7 +148,7 @@ export default function IntegrationsGrid({
   }, [query, filters]);
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} data-analytics-component="integrations-grid">
       <div className={styles.searchWrapper}>
         <span className={styles.searchIcon}>
           <SearchIcon />
@@ -158,6 +160,8 @@ export default function IntegrationsGrid({
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           aria-label="Search integrations"
+          data-analytics-id="integrations-search"
+          data-analytics-action="input"
         />
       </div>
 
@@ -177,6 +181,8 @@ export default function IntegrationsGrid({
                   setFilters((f) => ({ ...f, [key]: toggleIn(f[key], value) }))
                 }
                 aria-pressed={filters[key].includes(value)}
+                data-analytics-id={`integrations-filter-${key}-${value}`}
+                data-analytics-action="click"
               >
                 {value}
               </button>