feat: add plausible to integrations (#4647)

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',

frontend/src/component/integrations/IntegrationList/ConfiguredIntegrations/ConfiguredIntegrations.tsx

@@ -50,7 +50,6 @@ export const ConfiguredIntegrations: VFC<ConfiguredIntegrationsProps> = ({
                                 title={providerConfig?.displayName || provider}
                                 isEnabled={enabled}
                                 description={description || ''}
-                                isConfigured
                                 link={`/integrations/edit/${id}`}
                             />
                         );

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<IIntegrationCardProps> = ({
     deprecated,
     isExternal = false,
 }) => {
+    const { trackEvent } = usePlausibleTracker();
     const isConfigured = addon !== undefined;
 
+    const handleClick = () => {
+        trackEvent('open-integration', {
+            props: {
+                integrationName: title,
+                isConfigured: isConfigured,
+            },
+        });
+    };
+
     const content = (
         <>
             <StyledHeader>
@@ -136,11 +146,20 @@ export const IntegrationCard: VFC<IIntegrationCardProps> = ({
 
     if (isExternal) {
         return (
-            <StyledAnchor href={link} target="_blank" rel="noreferrer">
+            <StyledAnchor
+                href={link}
+                target="_blank"
+                rel="noreferrer"
+                onClick={handleClick}
+            >
                 {content}
             </StyledAnchor>
         );
     } else {
-        return <StyledLink to={link}>{content}</StyledLink>;
+        return (
+            <StyledLink to={link} onClick={handleClick}>
+                {content}
+            </StyledLink>
+        );
     }
 };

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);