google analytics 4

1. Google Analytics 4 API 설정

GA4 데이터를 가져오기 위해 Google Analytics Data API를 사용

(1) Google Cloud Console 설정

1. 프로젝트 생성:
   • Google Cloud Console에 접속하여 새 프로젝트를 생성
2. API 활성화:
   • "Library"에서 Google Analytics Data API v1을 검색하고 활성화
3. 서비스 계정 생성:
   • "IAM & Admin > Service Accounts"에서 새 서비스 계정을 만들기
   • JSON 키 파일을 다운로드
4. Google Analytics 계정 연결:
   • Google Analytics 관리자 설정에서 계정 > 계정 설정 > 계정 액세스 관리로 이동하여 서비스 계정 이메일을 추가
   • 권한: 읽기 및 분석 이상 부여.

---

2. API 호출을 위한 서버 설정

API 호출은 보안을 위해 백엔드에서 처리하는 것이 좋음

(1) Express 서버로 API 호출

1. Express 서버 설치:

 

npm install express googleapis body-parser cors

 

 

2. 서버 코드 작성:

 

const express = require('express');
const { google } = require('googleapis');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(bodyParser.json());

// 서비스 계정 JSON 키 파일 경로
const SERVICE_ACCOUNT_KEY = require('./path-to-your-service-account-key.json');
const analytics = google.analyticsdata({
    version: 'v1beta',
    auth: new google.auth.GoogleAuth({
        credentials: SERVICE_ACCOUNT_KEY,
        scopes: ['https://www.googleapis.com/auth/analytics.readonly'],
    }),
});

app.post('/get-ga-data', async (req, res) => {
    try {
        const response = await analytics.properties.runReport({
            property: 'properties/YOUR_PROPERTY_ID', // GA4 속성 ID
            requestBody: {
                dimensions: [{ name: 'date' }],
                metrics: [{ name: 'activeUsers' }],
                dateRanges: [{ startDate: '7daysAgo', endDate: 'yesterday' }],
            },
        });
        res.json(response.data);
    } catch (error) {
        res.status(500).send(error.message);
    }
});

const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

 

(2) 서버 실행:

node server.js

 

 

---

3. Vue 3에서 데이터 가져오기

백엔드에서 제공하는 데이터를 Vue 3에서 가져와 시각화

(1) Axios 설치:

npm install axios

 

 

(2) Vue 컴포넌트 작성:

 

<template>
  <div>
    <h1>Google Analytics Dashboard</h1>
    <div v-if="loading">Loading...</div>
    <div v-else>
      <h2>Active Users (Last 7 Days)</h2>
      <ul>
        <li v-for="(item, index) in gaData" :key="index">
          {{ item.date }}: {{ item.activeUsers }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      gaData: [],
      loading: true,
    };
  },
  async mounted() {
    try {
      const response = await axios.post('http://localhost:5000/get-ga-data');
      const rows = response.data.rows || [];
      this.gaData = rows.map((row) => ({
        date: row.dimensionValues[0].value,
        activeUsers: row.metricValues[0].value,
      }));
    } catch (error) {
      console.error('Error fetching GA data:', error);
    } finally {
      this.loading = false;
    }
  },
};
</script>

 

---

4. 데이터 시각화 추가 (선택)

차트를 추가하여 데이터를 더 직관적으로 보여줄 수 있음

(1) Chart.js 설치:

 

npm install chart.js

 

(2) 차트 컴포넌트 작성:

<template>
  <div>
    <h1>Google Analytics Dashboard</h1>
    <canvas id="ga-chart"></canvas>
  </div>
</template>

<script>
import { Chart } from 'chart.js';

export default {
  data() {
    return {
      gaData: [],
    };
  },
  async mounted() {
    try {
      const response = await axios.post('http://localhost:5000/get-ga-data');
      const rows = response.data.rows || [];
      this.gaData = rows.map((row) => ({
        date: row.dimensionValues[0].value,
        activeUsers: row.metricValues[0].value,
      }));

      // Chart.js로 데이터 렌더링
      const ctx = document.getElementById('ga-chart').getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: this.gaData.map((item) => item.date),
          datasets: [
            {
              label: 'Active Users',
              data: this.gaData.map((item) => item.activeUsers),
              borderColor: 'blue',
              fill: false,
            },
          ],
        },
      });
    } catch (error) {
      console.error('Error fetching GA data:', error);
    }
  },
};
</script>