diff --git a/frontend/src/component/admin/users/LinkField/LinkField.tsx b/frontend/src/component/admin/users/LinkField/LinkField.tsx index d58f22ce8b8..101266f691a 100644 --- a/frontend/src/component/admin/users/LinkField/LinkField.tsx +++ b/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(); diff --git a/frontend/src/component/executiveDashboard/components/DashboardHeader/ShareLink/ShareLink.tsx b/frontend/src/component/executiveDashboard/components/DashboardHeader/ShareLink/ShareLink.tsx index edc614e3d63..2d9053278e4 100644 --- a/frontend/src/component/executiveDashboard/components/DashboardHeader/ShareLink/ShareLink.tsx +++ b/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'; -export const ShareLink: VFC = () => { - const [isOpen, setIsOpen] = useState(false); +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 [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. diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index e72ca4793ac..6ffa71b96e7 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/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);