feat. 페이지 귀속 컴포넌트 로그 추가

layers/components/blocks/Button/Home.vue

@@ -1,7 +1,24 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { TrackingObject } from '#layers/types/api/common'
+
+const { locale } = useI18n()
+const { sendLog, useAnalyticsData } = useAnalytics()
+
+const analytics = {
+  action_type: 'click',
+  click_item: '홈으로가기',
+  click_sarea: 'HOME', // TODO: 확인 필요 컴포넌트 id가 뭔가염 뭔가염
+} as TrackingObject
+</script>
 
 <template>
-  <AtomsButtonCircle sr-only="home" type="link" to="/home" class="btn-home">
+  <AtomsButtonCircle
+    sr-only="home"
+    type="link"
+    to="/home"
+    class="btn-home"
+    @click="sendLog(locale, useAnalyticsData(analytics))"
+  >
     <AtomsIconsHomeFill />
   </AtomsButtonCircle>
 </template>

layers/components/blocks/Button/ScrollTop.vue

@@ -1,10 +1,21 @@
 <script setup lang="ts">
+import type { TrackingObject } from '#layers/types/api/common'
+
+const { locale } = useI18n()
 const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
+const { sendLog, useAnalyticsData } = useAnalytics()
+
+const analytics = {
+  action_type: 'click',
+  click_item: 'TOP버튼',
+  click_sarea: 'TOP', // TODO: 확인 필요 컴포넌트 id가 뭔가염 뭔가염
+} as TrackingObject
 
 const showBtn = computed(() => windowY.value > 0)
 
 const handleScrollToTop = () => {
   windowY.value = 0
+  sendLog(locale.value, useAnalyticsData(analytics))
 }
 </script>
 

layers/components/blocks/Button/Sns.vue

@@ -1,13 +1,21 @@
 <script setup lang="ts">
+import type { TrackingObject } from '#layers/types/api/common'
+
 const showSnsList = ref(false)
 
-const { tm } = useI18n()
+const { locale, tm } = useI18n()
 const gameDataStore = useGameDataStore()
 const modalStore = useModalStore()
+const { sendLog, useAnalyticsData } = useAnalytics()
 
 const { gameData } = storeToRefs(gameDataStore)
 const { handleOpenToast } = modalStore
 
+const analytics = {
+  action_type: 'click',
+  click_sarea: 'SNS',
+} as TrackingObject
+
 const snsBackgroundColor = computed(() => {
   const colorData = gameData.value?.comm_sns_bg_color_json?.display
   const colorCode = getColorCode({
@@ -35,6 +43,10 @@ const handleCopy = async () => {
     const url = window.location.href
     await navigator.clipboard.writeText(url)
     handleOpenToast({ contentText: tm('Alert_Copy_Complete') })
+    sendLog(
+      locale.value,
+      useAnalyticsData({ ...analytics, click_item: 'URL복사' })
+    )
   } catch (error) {
     console.error('[handleCopy] Error:', error)
   }
@@ -62,13 +74,19 @@ const handleCopy = async () => {
       >
         <template v-for="(item, key) in snsList" :key="key">
           <a
-            v-if="item?.url"
-            :href="item?.url"
+            v-if="item.use_yn === 1 && item.url"
+            :href="item.url"
             target="_blank"
             class="sns-item"
             :style="{
               backgroundImage: `url(${formatPathHost(`/images/common/ic-v2-logo-${key}-fill.png`, { imageType: 'common' })})`,
             }"
+            @click="
+              sendLog(
+                locale,
+                useAnalyticsData({ ...analytics, click_item: key })
+              )
+            "
           >
             <span class="sr-only">{{ key }}</span>
           </a>

layers/components/blocks/Lnb.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
+import type { TrackingObject } from '#layers/types/api/common'
 import type { PageDataLnbMenu } from '#layers/types/api/pageData'
 
 const { directions } = useWindowScroll({ behavior: 'smooth' })
+const { locale } = useI18n()
 const pageDataStore = usePageDataStore()
 const scrollStore = useScrollStore()
 const breakpoints = useResponsiveBreakpoints()
+const { sendLog, useAnalyticsData } = useAnalytics()
 
 const { pageData } = storeToRefs(pageDataStore)
 
@@ -105,6 +108,10 @@ const handleLnbClick = (lnbItem: PageDataLnbMenu) => {
       : lnbItem.page_ver_tmpl_name_en
 
   scrollStore.scrollToAnchor(targetId)
+  sendLog(
+    locale.value,
+    useAnalyticsData(lnbItem.tracking_json as unknown as TrackingObject)
+  )
 }
 
 watch(directions, newVal => {

layers/components/layouts/EventNavigation.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { TrackingObject } from '#layers/types/api/common'
 import type {
   EventNavigationResponse,
   EventNavigation,
@@ -6,6 +7,12 @@ import type {
 
 const { locale } = useI18n()
 const gameDomain = useGetGameDomain()
+const { sendLog, useAnalyticsData } = useAnalytics()
+
+const analytics = {
+  action_type: 'click',
+  click_sarea: 'eventNavigation',
+}
 
 const isEventNavigationOpen = ref(true)
 const eventNavigationList = ref<Record<string, EventNavigation>>({})
@@ -36,6 +43,12 @@ const getEventNavigation = async (): Promise<Record<
 
 const toggleEventNavigation = () => {
   isEventNavigationOpen.value = !isEventNavigationOpen.value
+
+  const navigationAnalytics = {
+    ...analytics,
+    click_item: isEventNavigationOpen.value ? '열기' : '닫기',
+  } as TrackingObject
+  sendLog(locale.value, useAnalyticsData(navigationAnalytics))
 }
 
 onMounted(async () => {
@@ -65,6 +78,15 @@ onMounted(async () => {
             :to="item.page_url"
             :target="item.link_type === 2 ? '_blank' : '_self'"
             class="item-link"
+            @click="
+              sendLog(
+                locale,
+                useAnalyticsData({
+                  ...analytics,
+                  click_item: item.banner_title || item.promotion_name,
+                })
+              )
+            "
           >
             <div class="item-thumbnail">
               <img

layers/components/widgets/ButtonList.vue

@@ -11,13 +11,12 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { locale } = useI18n()
+const { locale, tm } = useI18n()
+const device = useDevice()
 const modalStore = useModalStore()
 const scrollStore = useScrollStore()
 const breakpoints = useResponsiveBreakpoints()
 const { sendLog, useAnalyticsData } = useAnalytics()
-const { tm } = useI18n()
-const device = useDevice()
 
 const buttonList = computed<PageDataResourceGroup[]>(
   () => props.resourcesData ?? []

layers/composables/useAnalytics.ts

@@ -15,7 +15,7 @@ declare const ttq: any
 // 유틸 함수
 // ============================================================================
 
-// target에 {XX1, XX2}와 같은 형태가 포함되어 있을 경우 options.clickItem으로부터 값 추출하여 세팅
+// target에 {XX1, XX2}와 같은 형태가 포함되어 있을 경우 options.clickItem으로부터 값 추출하여 세팅 [TODO: ]
 const findValueFromOption = (target: string, { options = {} }: any) => {
   if (target.includes('{') && target.includes('}')) {
     const strTargetClickItem = target.substring(
@@ -56,8 +56,7 @@ const isEmptyAnalytics = (analytics?: Partial<AnalyticsDetailType>) =>
  * @returns 분석용 로그 데이터 객체 (ref 없이)
  */
 export const useAnalyticsData = (
-  analytics: string | TrackingObject,
-  type: 'page' | 'template' = 'template'
+  analytics: string | TrackingObject
 ): Partial<AnalyticsDetailType> => {
   const pageDataStore = usePageDataStore()
   const { pageName, pageNameEn } = storeToRefs(pageDataStore)

layers/templates/FxCoupon01/index.vue

@@ -21,8 +21,6 @@ interface Props {
 }
 const props = defineProps<Props>()
 
-provide('pageVerTmplNameEn', props.pageVerTmplNameEn)
-
 const runtimeConfig = useRuntimeConfig()
 
 const stoveApiUrl = runtimeConfig.public.stoveApiUrl as string