feat. 공통 로그 변경, 고정 템플릿 로그 추가

layers/templates/FxVideo01/index.vue

@@ -6,6 +6,7 @@ import {
   getComponentContainer,
 } from '#layers/utils/dataUtil'
 import { getYouTubeThumbnail } from '#layers/utils/youtubeUtil'
+import type { TrackingObject } from '#layers/types/api/common'
 import type {
   PageDataTemplateComponents,
   PageDataResourceGroups,
@@ -25,6 +26,7 @@ const pageDataStore = usePageDataStore()
 const modalStore = useModalStore()
 const breakpoints = useResponsiveBreakpoints()
 const { getOperateResources } = useOperateResources()
+const { sendLog } = useAnalytics()
 
 const { pageData } = storeToRefs(pageDataStore)
 
@@ -39,11 +41,30 @@ const resultGetMultilingual = await useGetMultilingual({
   fileName: multilingualFileName,
 })
 
-const { tm, locale } = useI18n({
+const { tm, t, locale } = useI18n({
   useScope: 'local',
   messages: Object(resultGetMultilingual?.value?.multilingual),
 })
 
+const analytics = {
+  action_type: 'click',
+  click_sarea: props.pageVerTmplNameEn,
+} as TrackingObject
+const arrowsData: PageDataResourceGroups = [
+  {
+    tracking: {
+      ...analytics,
+      click_item: '1. 컨텐츠 리스트 - 네비게이션(좌)',
+    },
+  },
+  {
+    tracking: {
+      ...analytics,
+      click_item: '1. 컨텐츠 리스트 - 네비게이션(우)',
+    },
+  },
+]
+
 const recommendHover = ref(false)
 
 const backgroundData = computed(() =>
@@ -53,23 +74,6 @@ const officialUrlData = computed(
   () => getComponentGroup(props.components, 'officialUrl')?.display?.text ?? ''
 )
 
-const arrowsData: PageDataResourceGroups = [
-  {
-    tracking: {
-      action_type: 'click',
-      click_item: '1. 컨텐츠 리스트 - 네비게이션(좌)',
-      click_sarea: 'Home_GameInfo__arrow',
-    },
-  },
-  {
-    tracking: {
-      action_type: 'click',
-      click_item: '1. 컨텐츠 리스트 - 네비게이션(우)',
-      click_sarea: 'Home_GameInfo__arrow',
-    },
-  },
-]
-
 const { data: slideData } = await useAsyncData(
   `fx-video-01-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
   async () => {
@@ -131,13 +135,19 @@ const hasMore = computed(
   () => visibleVideos.value.length < recentVideos.value.length
 )
 
-const handleVideoClick = (url: string) => {
-  modalStore.handleOpenYoutube({ youtubeUrl: url })
+const handleVideoClick = (item: OperateGroupItem) => {
+  modalStore.handleOpenYoutube({ youtubeUrl: item.url })
+  sendLog(locale.value, { ...analytics, click_item: item.title })
 }
 
 const handleLoadMoreRecent = () => {
   if (hasMore.value) {
     currentRecentPage.value++
+
+    sendLog(locale.value, {
+      ...analytics,
+      click_item: t('Text_More', {}, { locale: 'ko' }),
+    })
   }
 }
 </script>
@@ -154,6 +164,10 @@ const handleLoadMoreRecent = () => {
         :title="tm('Video_Section_Recommendation_Title')"
         :description="tm('Video_Page_Link')"
         :link="officialUrlData"
+        :link-analytics="{
+          ...analytics,
+          click_item: t('Video_Page_Link', {}, { locale: 'ko' }),
+        }"
       />
       <div
         class="relative content-static bg-[#fff] rounded-[12px] md:rounded-[16px]"
@@ -173,7 +187,7 @@ const handleLoadMoreRecent = () => {
           >
             <div
               class="overflow-hidden relative aspect-[16/9] flex-shrink-0 w-full rounded-[4px] cursor-pointer group sm:w-[60.3%] sm:rounded-[8px] md:w-[56%] lg:w-[710px] lg:rounded-[12px]"
-              @click="handleVideoClick(item.url)"
+              @click="handleVideoClick(item)"
             >
               <img
                 :src="getYouTubeThumbnail(item.url, 'maxres')"
@@ -191,7 +205,7 @@ const handleLoadMoreRecent = () => {
             </div>
             <div
               class="w-full mx-[8px] pb-[20px] border-b border-[rgba(0,0,0,0.08)] cursor-pointer sm:mx-[0] sm:pt-[12px] sm:pr-[16px] sm:pb-[0] sm:border-none md:pt-[20px] md:pr-[28px] lg:pt-[40px] lg:pr-[48px]"
-              @click="handleVideoClick(item.url)"
+              @click="handleVideoClick(item)"
               @mouseenter="recommendHover = true"
               @mouseleave="recommendHover = false"
             >
@@ -225,7 +239,7 @@ const handleLoadMoreRecent = () => {
             v-for="(item, index) in visibleVideos"
             :key="`recent-${item.url}-${index}`"
             class="p-3 rounded-[12px] bg-white md:p-4 md:rounded-[16px] lg:p-5 group cursor-pointer"
-            @click="handleVideoClick(item.url)"
+            @click="handleVideoClick(item)"
           >
             <div
               class="overflow-hidden relative aspect-[16/9] w-full rounded-[4px] sm:rounded-[8px] lg:rounded-[12px]"