[typescript] 타입스크립트와 GraphQL을 함께 사용하는 구글 애널리틱스 연동 방법

15 Dec 2023

typescript

본 포스트에서는 타입스크립트와 GraphQL을 사용하여 구글 애널리틱스를 통합하는 방법에 대해 소개합니다.

1. 구글 애널리틱스 API 설정

먼저, 구글 애널리틱스 API를 사용하기 위해 프로젝트를 생성하고 API를 활성화해야 합니다. 생성된 프로젝트에서 사용자 인증 정보를 생성하고 서비스 계정을 만들어 JSON 키 파일을 다운로드합니다.

2. 타입스크립트 프로젝트 설정

타입스크립트 프로젝트에 필요한 의존성을 설치합니다.

npm install googleapis graphql @types/googleapis @types/graphql

그리고 위에서 다운로드한 JSON 키 파일을 프로젝트에 추가합니다.

3. GraphQL 스키마 정의

구글 애널리틱스 API는 GraphQL을 기반으로 작동하므로, 사용할 쿼리 및 뮤테이션에 대한 스키마를 정의해야합니다.

// analyticsSchema.ts
import { gql } from 'graphql';

export const GET_ANALYTICS_DATA = gql`
  query GetAnalyticsData($startDate: String!, $endDate: String!) {
    analyticsData(startDate: $startDate, endDate: $endDate) {
      totalUsers
      pageViews
      // 기타 필요한 데이터
    }
  }
`;

4. 구글 애널리틱스 API 연동

타입스크립트에서 구글 애널리틱스 API를 사용하여 데이터를 요청하고 응답을 처리합니다.

// analyticsService.ts
import { google } from 'googleapis';
import { GET_ANALYTICS_DATA } from './analyticsSchema';

const CLIENT_EMAIL = 'your-client-email'; // JSON 키 파일에서 확인 가능
const PRIVATE_KEY = 'your-private-key'; // JSON 키 파일에서 확인 가능

const jwtClient = new google.auth.JWT(CLIENT_EMAIL, null, PRIVATE_KEY, [
  'https://www.googleapis.com/auth/analytics.readonly',
]);

const getAnalyticsData = async (startDate: string, endDate: string) => {
  try {
    const result = await graphqlClient.query({
      query: GET_ANALYTICS_DATA,
      variables: { startDate, endDate },
      context: { jwtClient },
    });

    // 결과 처리 로직
  } catch (error) {
    // 에러 처리 로직
  }
};

결론

이제 타입스크립트와 GraphQL을 사용하여 구글 애널리틱스 API를 연동하는 방법에 대해 알아보았습니다. 이를 통해 편리하고 유연한 방식으로 구글 애널리틱스 데이터를 활용할 수 있습니다.

참고 문헌:

부가적인 설정이나 구체적인 데이터 처리 방법은 각각의 프로젝트 구성과 요구사항에 따라 달라질 수 있습니다.