feat. 페이지 분석 로그 데이터 기능 추가 및 컴포넌트 수정

2025-10-01 21:41:47 +09:00
parent 5f140aced1
commit 5646c2501b
9 changed files with 78 additions and 25 deletions
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -7,6 +7,7 @@ import type { ButtonType } from '#layers/types/components/button'

 interface ButtonListProps {
  resourcesData: PageDataResourceGroup[]
+  pageVerTmplSeq: number
 }

 const props = defineProps<ButtonListProps>()
@@ -51,7 +52,13 @@ const getButtonProps = (button: PageDataResourceGroup) => ({
  }),
  disabled: button.btn_info?.disabled,
  text: button.btn_info?.txt_btn_name,
+  tracking: button.tracking,
 })
+
+const { useAnalyticsLogDataDirect } = useAnalytics()
+// const logData = useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq)
+console.log("🚀 11111~ getButtonProps ~ props.resourcesData:", getButtonProps(props.resourcesData[0]))
+
 </script>

 <template>
@@ -63,9 +70,10 @@ const getButtonProps = (button: PageDataResourceGroup) => ({
      v-for="(button, index) in props.resourcesData"
      :key="`${button.group_code}-${index}`"
      v-bind="getButtonProps(button)"
+      v-analytics="useAnalyticsLogDataDirect(getButtonProps(button), props.pageVerTmplSeq)"
      class="size-extra-small md:size-medium"
    >
-      {{ button.btn_info?.txt_btn_name }}
+    {{ button.btn_info?.txt_btn_name }}
    </AtomsButton>
  </div>
 </template>
--- a/layers/components/widgets/VideoPlay.vue
+++ b/layers/components/widgets/VideoPlay.vue
@@ -5,8 +5,8 @@ const props = defineProps<{
  resourcesData: PageDataResourceGroup
  pageVerTmplSeq: number
 }>()
-const { useAnalyticsLogData } = useAnalytics()
-const logData = useAnalyticsLogData(props.resourcesData, props.pageVerTmplSeq)
+const { useAnalyticsLogDataDirect } = useAnalytics()
+const logData = useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq)

 // YouTube 모달 스토어 사용
 const modalStore = useModalStore()
@@ -20,6 +20,7 @@ const handleVideoPlayClick = () => {

 <template>
  <AtomsButtonPlay
+    v-analytics="logData"
    :resources-data="resourcesData"
    @click="handleVideoPlayClick"
  />
--- a/layers/composables/useAnalytics.ts
+++ b/layers/composables/useAnalytics.ts
@@ -25,7 +25,6 @@ export const useAnalyticsLogData = (
  }

  const pageDataTrack = (typeof resourcesData.tracking === 'object' ? resourcesData.tracking : {}) as AnalyticsLogDataTracking
-  console.log("🚀 ~ useAnalyticsLogData ~ pageDataTrack:", pageData)

  const logData = ref({
    actionType: pageDataTrack?.action_type,
@@ -45,6 +44,43 @@ export const useAnalyticsLogData = (
  return logData
 }

+/**
+ * 페이지 데이터와 템플릿 정보를 기반으로 분석용 로그 데이터를 생성하는 composable (직접 객체 반환)
+ * @param resourcesData 페이지 리소스 데이터
+ * @param pageVerTmplSeq 템플릿 시퀀스 번호
+ * @returns 분석용 로그 데이터 객체 (ref 없이)
+ */
+export const useAnalyticsLogDataDirect = (
+  resourcesData: PageDataResourceGroup,
+  pageVerTmplSeq: number
+) => {
+  const store = usePageDataStore()
+  const pageData = store.pageData
+
+  if (!pageData) {
+    return {} as AnalyticsDetailType
+  }
+
+  const pageDataTrack = (typeof resourcesData.tracking === 'object' ? resourcesData.tracking : {}) as AnalyticsLogDataTracking
+
+  const logData = {
+    actionType: pageDataTrack?.action_type,
+    // logSourceType:pageDataTrack.logSourceType,
+    // viewArea:pageDataTrack.viewArea,
+    // viewType:pageDataTrack.viewType,
+    clickArea:pageData.page_name_en,
+    clickSarea: pageData.templates[pageVerTmplSeq].page_ver_tmpl_name_en,
+    clickItem: `${pageData.templates[pageVerTmplSeq].page_ver_tmpl_name}_${pageDataTrack?.click_item}`,
+    event: pageData.page_name,
+    eventCategory: `${pageData.page_name}_${pageDataTrack?.click_item}`,
+    template_code: pageData.templates[pageVerTmplSeq].template_code,
+    page_ver_tmpl_name: pageData.templates[pageVerTmplSeq].page_ver_tmpl_name,
+    page_ver_tmpl_name_en: pageData.templates[pageVerTmplSeq].page_ver_tmpl_name_en,
+  } as unknown as AnalyticsDetailType
+
+  return logData
+}
+

 // target에 {XX1, XX2}와 같은 형태가 포함되어 있을 경우 options.clickItem으로부터 값 추출하여 세팅
 const findValueFromOption = (target: string, { options = {} }: any) => {
@@ -70,7 +106,6 @@ const findValueFromOption = (target: string, { options = {} }: any) => {
 * @param {object} options
 */
 const sendGA = (analytics: AnalyticsDetailType, { options = {} }: any) => {
-  console.log("🚀 ~ 1111 sendGA ~ analytics:", analytics)
  try {
    const { gtag } = useGtag()

@@ -98,7 +133,8 @@ const sendGA = (analytics: AnalyticsDetailType, { options = {} }: any) => {
 * @param {string} mcode
 * @param {object} options
 */
-const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: any) => {
+const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options: _options = {} }: any) => {
+  console.log("🚀 ~44444 sendSA ~ analytics:", analytics)
  const gameDataStore = useGameDataStore()
  const { gameData } = storeToRefs(gameDataStore)

@@ -116,7 +152,7 @@ const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: an
    const viewArea = analytics.viewArea || ''
    const viewType = analytics.viewType || ''
    const clickArea = analytics.clickArea || ''
-    const clickSarea = findValueFromOption(analytics.clickSarea || '', { options })
+    const clickSarea = findValueFromOption(analytics.clickSarea || '', { _options })
    const eventLocale = analytics.eventLocale || ''

    const identityInfo: IdentityInfo = {
@@ -145,7 +181,7 @@ const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: an
        view_info: {
          game_no: gameNo,
          lang_cd: eventLocale,
-          ...options?.viewInfo
+          ..._options?.viewInfo
        }
      }
    } else if (actionType === 'click') {
@@ -156,7 +192,7 @@ const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: an
          click_item: analytics.clickItem,
          game_no: gameNo,
          lang_cd: eventLocale,
-          ...options?.clickItem
+          ..._options?.clickItem
        }
      }
    }
@@ -196,7 +232,7 @@ const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: an
 * @param {AnalyticsDetailType} analytics
 */
 const sendLog = (locale: string, analytics: AnalyticsDetailType) => {
-console.log("🚀 ~ sendLog ~ analytics:", analytics)
+console.log("🚀 ~33333 sendLog ~ analytics:", analytics)

 
  // 언어 코드 대문자 변환
@@ -313,5 +349,5 @@ const sendMarketingScript = ({
 }

 export default () => {
-  return { sendGA, sendSA, sendLog, sendMarketingScript, useAnalyticsLogData }
+  return { sendGA, sendSA, sendLog, sendMarketingScript, useAnalyticsLogData, useAnalyticsLogDataDirect }
 }
--- a/layers/middleware/pageData.global.ts
+++ b/layers/middleware/pageData.global.ts
@@ -17,7 +17,6 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {

  try {
    const pageUrl = getPathAfterLanguage(to.path)
-    console.log('🚀 ~ pageUrl:', pageUrl)

    // pageUrl이 빈값이거나 null이면 /brand로 리다이렉트
    if (!pageUrl || pageUrl === '' || pageUrl === '/') {
@@ -30,7 +29,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
      page_url: pageUrl,
      _t: Date.now().toString(), // 캐시 무효화를 위한 타임스탬프
    }
-    console.log('🚀 ~ queryParams:', queryParams)
+    // console.log('🚀 ~ queryParams:', queryParams)

    const response = (await commonFetch('GET', apiUrl, {
      query: queryParams,
@@ -39,7 +38,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {

    if (response?.code === 0 && 'value' in response) {
      store.setPageData(response.value)
-      console.log('🚀 ~ cleanData:', response.value)
+      // console.log('🚀 ~ cleanData:', response.value)
    } else {
      store.clearPageData()
    }
--- a/layers/templates/GrGallery02/index.vue
+++ b/layers/templates/GrGallery02/index.vue
@@ -85,6 +85,7 @@ const handleChange = (
      <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
        class="mt-[40px] md:mt-[56px]"
      />
    </div>
--- a/layers/templates/GrGallery03/index.vue
+++ b/layers/templates/GrGallery03/index.vue
@@ -102,6 +102,7 @@ const handleChange = (
      <WidgetsButtonList
        v-if="buttonListData"
        :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
        class="mt-[32px]"
      />
    </div>
--- a/layers/templates/GrVisual01/index.vue
+++ b/layers/templates/GrVisual01/index.vue
@@ -43,17 +43,22 @@ const buttonListData = computed(() =>
        :resources-data="descriptionData"
        class="w-[355px] md:w-[944px]"
      />
-      <WidgetsVideoPlay
-        v-if="videoPlayData"
-        :resources-data="videoPlayData"
-        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
-      />
-      <WidgetsButtonList
-        v-if="buttonListData.length > 0"
-        :resources-data="buttonListData"
-        button-type="market"
-        class="mt-[22px] md:mt-[52px]"
-      />
+      <client-only>
+        <WidgetsVideoPlay
+          v-if="videoPlayData"
+          :resources-data="videoPlayData"
+          :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
+        />
+      </client-only>
+      <client-only>
+        <WidgetsButtonList
+          v-if="buttonListData.length > 0"
+          :resources-data="buttonListData"
+          :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
+          button-type="market"
+          class="mt-[22px] md:mt-[52px]"
+        />
+      </client-only>
    </div>
  </section>
 </template>
--- a/layers/templates/GrVisual02/index.vue
+++ b/layers/templates/GrVisual02/index.vue
@@ -105,6 +105,7 @@ const slideItemSize = {
      <WidgetsButtonList
        v-if="buttonListData.length > 0"
        :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
        class="mt-[48px] md:mt-[72px]"
      />
      <BlocksSlideCenterHighlight
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -49,6 +49,7 @@ const props = defineProps<Props>()
          <WidgetsButtonList
            v-if="hasComponentGroup(item, 'buttonList')"
            :resources-data="getComponentGroupAry(item, 'buttonList')"
+            :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
            class="mt-[28px] md:mt-[52px]"
          />
        </div>