우리 서비스에서 발생한 이벤트가 Hackle로 제대로 전송되는지 확인하는 일, 이제 개발자 도구를 열지 않아도 됩니다. Hackle Event Explorer만 있으면 내 서비스 화면에서 Hackle 이벤트가 어떻게 발생하는지 바로 확인할 수 있어요!
핵클 서비스를 사용하기위해 SDK를 심었습니다. 이벤트 이름도 정했고, 필요한 속성도 넣었습니다.
그다음에 꼭 확인해야 하는 게 있어요. 바로 실제 서비스 화면에서 버튼을 눌렀을 때 이벤트가 제대로 찍히는지, 의도한 값이 함께 전송되는지 확인하는 일입니다.
그동안 이 확인과정은 꽤 번거로웠습니다. 브라우저 개발자 도구를 열고, 네트워크 탭에서 Hackle 이벤트 요청을 찾고, 인코딩된 값을 직접 해석해야 했어요. 개발자에게는 익숙한 일이지만 QA나 PM, 그로스 담당자가 같이 보기에는 쉽지 않았죠. 그래서 이벤트 검수 과정이 개발자에게만 몰리거나, “아마 잘 들어갔겠지” 하고 넘어가는 경우도 생기곤 했습니다.
이제는 Hackle Event Explorer로 확인해 보세요. 페이지를 둘러보는 동안 Hackle SDK가 보내는 이벤트를 자동으로 잡아내고, 사람이 읽기 쉬운 형태로 보여주는 크롬 확장 프로그램입니다.
이번 글에서는 Hackle Event Explorer에 대해 설명드릴게요!
[핵심 요약]
- Hackle Event Explorer는 현재 브라우저 탭에서 발생하는 Hackle 이벤트를 실시간으로 보여줍니다.
- 이벤트 이름뿐 아니라 속성, 사용자 식별자, 발생 순서까지 함께 확인할 수 있습니다.
- 개발자, QA, PM이 같은 화면을 보며 이벤트 연동 상태를 검수할 때 유용합니다
- 확인 과정은 브라우저 안에서 끝나며, 이벤트 내용을 별도로 저장하거나 외부로 전송하지 않습니다.
이벤트 검수에서 가장 답답한 순간은 “방금 클릭한 게 이벤트로 잘 들어갔나?”를 바로 알 수 없을 때입니다.
Hackle Event Explorer를 켜두면 페이지에서 행동이 일어난 순간 화면에 토스트 알림이 뜹니다. 상품을 장바구니에 담았을 때 `add_to_cart`가 보이고, 결제 페이지에 들어갔을 때 `begin_checkout`이 보이는 식이에요.
이렇게 확인하면 QA 시나리오를 따라가기가 훨씬 수월해집니다. 회원가입, 로그인, 상품 조회, 장바구니 담기, 결제 진입처럼 단계별로 클릭하면서 이벤트가 빠지는 구간을 바로 확인할 수 있으니까요.
한 시나리오 안에서 여러 이벤트가 연속으로 발생하면, 어떤 순서로 이벤트가 쌓였는지 다시 확인해야 합니다.
Hackle Event Explorer는 현재 탭에서 발생한 이벤트를 최신순 목록으로 보여줍니다. 발생 시각과 이벤트 키를 함께 볼 수 있고, 찾고 싶은 이벤트는 검색으로 골라볼 수 있어요.
예를 들어 결제 테스트를 하면서 `view_product -> add_to_cart -> begin_checkout -> purchase` 순서로 이벤트가 발생해야 한다면, 목록에서 실제 발생 순서를 확인할 수 있습니다. 특정 이벤트가 빠졌다면 어느 단계에서 누락됐는지도 빠르게 좁혀볼 수 있죠.
핵클 대시보드의 이벤트 조회 기능은 전송된 이벤트 이력을 기간, 이벤트 유형, 속성, 사용자 식별자, SDK 조건으로 확인할 수 있는 기능입니다. 반면 Hackle Event Explorer는 지금 브라우저에서 발생하는 이벤트를 즉시 확인하는 데 초점이 있어요. 개발·검수 중에는 확장 프로그램으로 빠르게 보고, 실제 수집 이력은 대시보드 이벤트 조회에서 조건별로 확인하는 식으로 함께 사용할 수 있습니다.
이벤트 이름이 맞아도 속성이 틀리면 분석에서 문제가 생깁니다.
`purchase` 이벤트는 찍혔지만 주문 금액이 비어 있거나, 상품 ID가 다른 형식으로 들어가거나, 쿠폰 사용 여부가 빠져 있다면 이후 퍼널 분석이나 캠페인 타겟팅에서 원하는 기준으로 나누기 어렵습니다.
Event Explorer에서는 이벤트 상세를 열어 전송된 값을 확인할 수 있습니다. 직접 넣은 이벤트 속성, 유저 속성, Hackle이 자동으로 수집한 속성을 나눠서 보기 때문에 “이 값이 정말 들어갔는지”를 검수하기 좋답니다.
Hackle Event Explorer에서는 이벤트를 펼쳐 직접 넣은 이벤트 속성, 유저 속성, Hackle이 자동으로 수집한 속성을 나눠 볼 수 있습니다. QA 담당자는 테스트 케이스별 기대 값과 실제 전송 값을 비교할 수 있고, PM이나 그로스 담당자는 분석에 필요한 값이 누락되지 않았는지 확인할 수 있어요.
Hackle Event Explorer에서는 현재 탭의 Device ID와 User ID를 바로 확인할 수 있습니다.기기를 구분하는 Device ID와 로그인한 사용자를 가리키는 User ID를 함께 확인할 수 있어, 이벤트가 비로그인 방문자 기준으로 수집되는지 로그인한 사용자 기준으로 수집되는지 쉽게 알 수 있어요.
예를 들어, 미로그인 상태의 사용자가 로그인시 user ID 가 올바르게 수집되는지 검수할 수 있습니다.
track 이벤트와 exposure 이벤트의 토스트 알림도 따로 켜고 끌 수 있습니다. 알림을 꺼도 이벤트 기록은 계속 쌓이기 때문에, 화면을 방해받지 않고 테스트한 뒤 필요한 시점에 목록으로 다시 확인할 수 있습니다.
토스트 알림은 색상, 글자 크기, 여백도 조정할 수 있습니다. 팀에서 화면을 함께 보며 검수할 때는 눈에 잘 띄게 키우고, 혼자 개발 중일 때는 덜 방해되도록 줄이는 식으로 상황에 맞게 다듬을 수 있어요.
Hackle Event Explorer는 Hackle 이벤트 수집 주소로 가는 요청을 확인해 화면 토스트와 목록으로 보여줍니다. 이 과정은 사용자의 브라우저 안에서 이뤄지며, 이벤트 내용을 별도로 저장하거나 다른 곳으로 전송하지 않습니다.
검수 도구는 편해야 하지만, 동시에 어떤 데이터를 다루는지도 분명해야 합니다. Event Explorer는 이벤트 연동 상태를 빠르게 확인하기 위한 도구로, 개발·QA·PM이 같은 브라우저 화면에서 이벤트 발생 여부와 속성 값을 확인하는 데 집중했습니다.
이제 개발자가 아니어도 내 서비스 화면을 보면서 이벤트가 잘 발생하고있는지 확인할 수 있어요. “이 이벤트가 안 찍히는 것 같아요”가 아닌, 어떤 화면에서 어떤 행동을 했을 때 어떤 이벤트가 보였는지 바로 맞춰볼 수 있답니다.
Hackle Event Explorer로 내 서비스 화면에서 이벤트 데이터를 바로 확인해 보세요. 이벤트가 제대로 찍히는지, 어떤 값이 함께 들어가는지, 누구 기준으로 기록되는지 더 빠르게 볼 수 있어요!
지금 바로 크롬 웹 스토어에서 설치하고 직접 사용해보세요!
👉 [Hackle Event Explorer 설치하러가기]
