대시보드 서비스 기능 명세
공통 헤더
번호 | 컴포넌트 | 행위 | 상세 | 비고 |
0 | 화면 접근 | 모든 페이지에서 헤더를 포함
로그인 되지 않은 사용자와 로그인 된 사용자를 구분하여 기능 분리 | ||
1 | [로고] | 클릭 | 로그인 되지 않은 사용자: 메인 페이지로 이동
로그인 된 사용자: 대시보드 페이지로 이동 | 메인 페이지 - 0
대시보드 페이지 - 0 |
2 | [로그인] | 클릭 | 로그인 되지 않은 사용자: 메인 페이지로 이동
로그인 된 사용자: 표시하지 않음 | 로그인 페이지 - 0 |
3 | [로그아웃] | 클릭 | 로그인 되지 않은 사용자: 표시하지 않음
로그인 된 사용자: 로그아웃 후 메인페이지로 이동 | 메인 페이지 - 0 |
4 | [프로필] | 클릭 | 로그인 되지 않은 사용자: 표시하지 않음
로그인 된 사용자: 회원정보 페이지로 이동 | 회원정보 페이지 - 0 |
사이드바
번호 | 컴포넌트 | 기능 | 상세 | 비고 |
0 | 화면 접근 | 대시보드 페이지에서 사이드바를 포함 | ||
1 | [헤더] | 컴포넌트 | 공통 헤더 - 0 | |
2 | [서비스 목록] | X | 사용자의 서비스 목록을 나열하는 컨테이너
API 호출을 통해 사용자의 서비스 목록을 받아냄 | |
3 | [서비스] | 클릭 | 해당 서비스의 대시보드 페이지를 화면에 나타냄 | |
4 | [서비스 설정] | 클릭 | 해당 서비스의 설정 페이지를 화면에 나타냄 |
메인 페이지
번호 | 컴포넌트 | 기능 | 상세 | 비고 |
0 | 화면 접근 | 로그인 되지 않은 회원 | ||
1 | [로그인] | 클릭 | 로그인 페이지로 이동 | 로그인 페이지 - 0 |
회원가입 페이지
번호 | 컴포넌트 | 행위 | 상세 | 비고 |
0 | 화면 접근 | 로그인 페이지의 회원 가입 버튼
로그인이 되지 않은 사용자에 한해 접근 가능 | ||
1 | [헤더] | 컴포넌트 | 공통 헤더 - 0 | |
2 | [이메일 주소] | 입력 | 사용자가 가입하고자 하는 이메일 입력
regex로 유효한 이메일 형식인지 검증 | |
3 | [비밀번호] | 입력 | 사용자가 사용할 계정 비밀번호 입력
비밀번호는 4~10자의 숫자 혹은 소문자를 포함
regex로 유요한 비밀번호 형식인지 검즘 | |
4 | [비밀번호 확인] | 입력 | [비밀번호]의 입력값과 일치하는지 확인
양방향 바인딩 | |
5 | [이름] | 입력 | 사용자의 이름 입력 | |
6 | [가입] | 클릭 | 회원가입 API 호출 |
로그인 페이지
번호 | 컴포넌트 | 행위 | 상세 | 비고 |
0 | 화면 접근 | 메인 페이지의 로그인 버튼
로그인 되지 않은 상태만 유효 | ||
1 | [헤더] | 컴포넌트 | 공통 헤더 - 0 | |
2 | [회원 가입] | 클릭 | 회원가입 페이지로 이동 | 회원가입 페이지 - 0 |
3 | [이메일 주소] | 입력 | 사용자의 이메일 주소 입력 | |
4 | [비밀번호] | 입력 | 사용자의 비밀번호 입력 | |
5 | [로그인] | 클릭 | 이메일 주소, 비밀번호와 함께 로그인 API 호출
로그인 성공 시 accessToken을 sessionStorage에 저장로그인 실패 시 에러 메시지 출력 |
대시보드 페이지
번호 | 컴포넌트 | 기능 | 상세 | 비고 |
0 | 화면 접근 | 로그인 된 사용자만 접근 가능 | ||
1 | [헤더] | 컴포넌트 | 공통 헤더 - 0 | |
2 | [사이드바] | 컴포넌트 | 사이드바 - 0 | |
3 | [컴포넌트 별 통계] | |||
서비스 설정 페이지
번호 | 컴포넌트 | 기능 | 상세 | 비고 |
0 | 화면 접근 | 로그인 된 사용자만 접근 가능 | ||
1 | [헤더] | 컴포넌트 | 공통 헤더 - 0 | |
2 | [사이드바] | 컴포넌트 | 사이드바 - 0 | |
3 | [스크립트 발급] | 텍스트 | 사용자의 설정을 반영한 JS 스크립트의 CDN 링크를 나타냄
해당 링크를 통해 사용자는 스크립트를 웹서비스에 주입할 수 있음
API를 통해 스크립트의 링크를 받을 수 있음 | 커스텀 이벤트
tag List |
4 | [서비스 관리] | X | 서비스 전체 설정 관리
하나의 설정 그룹만 존재 | |
5 | [서비스 경로] | 입력 | 서비스 도메인 경로를 설정 | |
6 | [서비스 화면 이미지] | 파일 업로드 | 화면 이미지를 업로드 | 구현 X |
7 | [SPA 여부] | 체크박스 | SPA인지 아닌지 설정 | |
8 | [이벤트 관리] | X | 관리할 이벤트를 추가, 삭제
여러개의 이벤트 설정들을 포함 | |
9 | [이벤트 이름] | 입력 | 커스텀 이벤트 이름 | [이벤트 관리]에 속함 |
10 | [이벤트 조건] | 입력 | 이벤트가 발생 될 조건 정의
두가지의 설정을 포함해야 함
이벤트가 발생될 태그id, class
이벤트가 기반하는 DOM 이벤트
예) id가 login인 요소에서 click이벤트가 발생할 때: login 커스텀 이벤트 정의 | [이벤트 관리]에 속함 |
11 | [태그 관리] | X | 관리할 태그를 추가, 삭제
여러개의 태그 설정들을 포함 | |
12 | [수집 이벤트 설정] | 체크박스 | 추적하여 수집 할 컴포넌트에서 발생하는 이벤트를 설정
앞서 정의한 커스텀 이벤트도 포함 | [태그 관리]에 속함 |
13 | [태그 ID] | 입력 | 추적할 컴포넌트의 ID를 설정 | [태그 관리]에 속함 |
14 | [태그 class] | 입력 | 추적할 컴포넌트의 클래스명을 설정
한가지 이상의 클래스를 설정할 수 있음 | [태그 관리]에 속함 |
15 | [태그 추가] | 클릭 | 사용자가 설정한 태그를 추가할 수 있음 | [태그 관리]에 속함 |
16 | [태그 수정] | 클릭 | 사용자의 설정을 수정할 수 있음 | [태그 관리]에 속함 |
17 | [태그 삭제] | 클릭 | 사용자의 설정을 삭제할 수 있음 | [태그 관리]에 속함 |
18 | [타겟 페이지 설정] | 입력 | 사용자의 타겟페이지 설정, 저장 가능 | |
19 | [설정 저장] | 클릭 | 작성한 사용자의 설정이 저장됨
설정 정보들과 함꼐 API를 통해 스크립트를 수정할 수 있음
스크립트 링크는 바뀌지 않음 |
서비스 기능 명세
1.
백엔드, 정보 주고 받고 (B2B 기준)
번호 | 기능 | 상세 | 비고 | |
1 | 회원가입 | 아이디 중복 체크 및 아이디 비밀번호 유효성 검증을 한 후 결과를 리턴한다. | ||
2 | 로그인 | mysql에 있는 정보와 비교 후, 맞다면 redis에 리프레시 토큰을 저장하고 유저에게는 엑세스 토큰을 발급한다. | ||
3 | 서비스 등록 | 관리할 페이지와 원하는 서비스(추적하길 원하는 태그 등등)을 입력 받는다. | 서비스 설정은 다른곳에서… | |
4 | 서비스에 필요한 코드 제공 | 입력받은 정보를 기반으로 유저가 관리하는 서비스에 이식할 js 코드를 제공한다. | ||
5 | 등록한 서비스 목록 조회 | 등록한 서비스들의 목록을 보여준다. | ||
6 | 여정 그래프 조회 | 하이브에 집계된 데이터를 기반으로 해당 url에서 어디로 주로 넘어가는지 빈도를 나타내는 그래프를 그릴수 있도록 데이터를 보낸다. | ||
7 | 당일 조회수 조회 | 최소 단위로 집계한 데이터를 기반으로 오늘 몇명 들어왔는지 정보를 제공한다. | 도메인 | |
8 | 고객수 그래프 조회 | 하이브에 집계된 데이터를 기반으로 고객이 몇명 들어왔는지 원하는 단위에 따라 그래프를 그릴수 있도록 데이터를 보낸다. | 세부 페이지 | |
9 | 유입 경로 차트 조회 | 하이브에 집계된 데이터를 기반으로 해당 서비스가 어디에서 유입됐는지 그래프를 그릴수 있도록 데이터를 보낸다. | 레퍼러 | |
10 | 추적하는 태그 정보 조회 | 하이브에 집계된 데이터를 기반으로 클라이언트가 관심있어 하는 태그에 대한 데이터를 보낸다. | ||
11 | 전환률, 이탈률 | 시작지점부터 타겟 페이지까지 도달한 비율이 전환률, 도달하지 않고 이탈한 비율이 이탈률 | 이벤트 기반 | |
부1 | User Agent 헤더를 통한 사용자 접속 기기 통계 | 추가기능 | ||
부2 | 사용자의 성별, 나이 등 쿠키를 통해 받는 정보 | 추가기능 | ||
부3 | 사용자 클릭 히트맵 | 사용자가 클릭한 위치를 히트맵으로 보여줌 | 추가기능 |
2.
ETL
번호 | 동작위치 | 기능 | 상세 | 비고 |
1 | 웹 페이지 | 로그 발생 및 전달 | 발생한 로그를 모아(페이지 이동, 페이지 닫음) 우리 서버로 보낸다. | api 호출 |
2 | springboot | 로그 검증 | 우리 서비스에 등록된 웹 페이지에서 생성된 로그인지 발급한 토큰 기반으로 확인한다. | enterprise 토큰 검사
api 호출 제한 |
3 | springboot to kafka | 로그 전달 | 검증된 로그들을 이벤트 단위로 나누어 해당 토픽으로 카프카에 넣는다. | 클릭, 페이지이동, 컴포넌트 등등…
Kafka의 사용은 우리 서버에서
Enterprise용은 Kafka 빼고 |
4 | kafka to cassandra process (spark) | 로그 역직렬화 | 카프카에 저장된 로그를 가져와 역직렬화를 하여 카산드라에 저장한다. | 로그의 일부 손실을 감수하고 카프카를 뺄 수도 있음. |
5 | cassandra to hive
process (spark) | 로그 집계 | 최소 단위의 집계를 하여 hive에 저장한다. | 해보고 키스페이스 구조 결정 |
6 | cassandra | 로그 삭제 | 오래된 로그들을 삭제하여 여유 공간을 확보한다. | |
7 | hive | 최종 집계 | 최소 단위로 집계한 데이터들을 보기 쉽도록 다시 집계한다. | 카파, 람다 아키텍처 고려 가능하다면 10초 단위로 값을 업데이트 할수 있도록 제공
표현할 단위 종류별로 집계(5분, 1시간, 1일 등등) |
8 | springboot | 데이터 호출 | 집계된 데이터를 조회한다. |
