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

fix: comment tracking #2880

Merged
merged 2 commits into from
Mar 28, 2024
+61 −4
Merged

fix: comment tracking #2880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0974d47
fix: comment tracking
rebelchris Mar 28, 2024
d038d20
Merge branch 'main' into fix-comment-tracking
rebelchris Mar 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/shared/src/components/CommentFeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,10 @@ export default function CommentFeed<T>({
postScoutId={null}
appendTooltipTo={() => document.body}
linkToComment
lazy
showContextHeader
trackImpression
trackClick
/>
)),
)}
Expand Down
4 changes: 3 additions & 1 deletion packages/shared/src/components/comments/CommentContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export interface CommentContainerProps {
linkToComment?: boolean;
showContextHeader?: boolean;
actions?: ReactNode;
onClick?: () => void;
}

export default function CommentContainer({
Expand All @@ -50,6 +51,7 @@ export default function CommentContainer({
linkToComment,
showContextHeader,
actions,
onClick,
}: CommentContainerProps): ReactElement {
const isCommentReferenced = commentHash === getCommentHash(comment.id);
const { role } = useMemberRoleForSource({
Expand All @@ -71,7 +73,7 @@ export default function CommentContainer({
>
{linkToComment && (
<Link href={comment.permalink} prefetch={false} passHref>
<CardLink />
<CardLink onClick={onClick} />
</Link>
)}
{children}
Expand Down
57 changes: 54 additions & 3 deletions packages/shared/src/components/comments/MainComment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
import React, { ReactElement, useContext, useMemo } from 'react';
import React, {
ReactElement,
useContext,
useEffect,
useMemo,
useRef,
} from 'react';
import classNames from 'classnames';
import { useInView } from 'react-intersection-observer';
import EnableNotification from '../notifications/EnableNotification';
import CommentBox, { CommentBoxProps } from './CommentBox';
import SubComment from './SubComment';
import AuthContext from '../../contexts/AuthContext';
import { NotificationPromptSource } from '../../lib/analytics';
import {
AnalyticsEvent,
NotificationPromptSource,
TargetType,
} from '../../lib/analytics';
import { CommentMarkdownInputProps } from '../fields/MarkdownInput/CommentMarkdownInput';
import { useComments } from '../../hooks/post';
import { SquadCommentJoinBanner } from '../squads/SquadCommentJoinBanner';
Expand All @@ -15,6 +25,7 @@ import usePersistentContext from '../../hooks/usePersistentContext';
import { SQUAD_COMMENT_JOIN_BANNER_KEY } from '../../graphql/squads';
import { useEditCommentProps } from '../../hooks/post/useEditCommentProps';
import CommentInputOrPage from './CommentInputOrPage';
import AnalyticsContext from '../../contexts/AnalyticsContext';

type ClassName = {
container?: string;
Expand All @@ -28,6 +39,8 @@ export interface MainCommentProps
onCommented: CommentMarkdownInputProps['onCommented'];
className?: ClassName;
lazy?: boolean;
trackImpression?: boolean;
trackClick?: boolean;
}

const shouldShowBannerOnComment = (
Expand All @@ -45,13 +58,18 @@ export default function MainComment({
joinNotificationCommentId,
onCommented,
lazy = false,
trackImpression,
trackClick,
...props
}: MainCommentProps): ReactElement {
const { user } = useContext(AuthContext);
const { trackEvent } = useContext(AnalyticsContext);
const isTrackedImpression = useRef(false);
const showNotificationPermissionBanner = useMemo(
() => shouldShowBannerOnComment(permissionNotificationCommentId, comment),
[permissionNotificationCommentId, comment],
);

const [isJoinSquadBannerDismissed] = usePersistentContext(
SQUAD_COMMENT_JOIN_BANNER_KEY,
false,
Expand All @@ -77,6 +95,38 @@ export default function MainComment({
initialInView,
});

useEffect(() => {
if (trackImpression && !isTrackedImpression.current && inView) {
isTrackedImpression.current = true;
trackEvent({
event_name: AnalyticsEvent.Impression,
target_type: TargetType.Comment,
target_id: comment.id,
extra: JSON.stringify({ origin: props.origin }),
});
}
}, [
isTrackedImpression,
props.origin,
trackEvent,
trackImpression,
inView,
comment.id,
]);

const onClick = () => {
if (!trackClick && !props.linkToComment) {
return;
}

trackEvent({
event_name: AnalyticsEvent.Click,
target_type: TargetType.Comment,
target_id: comment.id,
extra: JSON.stringify({ origin: props.origin }),
});
};

return (
<section
ref={inViewRef}
Expand All @@ -90,7 +140,7 @@ export default function MainComment({
contentVisibility: initialInView ? 'visible' : 'auto',
}}
>
{!editProps && inView && (
{!editProps && (trackImpression || inView) && (
Copy link
Contributor

Choose a reason for hiding this comment

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

Only issue I see is that this renders all the comments that are currently loaded no matter if they are in view or not, which contradicts what lazy prop means.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it can be fixed by extracting lazy logic into a wrapper component which can then be used in specific places like post page.

<LazyComment>
  <MainComment />
</LazyComment>

<CommentBox
{...props}
comment={comment}
Expand All @@ -110,6 +160,7 @@ export default function MainComment({
onEdit={({ id, lastUpdatedAt }) =>
onEdit({ commentId: id, lastUpdatedAt })
}
onClick={onClick}
/>
)}
{editProps && (
Expand Down
1 change: 1 addition & 0 deletions packages/shared/src/lib/analytics.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ export enum TargetType {
StreaksMilestone = 'streaks milestone',
MarketingCtaCard = 'promotion_card',
MarketingCtaPopover = 'promotion_popover',
Comment = 'comment',
}

export enum TargetId {
Expand Down