feat: add analytics tracking for mark as read action and refactor related functions

Author: medyo

src/components/Elements/CardWithActions/CardItemWithActions.tsx

@@ -3,7 +3,12 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { BiBookmarkMinus, BiBookmarkPlus, BiCheckDouble, BiShareAlt } from 'react-icons/bi'
 import { ShareModal } from 'src/features/shareModal'
 import { ShareModalData } from 'src/features/shareModal/types'
-import { Attributes, trackLinkBookmark, trackLinkUnBookmark } from 'src/lib/analytics'
+import {
+  Attributes,
+  trackLinkBookmark,
+  trackLinkUnBookmark,
+  trackMarkAsRead,
+} from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
 import { useReadPosts } from 'src/stores/readPosts'
 import { useShallow } from 'zustand/shallow'
@@ -46,15 +51,25 @@ export const CardItemWithActions = ({
     userBookmarks.some((bm) => bm.source === source && bm.url === item.url)
   )
 
-  const onMarkAsReadClick = useCallback(() => {
+  const onMarkAsReadClicked = useCallback(() => {
     if (isRead) {
       markAsUnread(item.id)
     } else {
       markAsRead(item.id)
     }
+
+    if (isRead) {
+      const analyticsAttrs = {
+        [Attributes.TRIGERED_FROM]: 'card',
+        [Attributes.TITLE]: item.title,
+        [Attributes.LINK]: item.url,
+        [Attributes.SOURCE]: source,
+      }
+      trackMarkAsRead(analyticsAttrs)
+    }
   }, [isRead, item.id])
 
-  const onBookmarkClick = useCallback(() => {
+  const onBookmarkClicked = useCallback(() => {
     const itemToBookmark = {
       title: item.title,
       url: item.url,
@@ -113,15 +128,15 @@ export const CardItemWithActions = ({
         {showBookmarkAction && (
           <button
             className={`blockActionButton ${isBookmarked ? 'active' : ''}`}
-            onClick={onBookmarkClick}
+            onClick={onBookmarkClicked}
             aria-label="Bookmark item">
             {!isBookmarked ? <BiBookmarkPlus /> : <BiBookmarkMinus />}
           </button>
         )}
 
         <button
           className={`blockActionButton ${isRead ? 'active' : ''}`}
-          onClick={onMarkAsReadClick}
+          onClick={onMarkAsReadClicked}
           aria-label={isRead ? 'Mark as unread' : 'Mark as read'}>
           <BiCheckDouble />
         </button>

src/lib/analytics.ts

@@ -37,6 +37,7 @@ enum Verbs {
   TARGET = 'Target',
   BOOKMARK = 'Bookmark',
   UNBOOKMARK = 'Unbookmark',
+  MARK_AS_READ = 'Mark as Read',
   REMOVE = 'Remove',
   START = 'Start',
   FINISH = 'Finish',
@@ -226,6 +227,14 @@ export const trackLinkUnBookmark = (attributes: { [P: string]: string }) => {
   })
 }
 
+export const trackMarkAsRead = (attributes: { [P: string]: string }) => {
+  trackEvent({
+    object: Objects.LINK,
+    verb: Verbs.MARK_AS_READ,
+    attributes,
+  })
+}
+
 export const trackLinkOpen = (attributes: { [P: string]: string | number | undefined }) => {
   trackEvent({
     object: Objects.LINK,