Add telemetry for marketplace tab views and install clicks (#4781)

Author: mrubens

packages/types/npm/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@roo-code/types",
-	"version": "1.26.0",
+	"version": "1.27.0",
 	"description": "TypeScript type definitions for Roo Code.",
 	"publishConfig": {
 		"access": "public",

packages/types/src/telemetry.ts

@@ -43,6 +43,8 @@ export enum TelemetryEventName {
 
 	MARKETPLACE_ITEM_INSTALLED = "Marketplace Item Installed",
 	MARKETPLACE_ITEM_REMOVED = "Marketplace Item Removed",
+	MARKETPLACE_TAB_VIEWED = "Marketplace Tab Viewed",
+	MARKETPLACE_INSTALL_BUTTON_CLICKED = "Marketplace Install Button Clicked",
 
 	SCHEMA_VALIDATION_ERROR = "Schema Validation Error",
 	DIFF_APPLICATION_ERROR = "Diff Application Error",

webview-ui/src/App.tsx

@@ -8,6 +8,7 @@ import { MarketplaceViewStateManager } from "./components/marketplace/Marketplac
 
 import { vscode } from "./utils/vscode"
 import { telemetryClient } from "./utils/TelemetryClient"
+import { TelemetryEventName } from "@roo-code/types"
 import { ExtensionStateContextProvider, useExtensionState } from "./context/ExtensionStateContext"
 import ChatView, { ChatViewRef } from "./components/chat/ChatView"
 import HistoryView from "./components/history/HistoryView"
@@ -144,6 +145,13 @@ const App = () => {
 	// Tell the extension that we are ready to receive messages.
 	useEffect(() => vscode.postMessage({ type: "webviewDidLaunch" }), [])
 
+	// Track marketplace tab views
+	useEffect(() => {
+		if (tab === "marketplace" && experiments.marketplace) {
+			telemetryClient.capture(TelemetryEventName.MARKETPLACE_TAB_VIEWED)
+		}
+	}, [tab, experiments.marketplace])
+
 	if (!didHydrateState) {
 		return null
 	}

webview-ui/src/components/marketplace/components/MarketplaceItemCard.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from "react"
-import { MarketplaceItem } from "@roo-code/types"
+import { MarketplaceItem, TelemetryEventName } from "@roo-code/types"
 import { vscode } from "@/utils/vscode"
+import { telemetryClient } from "@/utils/TelemetryClient"
 import { ViewState } from "../MarketplaceViewStateManager"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { isValidUrl } from "../../../utils/url"
@@ -43,6 +44,13 @@ export const MarketplaceItemCard: React.FC<MarketplaceItemCardProps> = ({ item,
 	const isInstalled = isInstalledGlobally || isInstalledInProject
 
 	const handleInstallClick = () => {
+		// Send telemetry for install button click
+		telemetryClient.capture(TelemetryEventName.MARKETPLACE_INSTALL_BUTTON_CLICKED, {
+			itemId: item.id,
+			itemType: item.type,
+			itemName: item.name,
+		})
+
 		// Show modal for all item types (MCP and modes)
 		setShowInstallModal(true)
 	}