feat: add plausible to integrations (#4647)

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