feat: insights share events (#6480)

Figure out how many people are using and sharing insights in Beta.


https://linear.app/unleash/issue/1-2145/track-number-of-opened-share-links

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
Co-authored-by: andreas-unleash <andreas@getunleash.ai>

frontend/src/component/admin/users/LinkField/LinkField.tsx

@@ -7,6 +7,7 @@ interface ILinkFieldProps {
     small?: boolean;
     successTitle?: string;
     errorTitle?: string;
+    onCopy?: () => void;
 }
 
 export const LinkField = ({
@@ -14,6 +15,7 @@ export const LinkField = ({
     small,
     successTitle = 'Successfully copied invite link.',
     errorTitle = 'Could not copy invite link.',
+    onCopy,
 }: ILinkFieldProps) => {
     const { setToastData } = useToast();
 
@@ -32,6 +34,7 @@ export const LinkField = ({
                         type: 'success',
                         title: successTitle,
                     });
+                    onCopy?.();
                 })
                 .catch(() => {
                     setError();

frontend/src/component/executiveDashboard/components/DashboardHeader/ShareLink/ShareLink.tsx

@@ -1,13 +1,45 @@
-import { VFC, useState } from 'react';
+import { VFC, useEffect, useState } from 'react';
 import Share from '@mui/icons-material/Share';
 import { Box, Button, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { LinkField } from 'component/admin/users/LinkField/LinkField';
+import { useSearchParams } from 'react-router-dom';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+
+const createShareLink = () => {
+    const url = new URL(window.location.href);
+    url.searchParams.set('share', 'true');
+    return url.toString();
+};
 
 export const ShareLink: VFC = () => {
     const [isOpen, setIsOpen] = useState(false);
-    const url = new URL(window.location.href);
-    url.searchParams.set('share', 'true');
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { trackEvent } = usePlausibleTracker();
+
+    useEffect(() => {
+        if (searchParams.get('share')) {
+            // Remove share query param from URL
+            setSearchParams((params) => {
+                params.delete('share');
+                return params;
+            });
+
+            trackEvent('insights-share', {
+                props: {
+                    eventType: 'link-opened',
+                },
+            });
+        }
+    }, [searchParams]);
+
+    const onCopyEvent = () => {
+        trackEvent('insights-share', {
+            props: {
+                eventType: 'link-copied',
+            },
+        });
+    };
 
     return (
         <>
@@ -30,9 +62,10 @@ export const ShareLink: VFC = () => {
                         currently selected filter.
                     </Typography>
                     <LinkField
-                        inviteLink={url.toString()}
+                        inviteLink={createShareLink()}
                         successTitle='Successfully copied the link.'
                         errorTitle='Could not copy the link.'
+                        onCopy={onCopyEvent}
                     />
                 </Box>
             </Dialogue>

frontend/src/hooks/usePlausibleTracker.ts

@@ -57,7 +57,8 @@ export type CustomEvents =
     | 'feedback'
     | 'feature-metrics'
     | 'search-bar'
-    | 'sdk-reporting';
+    | 'sdk-reporting'
+    | 'insights-share';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);