기본적으로 트래커는 플랫폼에 유용한 정보를 많이 전송하지만, 이 정보는 모두 표준 정보입니다. 어떤 데이터가 Web API의 일부라면 대부분 트래킹하고 있다고 보시면 됩니다.

그런데 애플리케이션에만 해당하는 데이터로 세션 녹화를 보강하고 싶다면 어떻게 해야 할까요?

예를 들어 사용자의 리플레이를 검토할 때 그 사용자가 어떤 유료 플랜을 사용 중인지 알고 싶을 수 있습니다. 이런 정보는 개발자에게 추가적인 맥락을 제공할 수 있으므로, 표준 정보가 아니라는 이유만으로 무시할 필요는 없습니다.

바로 이럴 때 메타데이터가 필요합니다.

참고: YouTube 채널에 이 튜토리얼의 동영상 버전도 있습니다. 시각적으로 배우는 것을 선호하신다면 함께 확인해 보세요.

세션 리플레이에서 메타데이터란 사용자가 직접 만들어 내지는 않지만 어떤 식으로든 그 사용자와 관련된 모든 정보를 말합니다.

즉, 사용자가 특정 링크를 클릭하거나 특정 동작을 수행하는 것은 메타데이터가 아니라 커스텀 이벤트입니다(자세한 내용은 커스텀 이벤트 문서를 참고하세요).

하지만 사용자가 무료 플랜인지 유료 플랜인지 알려 주는 플래그나, 사용자가 어디에서 유입되었는지 보여 주는 트래킹 코드는 어떨까요? 이런 것들이 모두 메타데이터이며, 세션에 쉽게 추가할 수 있습니다.

가장 먼저 해야 할 일은 플랫폼에서 직접 메타데이터 필드를 설정하는 것입니다.

이 단계를 건너뛰면 어떤 정보도 기록할 수 없으니 반드시 진행하세요!

먼저 상단 메뉴 오른쪽 위의 톱니바퀴를 클릭하여 프로젝트 설정 페이지로 이동합니다.

설정 페이지에서 화면 왼쪽 끝에 있는 “Metadata” 메뉴 항목을 클릭합니다.

그러면 메타데이터 설정 화면으로 이동합니다. 드롭다운에서 올바른 프로젝트를 선택하고 필요한 만큼 필드를 만드세요.

이 예제에서는 “e-commerce test” 프로젝트에 3개의 필드를 만들었습니다.

• “plan”: 사용자의 현재 플랜을 담습니다.
• “utm_source”: 사용자가 어디에서 유입되었는지 나타내는 코드를 담습니다.
• “items_in_cart”: 사용자의 장바구니에 담긴 상품의 총개수를 담습니다.

마지막 필드는 사용자의 동작에 따라 달라지는 데이터로, 권장하는 방식과는 다릅니다. 하지만 이 예제를 통해 메타데이터 필드의 한계와, 이 정보가 왜 메타데이터 대신 커스텀 이벤트여야 했는지를 확인할 수 있습니다.

설정이 끝났으면, 다음 단계는 데이터를 세션의 일부로 실제로 전송하는 데 필요한 코드를 추가하는 것입니다.

세션에 메타데이터를 추가하려면 트래커의 setMetadata 메서드를 사용합니다. 이 메서드는 사용자 세션 중 언제든지 사용할 수 있지만, 다음 두 가지 사항에 유의하세요.

1. 같은 메타데이터 필드에 여러 값을 적용하면 마지막 값만 세션의 일부로 저장됩니다.
2. 모든 값은 문자열이어야 합니다. 그렇지 않으면 저장되지 않습니다. 트래커는 값을 문자열로 변환하지 않으므로 주의하세요.

빨간색 화살표는 관련 변경 사항이 적용된 위치를 보여 줍니다. 이 컨텍스트 프로바이더는 setMetadata라는 함수를 내보내며, 이 함수가 다시 트래커의 setMetadata 메서드를 호출합니다.

동작하는 예제가 필요하다면 이 저장소를 확인해 보세요.

이제 메타데이터 필드를 설정하고 싶을 때마다 내보낸 함수를 사용하기만 하면 됩니다.

이 예제에서는 utm_source와 plan 필드를 홈페이지에서 직접 설정하고, 사용자가 장바구니에 상품을 추가할 때마다 마지막 남은 필드를 업데이트하겠습니다.

pages/index.tsx 파일에 다음 코드를 추가합니다.

// inside the main component
const { startTracking, setMetadata } = useContext(TrackerContext)
//...
useEffect(() => {
    async function getProds() {
      await startTracking()
      setMetadata('plan', getPlan()) //addition 
      setMetadata('utm_source', getUTMSource()) //addition
      dispatch(getMakeUpProducts() as any)
    }

    getProds()
  }, [dispatch])

이 훅은 대부분 이미 있던 코드이며, 여기에 setMetadata 함수에 대한 참조와 그 함수를 호출하는 코드 두 줄을 추가했습니다. getPlan과 getUTMSource 두 함수는 이 예제에서는 임의의 데이터를 반환합니다. 실제 사용 사례에서는 용도에 맞게 직접 구현해야 합니다.

이 코드는 홈페이지가 로드될 때 이 메타데이터 값들을 설정합니다.

이제 마지막 값인 장바구니 상품 수를 추가해야 합니다. 이를 위해 “Add to cart”를 클릭했을 때의 동작을 제어하는 ProductSidebar 컴포넌트로 이동하여, 장바구니 상품 수의 변화에 반응하는 훅을 하나 더 추가합니다.

useEffect(() => {
    setMetadata('items_in_cart', productsInCart)
  }, [productsInCart])

물론 앞에서와 마찬가지로 컨텍스트 프로바이더에서 setMetadata 함수를 가져와야 하지만, 그렇게 하면 모든 작업이 끝납니다.

이제 데이터가 저장되고 있습니다. 플랫폼의 세션 목록에서도 이를 확인할 수 있습니다.

이제 모든 세션 리플레이에 메타데이터가 저장되고 있는데, 이를 어떻게 활용할 수 있을까요?

우선 리플레이에서 직접 확인할 수 있습니다.

플레이어 화면 오른쪽 위에 메타데이터 필드가 표시됩니다. 이 예제에서는 사용자가 Enterprise Edition 플랜을 사용 중이며, Reddit에서 유입되었고, 장바구니에 상품을 하나만 담았다는 것을 알 수 있습니다.

메타데이터로 할 수 있는 또 다른 강력한 기능은 검색 조건으로 사용하는 것입니다. Omnisearch 바에서 직접 만든 커스텀 메타데이터 필드를 검색 조건으로 선택할 수 있습니다.

예를 들어 Enterprise Edition 리플레이만 보고 싶다면 다음과 같이 Plan 필드를 선택하고 “ee”로 필터링하면 됩니다.

대시보드용 위젯을 만들 때도 같은 Omnisearch 바를 사용할 수 있습니다. 계속해서 EE 예제를 들면, Enterprise 고객만을 위한 대시보드를 만들고 싶다면 각 커스텀 위젯을 “Plan” 속성으로 필터링하면 됩니다.

예를 들어 다음 위젯은 Enterprise 고객 중 몇 명이 “Add to cart” 버튼을 클릭하고 있는지 보여 줍니다.

그 결과 위젯은 다음과 같은 모습이 됩니다.

메타데이터 필드를 사용하면 세션 리플레이에서 얻는 인사이트를 원하는 만큼 맞춤 설정하고 확장할 수 있습니다.

메타데이터는 세션 리플레이에서 얻을 수 있는 인사이트를 크게 높여 주며, 설정도 비교적 간단합니다.

저장하려는 정보가 무엇이든 항상 문자열 형태여야 하며, 그렇지 않으면 무시된다는 점을 기억하세요.

메타데이터를 사용한 샘플 프로젝트의 전체 소스 코드를 확인할 수 있습니다.

이 과정의 어느 단계에서든 문제가 생기면 Slack 커뮤니티로 문의해 주세요. 개발자에게 직접 질문할 수 있습니다!