서문
Microsoft Clarity는 웹사이트 방문자의 행동을 분석할 수 있으며, 이 사이트에도 적용되어 있습니다.
개인적으로 사용하기 편리하며, 시간이 날 때 사이트 방문 현황을 확인할 수 있습니다.
사용법도 매우 간단하여, <head> 태그 안에 백엔드에서 제공하는 한 줄의 코드를 추가하기만 하면 됩니다.

하지만 많은 광고 규칙이 Clarity의 도메인을 차단하기 때문에 사용자 연결 정보가 많이 누락됩니다. 그러나 nginx를 통해 자체 도메인으로 리버스 프록시하여 이를 피할 수 있습니다. 여기서 구체적인 작업 단계를 제공하여 참고하시기 바랍니다.
요청 분석
아래는 <head> 태그에 추가하는 코드 예시입니다.
또는 브라우저의 개발자 도구를 열어 패킷을 캡처하면, 관련 코드가 먼저 https://www.clarity.ms/tag/abcdefg 를 요청하고, 다운로드된 것은 js 스크립트임을 확인할 수 있습니다:
그 안에는 3개의 링크가 있습니다:
- https://c.clarity.ms/c.gif
- https://www.clarity.ms/s/0.8.13-beta/clarity.js
- https://z.clarity.ms/collect
위 링크들을 하나씩 교체해야 합니다.
링크 교체 및 리버스 프록시
도메인이 example.com이라고 가정하고, clarity.example.com이라는 서브도메인을 생성하여 공인 IP의 nginx 서버로 연결합니다.
이제 https://www.clarity.ms/tag/abcdefg 에서 요청한 스크립트를 /var/www/html/tag/abcdefg에 저장할 수 있습니다.
그런 다음 위의 3개 링크를 다음과 같이 순서대로 교체합니다:
- https://clarity.example.com/c.gif
- https://clarity.example.com/s/0.8.13-beta/clarity.js
- https://clarity.example.com/collect
그 후 https://www.clarity.ms/s/0.8.13-beta/clarity.js 를 /var/www/html/s/0.8.13-beta/clarity.js로 다운로드해야 합니다. 아마도 보시는 시점에는 버전이 다를 수 있으므로 그에 맞게 수정하시면 됩니다. 위의 /var/www/html 디렉토리는 직접 수정할 수 있지만, nginx 프로세스가 접근할 수 있도록 권한에 주의해야 합니다. 이때 디렉토리 구조는 다음과 같습니다:
nginx 리버스 프록시 설정 참고:
웹사이트 재설정
원래 사이트의 <head>에 추가한 스크립트에서 www.clarity.ms를 clarity.example.com으로 교체합니다. 이제 완료되었습니다. 사이트에 접속하여 백엔드에서 실시간 온라인 사용자가 있는지 확인해 보세요!
단점
- 이렇게 하면 단점은 백엔드에 표시되는 모든 방문자의 지리적 위치가 해당 nginx 서버에서 온 것으로 나타난다는 것입니다. 마이크로소프트가 요청 헤더를 기반으로 지리적 위치를 판단할 수 있다면 좋을 텐데요.
- 마이크로소프트의
clarity.js업그레이드를 자동으로 따라갈 수 없습니다. 하지만 직접 스크립트를 작성하여 자동화할 수 있습니다. 참고 코드: