Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: implement plausible tracking #3212

Merged
merged 1 commit into from
Feb 28, 2023
Merged

feat: implement plausible tracking #3212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 11 additions & 5 deletions ...project/Project/ProjectStats/Feedback.tsx → ...rc/component/common/Feedback/Feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
View file
Open in desktop
Original file line number Diff line number Diff line change
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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need this flag if notifications are not even shown without this flag enabled?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, because we only want to track in the context of our cloud offering where tracking is available for us. For OSS and Enterprise-self hosted, this is not the case. I'd rather add the flag now, then to forget about it when we go to production. This flag will be true when we have access to plausible, it doesn't control the feature.

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
8 changes: 6 additions & 2 deletions frontend/src/component/project/Project/ProjectStats/HelpPopper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
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
View file
Open in desktop
Original file line number Diff line number Diff line change
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