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

2025-12-15 15:25:32 +09:00
parent 966c66fe7b
commit f955b76e62
39 changed files with 670 additions and 795 deletions
--- a/layers/templates/FxDownload01/index.vue
+++ b/layers/templates/FxDownload01/index.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
+import type { TrackingObject } from '#layers/types/api/common'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 import type { Platform } from '#layers/types/components/button'

 // Props
 interface Props {
+  id?: string
  components: PageDataTemplateComponents
  pageVerTmplSeq: number
  pageVerTmplNameEn: string
@@ -13,6 +15,12 @@ const props = defineProps<Props>()

 // Configuration
 const runtimeConfig = useRuntimeConfig()
+const device = useDevice()
+const gameDataStore = useGameDataStore()
+const breakpoints = useResponsiveBreakpoints()
+
+const { gameData } = storeToRefs(gameDataStore)
+const { sendLog } = useAnalytics()

 const dataResourcesUrl = runtimeConfig.public.dataResourcesUrl as string
 const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_download.json'
@@ -30,27 +38,8 @@ const { tm, locale }: any = useI18n({
 })

 // Composables
-const device = useDevice()
-const breakpoints = useResponsiveBreakpoints()
 const { checkPCSpec } = useCheckPCSpec(tm)

-// Store
-const gameDataStore = useGameDataStore()
-const { gameData } = storeToRefs(gameDataStore)
-
-// Data
-const backgroundData = computed(() =>
-  getComponentGroup(props.components, 'background')
-)
-const specCheckData = computed(() =>
-  getComponentGroupAry(props.components, 'tablePcSpecTool')
-)
-const schemeFormatData = computed(
-  () => specCheckData.value[0]?.display?.text || ''
-)
-const setupUrlData = computed(() => specCheckData.value[1]?.display?.text || '')
-
-// Refs
 const specPCRef = ref<HTMLElement | null>(null)
 const specMobileRef = ref<HTMLElement | null>(null)
 const driverArray = ref<Array<string>>([
@@ -71,7 +60,18 @@ const pcSpecArray = ref<Array<string>>([
 const mobileSpecArray = ref<Array<string>>(['Android', 'Ios'])
 const mobileOSArray = ref<Array<string>>(['AOS', 'iOS'])

-// Computed
+// Data
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const specCheckData = computed(() =>
+  getComponentGroupAry(props.components, 'tablePcSpecTool')
+)
+const schemeFormatData = computed(
+  () => specCheckData.value[0]?.display?.text || ''
+)
+const setupUrlData = computed(() => specCheckData.value[1]?.display?.text || '')
+
 const driverList = computed(() =>
  driverArray.value.map(driver => ({
    id: `DRIVER_${driver}`,
@@ -108,6 +108,15 @@ const mobileOSList = computed(() =>
 )

 // Functions
+const handleSendLog = (item: string) => {
+  const analytics = {
+    action_type: 'click',
+    click_item: item,
+    click_sarea: props.pageVerTmplNameEn,
+  }
+
+  sendLog(locale.value, analytics)
+}
 /**
 * 입력한 pc, mobile 인자값에 따라 해당 최소사양&권장사양 테이블로 포커스 스크롤 이동합니다.
 * @param target<string> 'pc' | 'mobile'
@@ -123,6 +132,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
    refs[target]?.getBoundingClientRect().top + window.scrollY - adjustedOffset

  window.scrollTo({ top: adjustedOffsetTop, behavior: 'smooth' })
+  handleSendLog(`${target === 'pc' ? 'PC' : '모바일'} 버전 사양 확인하기`)
 }
 </script>

@@ -196,12 +206,8 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                ></p>
              </template>

-              <AtomsButton
-                type="action"
-                button-size="size-small"
-                background-color="transparent"
-                text-color="#1F1F1F"
-                class="relative w-auto h-auto px-0 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+              <button
+                class="relative flex gap-1 text-[14px] font-[500] text-[#1F1F1F] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
                @click="handleMoveFocus('pc')"
              >
                <span>{{ tm('Download_Box_PC_SpecCheck') }}</span>
@@ -210,7 +216,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                  color="#1F1F1F"
                  class="relative rotate-90"
                />
-              </AtomsButton>
+              </button>
            </div>

            <div
@@ -224,6 +230,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
              v-else-if="breakpoints.isMd || breakpoints.isDesktop"
              platform="pc"
              class="!w-full !max-w-[300px]"
+              @click="handleSendLog('PC 버전 다운로드')"
            >
              <span>{{ tm('Download_Button_PC') }}</span>
            </BlocksButtonLauncher>
@@ -237,15 +244,16 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
              class="relative flex items-center justify-center w-full gap-[8px] text-[#999999] text-[16px] font-[400] leading-[26px] tracking-[-0.48px]"
            >
              <span>{{ tm('Download_Text_Not_STOVE_Client') }}</span>
-              <NuxtLink
+              <a
                :href="stoveClientDownloadUrl"
                target="_self"
                rel="noopener noreferrer"
                class="inline-flex items-center justify-start gap-[4px] text-[#3C75FF] text-[16px] font-[500] reading-[24px] tracking-[-0.48px]"
+                @click="handleSendLog('스토브 PC 클라이언트 다운로드')"
              >
                <span>{{ tm('Download_Button_STOVE') }}</span>
                <AtomsIconsDownloadLine color="#3C75FF" />
-              </NuxtLink>
+              </a>
            </p>
          </div>
        </div>
@@ -269,12 +277,8 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                <span>{{ tm('Download_Box_MOBILE_Title') }}</span>
              </h4>

-              <AtomsButton
-                type="action"
-                button-size="size-small"
-                background-color="transparent"
-                text-color="#1F1F1F"
-                class="relative w-auto h-auto px-0 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+              <button
+                class="relative flex gap-1 text-[14px] font-[500] text-[#1F1F1F] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-p before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
                @click="handleMoveFocus('mobile')"
              >
                <span>{{ tm('Download_Box_MOBILE_SpecCheck') }}</span>
@@ -283,7 +287,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                  color="#1F1F1F"
                  class="relative rotate-90"
                />
-              </AtomsButton>
+              </button>
            </div>

            <div
@@ -300,6 +304,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                  "
                  :platform="`${os.platformCode as Platform}`"
                  class="!w-full"
+                  @click="handleSendLog(os.platformCode)"
                >
                  <span>{{ os.platformText }}</span>
                </BlocksButtonLauncher>
@@ -376,14 +381,15 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
          background-color="#383838"
          text-color="#FFFFFF"
          class="shrink-0 w-[206px] px-0 text-[16px]"
-          @click="
+          @click="[
            checkPCSpec({
              schemeFormat: schemeFormatData,
              setupUrl: setupUrlData,
              gameNo: gameData?.game_code?.toString(),
              locale: locale as string,
-            })
-          "
+            }),
+            handleSendLog('내 PC 사양 확인하기'),
+          ]"
        >
          <em
            class="inline-flex items-center justify-center gap-[8px] not-italic"
@@ -439,6 +445,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                  target="_blank"
                  rel="noopener noreferrer"
                  :href="tm(`Download_Driver_${driver.driverCode}_Url`)"
+                  @click="handleSendLog(`다운로드_${driver.driverText}`)"
                >
                  <span>{{ tm('Download_Button_Download') }}</span>
                </AtomsButton>