Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: implement plausible tracking (#3212)
Adds plausible event tracking for notifications. Refactors Feedback
component to be reusable and to ask whether or not this functionality is
useful.
  • Loading branch information
FredrikOseberg committed Feb 28, 2023
1 parent 90e4054 commit 87312f9
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 10 deletions.
@@ -1,11 +1,13 @@
import { useState, VFC } from 'react';
import { Box, Paper, Button, styled } from '@mui/material';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { CustomEvents, usePlausibleTracker } from 'hooks/usePlausibleTracker';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { createLocalStorage } from 'utils/createLocalStorage';

interface IFeedbackProps {
id: string;
eventName: CustomEvents;
localStorageKey: string;
}

const StyledBox = styled(Box)(({ theme }) => ({
Expand All @@ -14,26 +16,30 @@ const StyledBox = styled(Box)(({ theme }) => ({
marginTop: theme.spacing(0.5),
}));

export const Feedback: VFC<IFeedbackProps> = ({ id }) => {
export const Feedback: VFC<IFeedbackProps> = ({
id,
localStorageKey,
eventName,
}) => {
const { uiConfig } = useUiConfig();
const { value: selectedValue, setValue: setSelectedValue } =
createLocalStorage<{ value?: 'yes' | 'no' }>(
`ProjectOverviewFeedback:v1:${id}`,
`${uiConfig.baseUriPath}:${localStorageKey}:v1:${id}`,
{}
);
const [selected, setSelected] = useState<'yes' | 'no' | undefined>(
selectedValue.value
);
const { trackEvent } = usePlausibleTracker();

if (!uiConfig?.flags?.T) {
if (!uiConfig?.flags?.T || Boolean(selected)) {
return null;
}

const onTrackFeedback = (value: 'yes' | 'no') => {
setSelected(value);
setSelectedValue({ value });
trackEvent('project_overview', {
trackEvent(eventName, {
props: {
eventType: id,
wasHelpful: value === 'yes',
Expand Down
20 changes: 19 additions & 1 deletion frontend/src/component/common/Notifications/Notifications.tsx
Expand Up @@ -9,7 +9,7 @@ import {
Button,
} from '@mui/material';
import { useNotifications } from 'hooks/api/getters/useNotifications/useNotifications';
import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import NotificationsIcon from '@mui/icons-material/Notifications';
import { NotificationsHeader } from './NotificationsHeader';
import { NotificationsList } from './NotificationsList';
Expand All @@ -18,6 +18,9 @@ import { EmptyNotifications } from './EmptyNotifications';
import { NotificationsSchemaItem } from 'openapi';
import { useNavigate } from 'react-router-dom';
import { useNotificationsApi } from 'hooks/api/actions/useNotificationsApi/useNotificationsApi';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { Feedback } from 'component/common/Feedback/Feedback';

const StyledPrimaryContainerBox = styled(Box)(() => ({
position: 'relative',
Expand Down Expand Up @@ -63,11 +66,20 @@ export const Notifications = () => {
});
const navigate = useNavigate();
const { markAsRead } = useNotificationsApi();
const { uiConfig } = useUiConfig();
const { trackEvent } = usePlausibleTracker();

const onNotificationClick = (notification: NotificationsSchemaItem) => {
if (notification.link) {
navigate(notification.link);
}

if (uiConfig?.flags?.T) {
trackEvent('notifications', {
props: { eventType: notification.notificationType },
});
}

setShowNotifications(false);

// Intentionally not wait for this request. We don't want to hold the user back
Expand Down Expand Up @@ -154,6 +166,12 @@ export const Notifications = () => {
/>
))}
</NotificationsList>
<Feedback
eventName="notifications"
id="useful"
localStorageKey="NotificationsUsefulPrompt"
/>
<br />
</StyledPaper>
</ClickAwayListener>
}
Expand Down
Expand Up @@ -8,7 +8,7 @@ import {
ClickAwayListener,
styled,
} from '@mui/material';
import { Feedback } from './Feedback';
import { Feedback } from 'component/common/Feedback/Feedback';

interface IHelpPopperProps {
id: string;
Expand Down Expand Up @@ -66,7 +66,11 @@ export const HelpPopper: FC<IHelpPopperProps> = ({ children, id }) => {
/>
</IconButton>
{children}
<Feedback id={id} />
<Feedback
id={id}
eventName="project_overview"
localStorageKey="ProjectOverviewFeedback"
/>
</StyledPaper>
</ClickAwayListener>
</Popper>
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/hooks/usePlausibleTracker.ts
Expand Up @@ -8,7 +8,7 @@ import { EventOptions, PlausibleOptions } from 'plausible-tracker';
* @see https://plausible.io/docs/custom-event-goals#2-create-a-custom-event-goal-in-your-plausible-analytics-account
* @example `'download | 'invite' | 'signup'`
**/
type CustomEvents =
export type CustomEvents =
| 'invite'
| 'upgrade_plan_clicked'
| 'change_request'
Expand All @@ -20,7 +20,8 @@ type CustomEvents =
| 'suggest_tags'
| 'unknown_ui_error'
| 'export_import'
| 'project_api_tokens';
| 'project_api_tokens'
| 'notifications';

export const usePlausibleTracker = () => {
const plausible = useContext(PlausibleContext);
Expand Down

0 comments on commit 87312f9

Please sign in to comment.