Merge pull request #100 from innovationacademy-kr/develop

Develop to master
innovationacademy-kr · Mar 20, 2024 · ee9c40b · ee9c40b
2 parents 8342fc1 + bfc76d4
commit ee9c40b
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -1,20 +1,6 @@
 <!DOCTYPE html>
 <html lang="ko">
   <head>
-    <!-- Google tag (gtag.js) -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-YTMN5V74G8"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "G-YTMN5V74G8");
-    </script>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <link rel="shortcut icon" href="logo.png" />
@@ -69,5 +55,13 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
+    <script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
+    <script type="text/javascript">
+      if (!wcs_add) var wcs_add = {};
+      wcs_add["wa"] = "152eaf5cd6101c0";
+      if (window.wcs) {
+        wcs_do();
+      }
+    </script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "pinia": "^2.0.28",
     "swiper": "^9.0.5",
     "vue": "^3.2.45",
+    "vue-gtag": "^2.0.1",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {

diff --git a/src/components/Login/LoginButton.vue b/src/components/Login/LoginButton.vue
@@ -1,18 +1,24 @@
 <script setup lang="ts">
 import LoadingAnimation from "@/components/common/LoadingAnimation.vue";
 import { ref } from "vue";
+import { event } from "vue-gtag";
 
 const ORIGIN_URL = window.location.origin;
 const BACKEND_URL = import.meta.env.VITE_APP_API_URL;
 const isClicked = ref(false);
+
+const handleClick = () => {
+  isClicked.value = true;
+  event("login", { method: "42OAuth Login" });
+};
 </script>
 
 <template>
   <button class="button">
     <LoadingAnimation v-if="isClicked" />
     <a
       v-else
-      @click="isClicked = true"
+      @click="handleClick"
       :href="`${BACKEND_URL}/user/login/42?redirect=${ORIGIN_URL}/auth`"
       >LOG IN</a
     >

diff --git a/src/components/calendar/AccMonth.vue b/src/components/calendar/AccMonth.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useMonthLogStore } from "@/stores/monthlog";
 import { ref, watch } from "vue";
+import { event } from "vue-gtag";
 const { getMonthAccTimeText, getMonthAcceptedTimeText, showLogs } =
   useMonthLogStore();
 
@@ -12,13 +13,22 @@ watch(showLogs, () => {
   monthText.value = getMonthAccTimeText();
   acceptedMonthText.value = getMonthAcceptedTimeText();
 });
+
+const handleClick = () => {
+  isClicked.value = !isClicked.value;
+  event("click", {
+    event_category: "Buttons",
+    event_label: "Click acceptTime Button",
+    value: 1,
+  });
+};
 </script>
 
 <template>
-  <div v-if="!isClicked" @click="isClicked = !isClicked" class="month">
+  <div v-if="!isClicked" @click="handleClick" class="month">
     총 {{ monthText.hour }}시간 {{ monthText.minute }}분
   </div>
-  <div v-else @click="isClicked = !isClicked" class="month acceptTime">
+  <div v-else @click="handleClick" class="month acceptTime">
     인정 시간 {{ acceptedMonthText.hour }}시간 {{ acceptedMonthText.minute }}분
   </div>
 </template>

diff --git a/src/main.ts b/src/main.ts
@@ -3,6 +3,7 @@ import { createPinia } from "pinia";
 
 import App from "./App.vue";
 import router from "./router";
+import VueGtag from "vue-gtag";
 
 import "./assets/main.css";
 
@@ -11,4 +12,20 @@ const app = createApp(App);
 app.use(createPinia());
 app.use(router);
 
+// env Product에만 추적 ID를 저장하여 운영서버만 활성화
+if (import.meta.env.VITE_GA_ID) {
+  app.use(
+    VueGtag,
+    {
+      config: {
+        id: `${import.meta.env.VITE_GA_ID}`,
+        params: {
+          send_page_view: false, // config 코드를 로드시에 해당 페이지를 전송 유무
+        },
+      },
+    },
+    router
+  );
+}
+
 app.mount("#app");