feat: gtag code refatcor

Author: winverse

packages/velog-web/src/features/home/components/PostCardGrid/PostCardGrid.tsx

@@ -14,6 +14,7 @@ import PostCardSkeletonGrid from './PostCardSkeletonGrid'
 import { TrendingPost } from '../../interface/post'
 import PostCard from '../PostCard/PostCard'
 import { PostCardSkeleton } from '../PostCard/PostCardSkeleton'
+import useGtag from '@/hooks/useGtag'
 
 const cx = bindClassNames(styles)
 
@@ -36,6 +37,7 @@ function PostCardGrid({
 }: Props) {
   const params = useParams()
   const pathname = usePathname()
+  const { gtag } = useGtag()
   const timeframe = (params.timeframe ?? 'week') as Timeframe
   const hasLoaded = useRef<boolean>(false)
   const hasClicked = useRef<boolean>(false)
@@ -61,13 +63,13 @@ function PostCardGrid({
   useEffect(() => {
     if (hasLoaded.current) return
     hasLoaded.current = true
-    gtag('event', 'ads_feed_view')
-  }, [])
+    gtag('ads_feed_view')
+  }, [gtag])
 
   const onClick = () => {
     if (hasClicked.current) return
     hasClicked.current = true
-    gtag('event', 'ads_feed_click')
+    gtag('ads_feed_click')
   }
 
   if (isLoading) return <PostCardSkeletonGrid forHome={forHome} forPost={forPost} />

packages/velog-web/src/hooks/useGtag.ts

@@ -1,7 +1,7 @@
 'use client'
 
 export default function useGtag() {
-  function gtag(action: EventAction, eventOptions: EventOptions) {
+  function gtag(action: EventAction, eventOptions?: EventOptions) {
     const isProductionContainer = process.env.DOCKER_ENV === 'production'
     if (!isProductionContainer) return
     if (!window.gtag) return
@@ -10,7 +10,13 @@ export default function useGtag() {
   return { gtag }
 }
 
-type EventAction = 'recommend_click' | 'recommend_guest_click' | 'ads_click' | Gtag.EventNames
+type EventAction =
+  | 'recommend_click'
+  | 'recommend_guest_click'
+  | 'ads_click'
+  | 'ads_feed_view'
+  | 'ads_feed_click'
+  | Gtag.EventNames
 
 type EventOptions =
   | {