diff --git a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/SDKs.ts b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/SDKs.ts index bd6e02f90a7c..85a2c99add6e 100644 --- a/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/SDKs.ts +++ b/frontend/src/component/integrations/IntegrationList/AvailableIntegrations/SDKs.ts @@ -37,21 +37,21 @@ export const OFFICIAL_SDKS: Sdk[] = [ }, { name: 'python', - displayName: 'Python SDK', + displayName: 'Python SDK', description: 'Officially Unleash Client for Python', documentationUrl: 'https://docs.getunleash.io/reference/sdks/python', type: 'server', }, { name: 'ruby', - displayName: 'Ruby SDK', + displayName: 'Ruby SDK', description: 'Officially Unleash Client for Ruby', documentationUrl: 'https://docs.getunleash.io/reference/sdks/ruby', type: 'server', }, { name: 'rust', - displayName: 'Rust SDK', + displayName: 'Rust SDK', description: 'Officially Unleash Client for Rust', documentationUrl: 'https://docs.getunleash.io/reference/sdks/rust', type: 'server', @@ -80,14 +80,14 @@ export const OFFICIAL_SDKS: Sdk[] = [ }, { name: 'ios', - displayName: 'iOS Proxy SDK', + displayName: 'iOS Proxy SDK', description: 'Officially Unleash Client for iOS', documentationUrl: 'https://docs.getunleash.io/reference/sdks/ios-proxy', type: 'client', }, { name: 'javascript', - displayName: 'Javascript Proxy SDK', + displayName: 'Javascript Proxy SDK', description: 'Officially Unleash Client for Javascript', documentationUrl: 'https://docs.getunleash.io/reference/sdks/javascript-browser', @@ -95,14 +95,14 @@ export const OFFICIAL_SDKS: Sdk[] = [ }, { name: 'react', - displayName: 'React Proxy SDK', + displayName: 'React Proxy SDK', description: 'Officially Unleash Client for React', documentationUrl: 'https://docs.getunleash.io/reference/sdks/react', type: 'client', }, { name: 'svelte', - displayName: 'Svelte Proxy SDK', + displayName: 'Svelte Proxy SDK', description: 'Officially Unleash Client for Svelte', documentationUrl: 'https://docs.getunleash.io/reference/sdks/svelte', type: 'client', diff --git a/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx b/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx index 4c2f9466fc87..ad867120e801 100644 --- a/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx +++ b/frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx @@ -50,7 +50,6 @@ export const ConfiguredIntegrations: VFC = ({ title={providerConfig?.displayName || provider} isEnabled={enabled} description={description || ''} - isConfigured link={`/integrations/edit/${id}`} /> ); diff --git a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx index fa3ff33e0458..db157e8c5840 100644 --- a/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx +++ b/frontend/src/component/integrations/IntegrationList/IntegrationCard/IntegrationCard.tsx @@ -8,13 +8,13 @@ import { Badge } from 'component/common/Badge/Badge'; import { IntegrationCardMenu } from './IntegrationCardMenu/IntegrationCardMenu'; import type { AddonSchema } from 'openapi'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; interface IIntegrationCardProps { id?: string | number; icon?: string; title: string; description?: string; - isConfigured?: boolean; isEnabled?: boolean; configureActionText?: string; link: string; @@ -87,8 +87,18 @@ export const IntegrationCard: VFC = ({ deprecated, isExternal = false, }) => { + const { trackEvent } = usePlausibleTracker(); const isConfigured = addon !== undefined; + const handleClick = () => { + trackEvent('open-integration', { + props: { + integrationName: title, + isConfigured: isConfigured, + }, + }); + }; + const content = ( <> @@ -136,11 +146,20 @@ export const IntegrationCard: VFC = ({ if (isExternal) { return ( - + {content} ); } else { - return {content}; + return ( + + {content} + + ); } }; diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index 4e8581e2d415..1540504afb25 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -44,7 +44,8 @@ export type CustomEvents = | 'playground' | 'feature-type-edit' | 'strategy-variants' - | 'search-filter-suggestions'; + | 'search-filter-suggestions' + | 'open-integration'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext);