mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-09 01:17:06 +02:00
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>
This commit is contained in:
parent
570af43615
commit
d35ae7827f
@ -7,6 +7,7 @@ interface ILinkFieldProps {
|
|||||||
small?: boolean;
|
small?: boolean;
|
||||||
successTitle?: string;
|
successTitle?: string;
|
||||||
errorTitle?: string;
|
errorTitle?: string;
|
||||||
|
onCopy?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LinkField = ({
|
export const LinkField = ({
|
||||||
@ -14,6 +15,7 @@ export const LinkField = ({
|
|||||||
small,
|
small,
|
||||||
successTitle = 'Successfully copied invite link.',
|
successTitle = 'Successfully copied invite link.',
|
||||||
errorTitle = 'Could not copy invite link.',
|
errorTitle = 'Could not copy invite link.',
|
||||||
|
onCopy,
|
||||||
}: ILinkFieldProps) => {
|
}: ILinkFieldProps) => {
|
||||||
const { setToastData } = useToast();
|
const { setToastData } = useToast();
|
||||||
|
|
||||||
@ -32,6 +34,7 @@ export const LinkField = ({
|
|||||||
type: 'success',
|
type: 'success',
|
||||||
title: successTitle,
|
title: successTitle,
|
||||||
});
|
});
|
||||||
|
onCopy?.();
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
setError();
|
setError();
|
||||||
|
@ -1,13 +1,45 @@
|
|||||||
import { VFC, useState } from 'react';
|
import { VFC, useEffect, useState } from 'react';
|
||||||
import Share from '@mui/icons-material/Share';
|
import Share from '@mui/icons-material/Share';
|
||||||
import { Box, Button, Typography } from '@mui/material';
|
import { Box, Button, Typography } from '@mui/material';
|
||||||
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
import { Dialogue } from 'component/common/Dialogue/Dialogue';
|
||||||
import { LinkField } from 'component/admin/users/LinkField/LinkField';
|
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 = () => {
|
export const ShareLink: VFC = () => {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const url = new URL(window.location.href);
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
url.searchParams.set('share', 'true');
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -30,9 +62,10 @@ export const ShareLink: VFC = () => {
|
|||||||
currently selected filter.
|
currently selected filter.
|
||||||
</Typography>
|
</Typography>
|
||||||
<LinkField
|
<LinkField
|
||||||
inviteLink={url.toString()}
|
inviteLink={createShareLink()}
|
||||||
successTitle='Successfully copied the link.'
|
successTitle='Successfully copied the link.'
|
||||||
errorTitle='Could not copy the link.'
|
errorTitle='Could not copy the link.'
|
||||||
|
onCopy={onCopyEvent}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
</Dialogue>
|
</Dialogue>
|
||||||
|
@ -57,7 +57,8 @@ export type CustomEvents =
|
|||||||
| 'feedback'
|
| 'feedback'
|
||||||
| 'feature-metrics'
|
| 'feature-metrics'
|
||||||
| 'search-bar'
|
| 'search-bar'
|
||||||
| 'sdk-reporting';
|
| 'sdk-reporting'
|
||||||
|
| 'insights-share';
|
||||||
|
|
||||||
export const usePlausibleTracker = () => {
|
export const usePlausibleTracker = () => {
|
||||||
const plausible = useContext(PlausibleContext);
|
const plausible = useContext(PlausibleContext);
|
||||||
|
Loading…
Reference in New Issue
Block a user