Vue 애플리케이션에서 트래커를 동작시키는 일은 꽤 간단합니다.

SPA(Single Page Application)를 만든다고 가정하면, 메인 파일의 setup 스크립트에 다음 코드를 추가하기만 하면 됩니다.

<script setup>
// note that you can manually import Tracker class if you want to handle the instance manually
import { tracker } from '@openreplay/tracker'
//... your code here
tracker.configure({
  projectKey: "<your project key>",
  ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
});

tracker.start();
//... more code here
</script>

보안을 위해 projectKey를 애플리케이션 코드에 직접 하드코딩하지 마세요. 대신 설정 파일이나 환경 시스템에 저장하세요.

한 가지 방법은 프로젝트 루트의 .env 파일에 환경 변수를 추가하고 변수 이름 앞에 VITE_ 접두사를 붙이는 것입니다. 그러면 Vue 코드에서 사용할 수 있으며, 나중에 import.meta.env.<your variable name>으로 가져올 수 있습니다.

다음은 예시입니다.

tracker.configure({
  projectKey: import.meta.env.VITE_VUE_APP_PROJECT_KEY,
});

Vue로 복잡한 애플리케이션을 만든다면 Nuxt 또는 비슷한 프레임워크를 사용하고 있을 가능성이 높습니다. 트래커 설정 섹션에서 사용 중인 프레임워크를 찾아보세요.

Vue 프로젝트에 트래커를 설정하는 중 문제가 있다면 Slack 커뮤니티로 문의하여 개발자에게 직접 질문하세요!