gtag 추가

frontend/src/views/club/Statistics.vue

@@ -6,7 +6,7 @@
     </div>
     <div v-else>
       <div class="period-selector">
-        <select v-model="selectedPeriod" @change="loadStatistics">
+        <select v-model="selectedPeriod" @change="onPeriodChange">
           <option value="30">최근 30일</option>
           <option value="90">최근 90일</option>
           <option value="180">최근 180일</option>
@@ -184,6 +184,7 @@
 
 <script>
 import { ref, onMounted, computed } from 'vue';
+import { useGtag } from 'vue-gtag-next';
 import { Bar as BarChart, Line as LineChart } from 'vue-chartjs';
 import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend } from 'chart.js';
 import apiClient from '@/services/api';
@@ -194,6 +195,7 @@ export default {
   name: 'Statistics',
   components: { BarChart, LineChart },
   setup() {
+    const gtag = useGtag();
     const stats = ref({
       summary: {},
       scoreDistribution: [],
@@ -300,9 +302,25 @@ export default {
     }
 
     onMounted(() => {
+      // Google Analytics 페이지뷰 추적
+      gtag.pageview({
+        page_title: '통계',
+        page_path: window.location.pathname,
+        page_location: window.location.href
+      });
       loadStatistics();
     });
 
+    // 기간 변경 시 GA 이벤트
+    const onPeriodChange = () => {
+      gtag.event('change_period', {
+        'event_category': '통계',
+        'event_label': selectedPeriod.value + '일',
+        'value': Number(selectedPeriod.value)
+      });
+      loadStatistics();
+    };
+
     return {
       stats,
       selectedPeriod,
@@ -314,7 +332,8 @@ export default {
       attendanceTrendChartData,
       attendanceTrendChartOptions,
       participantTrendChartData,
-      getHandicapTrendChartData
+      getHandicapTrendChartData,
+      onPeriodChange
     };
   }
 };