moresoo/event-logging-for-react

Google SpreadSheet 기반 데이터 이벤트 Generator & 이벤트 로깅 컴포넌트 (React + Typescript)

Link 에서 프로젝트의 목적과 과정에 대한 내용을 볼 수 있습니다.

1. Start

실행하기

yarn dev

데이터 이벤트 생성하기

// .env

GOOGLE_SHEET_ID=/* GOOGLE_SHEET_ID */
GOOGLE_SERVICE_ACCOUNT_EMAIL=/* GOOGLE_SERVICE_ACCOUNT_EMAIL */
GOOGLE_PRIVATE_KEY=/* GOOGLE_PRIVATE_KEY */

참고: node-google-spreadsheet GitHub

적용 후

yarn generate:dataEvent

2. Google SpreadSheet 기반 데이터 이벤트 생성

Input

Google Spread Sheets 링크

Output

데이터 이벤트명 Map

// src/dataEvent/eventName.ts

export const EVENT_NAME = {
  "인사이트": {
    "메인": {
      "인기_콘텐츠": {
        "콘텐츠": {
          "click": "click__insight__contents",
          "view": "view__insight__contents"
        }
      },
      "카테고리_슬라이더": {
        "카테고리": {
          "click": "click__insight__category"
        }
      },
      "리스트_콘텐츠": {
        "콘텐츠": {
          "click": "click__insight__contents",
          "view": "view__insight__contents"
        }
      }
    },
    "상세페이지": {
      "콘텐츠_헤더": {
        "공유하기": {
          "click": "click__insight__share"
        }
      },
      "추천_콘텐츠": {
        "콘텐츠": {
          "click": "click__insight__contents",
          "view": "view__insight__contents"
        }
      },
      "관련_콘텐츠": {
        "콘텐츠": {
          "click": "click__insight__contents",
          "view": "view__insight__contents"
        }
      }
    }
  }
};

데이터 프로퍼티 Type

// src/dataEvent/eventProperty.ts

export type EventProperty = {
  "인사이트": {
    "메인": {
      "인기_콘텐츠": {
        "콘텐츠": {
          "click": {
            "contentsId": string
          },
          "view": {
            "contentsId": string
          }
        }
      },
      "카테고리_슬라이더": {
        "카테고리": {
          "click": {
            "name": string
          }
        }
      },
      "리스트_콘텐츠": {
        "콘텐츠": {
          "click": {
            "contentsId": string,
            "category": string,
            "isBookmarked": boolean
          },
          "view": {
            "contentsId": string
          }
        }
      }
    },
    "상세페이지": {
      "콘텐츠_헤더": {
        "공유하기": {
          "click": {
            "type": 'kakao' | 'facebook' | 'url'
          }
        }
      },
      "추천_콘텐츠": {
        "콘텐츠": {
          "click": {
            "contentsId": string
          },
          "view": {
            "contentsId": string
          }
        }
      },
      "관련_콘텐츠": {
        "콘텐츠": {
          "click": {
            "contentsId": string
          },
          "view": {
            "contentsId": string
          }
        }
      }
    }
  }
};

3. 이벤트 로깅 컴포넌트 (React + Typescript)

(1) 클릭 이벤트 로깅 컴포넌트

<ClickEventLogging
  path={['인사이트', '메인', '인기_콘텐츠', '콘텐츠']}
  property={{ contentsId: 'abc' }}
>
  <button onClick={() => console.log('콘텐츠 Click')}>
    {`인사이트 > 메인 > 인기_콘텐츠 > 콘텐츠`}
  </button>
</ClickEventLogging>

(2) 뷰 이벤트 로깅 컴포넌트

{isVisible && (
  <ViewEventLogging
    path={['인사이트', '메인', '리스트_콘텐츠', '콘텐츠']}
    property={{ contentsId: 'abc' }}
  >
    <div>{`인사이트 > 메인 > 리스트_콘텐츠 > 콘텐츠`}</div>
  </ViewEventLogging>
)}