fix(analytics.ts): 🐛analytics setup

TOKTOKHAN-DEV · Mar 8, 2024 · c06d0c9 · c06d0c9
1 parent 20e944e
commit c06d0c9
Show file tree

Hide file tree

Showing 12 changed files with 1,960 additions and 1,900 deletions.
diff --git a/.env.development b/.env.development
@@ -7,6 +7,6 @@ NEXT_PUBLIC_KAKAO_CLIENT_ID=''
 NEXT_PUBLIC_NAVER_CLIENT_ID=''
 NEXT_PUBLIC_AUTH_TOKEN_KEY=toktokhan
 
-NEXT_PUBLIC_FACEBOOK_PIXEL_KEY = ''
-NEXT_PUBLIC_GA_KEY = ''
-NEXT_PUBLIC_KAKAO_PIXEL_KEY = ''
+NEXT_PUBLIC_FACEBOOK_PIXEL_KEY=
+NEXT_PUBLIC_GA_KEY=
+NEXT_PUBLIC_KAKAO_PIXEL_KEY=
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -31,8 +31,8 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
-    '@typescript-eslint/no-namespace': 'off',
     '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-namespace': 'off',
     '@next/next/no-img-element': 'off',
   },
   settings: {

diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "@testing-library/react": "^14.0.0",
     "@tosspayments/payment-sdk": "^1.1.1",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/facebook-pixel": "^0.0.25",
+    "@types/facebook-pixel": "^0.0.30",
     "@types/gtag.js": "^0.0.12",
     "@types/kakao-pixel": "^0.11.0",
     "@types/lodash-es": "^4.17.8",

diff --git a/src/containers/Home/Home.tsx b/src/containers/Home/Home.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Box, Text } from '@chakra-ui/react';
 
 function Home() {

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -34,8 +34,10 @@ class MyDocument extends Document {
       <Html>
         <Head>
           <script dangerouslySetInnerHTML={this.redirectIEtoEdge()} />
-          {/* Global site tag (gtag.js) - Google Analytics */}
-          {/* {GASetter()} */}
+          {/* 분석도구가 필요한 경우 주석 해제 후 사용해주세요. src/utils/analytics/analytics.ts 설정 필요 */}
+          {/* {GASetter()}
+          {KakaoSetter()}
+          {FacebookSetter()} */}
         </Head>
         <body>
           <ColorModeScript initialColorMode={config.initialColorMode} />

diff --git a/src/utils/analytics/analytics.ts b/src/utils/analytics/analytics.ts
@@ -1,51 +1,31 @@
-import { ENV } from '@/configs/env';
-
+import { ENV } from '../../configs/env';
 import { FacebookAnalytics } from './facebook';
 import { GoogleAnalytics } from './google';
 import { KakaoAnalytics } from './kakao';
-
-const googleAnalytics = ENV.GA_KEY
-  ? new GoogleAnalytics(ENV.GA_KEY)
-  : console.error('should set GA key');
-
-const facebookAnalytics = ENV.FACEBOOK_PIXEL_KEY
-  ? new FacebookAnalytics(ENV.FACEBOOK_PIXEL_KEY)
-  : console.error('should set facebook key');
-
-const kakaoAnalytics = ENV.KAKAO_PIXEL_KEY
-  ? new KakaoAnalytics(ENV.KAKAO_PIXEL_KEY)
-  : console.error('should set Kakao pixel key');
-
-export const completeRegistrationAnalytics = (social: string) => {
-  googleAnalytics?.completeRegistration(social);
-  facebookAnalytics?.completeRegistration(social);
-  kakaoAnalytics?.completeRegistration(social);
-};
-
-export const startProjectAnalytics = (params: { id: string; step: string }) => {
-  googleAnalytics?.startProject(params);
-  facebookAnalytics?.startProject(params);
-  kakaoAnalytics?.startProject(params);
-};
-
-export const completeProjectAnalytics = (id: string) => {
-  googleAnalytics?.completeProject(id);
-  facebookAnalytics?.completeProject(id);
-  kakaoAnalytics?.completeProject(id);
-};
-
-export const consultingApplyAnalytics = () => {
-  googleAnalytics?.consultingApply();
-  facebookAnalytics?.consultingApply();
-  kakaoAnalytics?.consultingApply();
-};
-
-export const requestApplyAnalytics = () => {
-  googleAnalytics?.requestApply();
-  facebookAnalytics?.requestApply();
-  kakaoAnalytics?.requestApply();
+import { Analytics } from './types';
+
+/**
+ * 필요하지 않은 분석 도구는 이 코드에서 제거해주세요.
+ * 단일 분석 도구만 사용할 경우, 해당 도구의 메서드를 직접 호출하여 사용합니다. 
+  useEffect(() => {
+    facebookAnalytics?.pageView({ content_name: 'page2', content_ids: [2] });
+  }, [])
+*/
+
+export const googleAnalytics = new GoogleAnalytics(ENV.GA_KEY);
+export const facebookAnalytics = new FacebookAnalytics(ENV.FACEBOOK_PIXEL_KEY);
+export const kakaoAnalytics = new KakaoAnalytics(ENV.KAKAO_PIXEL_KEY);
+
+/** Google Analytics, Facebook Pixel, Kakao Pixel을 모두 사용하는 경우 아래의 함수를 공통으로 사용할 수 있습니다. */
+export const completeRegistrationAnalytics = (
+  params: Analytics.CompleteRegistration,
+) => {
+  googleAnalytics?.completeRegistration(params.Ga);
+  facebookAnalytics?.completeRegistration(params.Fbq);
+  kakaoAnalytics?.completeRegistration(params.Kakao);
 };
 
+/** 각 분석 도구의 설정 메서드를 호출하는 함수들입니다. */
 export const GASetter = () => googleAnalytics?.GASetter();
 export const FacebookSetter = () => facebookAnalytics?.FacebookSetter();
 export const KakaoSetter = () => kakaoAnalytics?.KakaoSetter();
diff --git a/src/utils/analytics/facebook.tsx b/src/utils/analytics/facebook.tsx
@@ -1,50 +1,93 @@
+import React from 'react';
+
+import { Analytics } from './types';
+import { analyticsValidCheckHandler } from './utils/valid-check-with-proxy';
+
 /**
  * @brief Meta pixel(Facebook) event가 정의 된 class입니다.
  * @description Meta 픽셀의 fbq('track') 함수를 사용하여 다음 표준 이벤트를 추적할 수 있습니다.
  *  또한 표준 이벤트는 특정 개체 속성이 포함된 매개변수 개체를 지원하므로 이벤트에 대한 상세한 정보를 포함할 수 있도록 합니다.
  * @see Docs https://developers.facebook.com/docs/meta-pixel/reference#object-properties
+ * @see Docs https://developers.facebook.com/docs/marketing-api/conversions-api/guides/gtm-server-side?locale=ko_KR
  */
+
 export class FacebookAnalytics {
-  public facebookAnalytics: facebook.Pixel.Event = typeof window !== "undefined" ? window.fbq : () => {};
+  private fbq: facebook.Pixel.Event = () => {};
 
-  constructor(private key: string) {
+  /**
+   * FacebookAnalytics 클래스의 새 인스턴스를 생성합니다.
+   * @param key Facebook 픽셀 키입니다.
+   */
+  constructor(private key?: string) {
+    if (!key) {
+      console.warn('Facebook 키 설정이 필요합니다.');
+      return;
+    }
     this.key = key;
+    this.fbq = new Proxy(
+      {
+        fbq: typeof window !== 'undefined' ? window.fbq : () => {},
+      },
+      analyticsValidCheckHandler,
+    ).fbq;
   }
 
-  completeRegistration = (social: string) => {
-    this.facebookAnalytics('track', 'CompleteRegistration', {
-      content_name: social,
-    });
+  /**등록 양식을 작성 완료한 경우.
+   * 어떤 사람이 작성한 구독 또는 등록 양식을 제출합니다.
+   * @param {string} content_name - 페이지/제품의 이름
+   * @param {string} currency - value에 지정된 통화
+   * @param {number} value -비즈니스에서 이 이벤트를 실행한 사용자의 가치
+   */
+  completeRegistration = (params: Analytics.CompleteRegistration['Fbq']) => {
+    this.fbq('track', 'CompleteRegistration', params);
   };
 
-  startProject = (params: { id: string; step: string }) => {
-    window.fbq('track', 'ViewContent', {
-      contents_id: params.id,
-      content_name: 'StartProject',
-    });
+  /**
+   * 페이지 뷰 : 메인+ 상세+ 기타 모든 페이지
+   * @param {number[]} content_ids - 이벤트와 연결된 제품 ID(예: SKU(['ABC123', 'XYZ789'] 등))
+   * @param {string} content_name - 페이지/제품의 이름
+   */
+  pageView = (params: Analytics.PageView['Fbq']) => {
+    this.fbq('track', 'ViewContent', params);
   };
 
-  completeProject = (id: string) => {
-    window.fbq('track', 'ViewContent', {
-      content_name: 'CompleteProject',
-      content_ids: id,
-    });
+  /**
+   * 콘텐츠 조회 : 보통 상세페이지를 의미
+   * ViewContent는 누군가가 웹페이지 URL에 방문했다는 것을 알려주지만 그 방문자가 해당 페이지에서 무엇을 보거나 무엇을 했는지는 알려주지 않습니다.
+   * @param {string} content_name - 페이지/제품의 이름
+   * @param {string} content_category - 페이지/제품의 카테고리
+   * @param {number[]} content_ids - 이벤트와 연결된 제품 ID(예: SKU(['ABC123', 'XYZ789'] 등))
+   * @param {string} content_type- 전달된 content_ids 또는 contents를 기반으로 한 product 또는 product_group.
+   * @param {string} currency - value에 지정된 통화
+   * @param {number} value -비즈니스에서 이 이벤트를 실행한 사용자의 가치
+   */
+  viewContent = (params: Analytics.ViewContent['Fbq']) => {
+    this.fbq('track', 'ViewContent', params);
   };
 
-  consultingApply = () => {
-    window.fbq('track', 'Lead', { content_name: 'ConsultingApply' });
+  /**
+   * 검색
+   * @param {string} content_name - 페이지/제품의 이름
+   * @param {string} content_category - 페이지/제품의 카테고리
+   * @param {number[]} content_ids - 이벤트와 연결된 제품 ID(예: SKU(['ABC123', 'XYZ789'] 등))
+   * @param {string} content_type- 전달된 content_ids 또는 contents를 기반으로 한 product 또는 product_group.
+   * @param {string} currency - value에 지정된 통화
+   * @param {number} value -비즈니스에서 이 이벤트를 실행한 사용자의 가치
+   */
+  search = (params: Analytics.Search['Fbq']) => {
+    this.fbq('track', 'Search', params);
   };
 
-  requestApply = () => {
-    window.fbq('track', 'Lead', { content_name: 'RequestApply' });
-  };
+  /**
+   * Facebook 픽셀 스크립트와 noscript 태그를 렌더링합니다.
+   * @returns Facebook 픽셀 스크립트와 noscript 태그에 대한 JSX 요소입니다.
+   */
 
   FacebookSetter = () => {
     return (
-      <>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
           !function(f,b,e,v,n,t,s)
           {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
           n.callMethod.apply(n,arguments):n.queue.push(arguments)};
@@ -54,20 +97,9 @@ export class FacebookAnalytics {
           s.parentNode.insertBefore(t,s)}(window, document,'script',
           'https://connect.facebook.net/en_US/fbevents.js');
           fbq('init', '${this.key}');
-          fbq('track', 'PageView');
         `,
-          }}
-        />
-        <noscript>
-          <img
-            alt="facebook-pixel"
-            height="1"
-            width="1"
-            style={{ display: 'none' }}
-            src={`https://www.facebook.com/tr?id=${this.key}&ev=PageView&noscript=1`}
-          />
-        </noscript>
-      </>
+        }}
+      />
     );
   };
 }
diff --git a/src/utils/analytics/google.tsx b/src/utils/analytics/google.tsx
@@ -1,34 +1,31 @@
-/**
- * @brief Google analytics event가 정의 된 class입니다.
- * @description Google 애널리틱스에서 자동으로 수집되는 정보 외에 추가로 정보를 수집하거나 애널리틱스의 특정 기능을 사용하려는 경우 사용합니다.
- * @see Docs https://developers.google.com/analytics/devguides/collection/ga4/events?hl=ko&client_type=gtag
- */
+import { Analytics } from './types';
+import { analyticsValidCheckHandler } from './utils/valid-check-with-proxy';
 
 export class GoogleAnalytics {
-  public googleAnalytics: Gtag.Gtag = typeof window !== "undefined" ? window.gtag : () => {};
+  private ga: Gtag.Gtag = () => {};
 
-  constructor(private key: string) {
+  constructor(private key?: string) {
+    if (!key) {
+      console.warn('GA 키 설정이 필요합니다.');
+      return;
+    }
     this.key = key;
+    this.ga = new Proxy(
+      { gtag: typeof window !== 'undefined' ? window.gtag : () => {} },
+      analyticsValidCheckHandler,
+    ).gtag;
   }
 
-  completeRegistration = (social: string) => {
-    this.googleAnalytics('event', 'CompleteRegistration', { social });
+  completeRegistration = (params: Analytics.CompleteRegistration['Ga']) => {
+    this.ga('event', 'sign_up', params);
   };
 
-  startProject = (params: { id: string; step: string }) => {
-    this.googleAnalytics('event', 'StartProject', params);
+  viewContent = (params: Analytics.ViewContent['Ga']) => {
+    this.ga('event', 'view_item', params);
   };
 
-  completeProject = (id: string) => {
-    this.googleAnalytics('event', 'CompleteProject', { id });
-  };
-
-  consultingApply = () => {
-    this.googleAnalytics('event', 'ConsultingApply');
-  };
-
-  requestApply = () => {
-    this.googleAnalytics('event', 'RequestApply');
+  login = () => {
+    this.ga('event', 'login');
   };
 
   GASetter = () => {