[Feat] amplitude session replay 추가

[eonseok-jeon]

Related Issue : Closes #331

---

🧑‍🎤 Summary

• amplitude session replay 기능 추가
• masking 처리

🧑‍🎤 Screenshot

🧑‍🎤 Comment

amplitude session replay 기능 추가

일단 저희는 amplitude 사용을 위한 SDK(@amplitude/analytics-browser)를 사용하고 있었어서
session replay 또한 SDK(@amplitude/plugin-session-replay-browser)를 사용하는 방향으로 갔습니다
공식문서에서 그렇게 하는 걸 추천하더라고요

This article covers the installation of Session Replay using the Browser SDK plugin. If your site is already instrumented with Amplitude, use this option.
참고자료

session replay를 위한 코드는 굉장히 간단했어요

const sessionReplayTracking = sessionReplayPlugin({
  sampleRate: 0.7,
});

add(sessionReplayTracking);

sampleRate는 세션의 저장 비율인데요
100개의 세션이 발생된다면 그 중 70개만 랜덤으로 저장시킨다는 얘기죠!

저희는 무료 버전이라 1,000개의 session replay를 할 수 있는데요
그래서 약 1,428개 정도의 세션만 감당이 가능해요

공식문서에선 0.01로 설정한 후 상황을 지켜보며 천천히 올리라고 하는데 (참고자료)
모집 기간이 일주일 정도라 사실 그렇게까지 세션이 많이 발생할 거 같지 않아서
그냥 바로 0.7로 뛰어 넘겼어요

---

masking 처리

기본적으로 input의 텍스트 필드는 *로 마스킹이 돼요
하지만 저희는 DefaultSection만 마스킹하고 그 외는 마스킹 하지 않기 위해
CommonSection과 PartSection은 마스킹 처리를 해제해줬어요
이를 위해 class에 amp-unmask를 추가해줬답니다

이때 DefaultSection의 는 마스킹이 필요한 부분인데 text 요소가 아니라 default로 마스킹이 되지 않아요
그래서 class에 amp-block을 추가해줌으로써 마크싱 처리를 해줬어요
참고자료

checkbox는 텍스트 필드가 아니라 마스킹 될 게 없어 보이지만 혹시 몰라 일단 input filed라 class에 amp-unmask 추가해놨습니다 :)

---

amplitude 관련 내용은 여기에 계속 추가해둘게여

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[lydiacho]

확인했습니다 감사합니다 ! :)