사용자가 브라우저 탭을 닫거나 내 웹 페이지에서 다른 곳으로 이동하는 경우를 어떻게 안정적으로 감지할 수 있습니까?

JavaScript에서 창 닫기 이벤트 캡처

사용자 페이지 이탈을 식별하는 것은 웹 분석에서 매우 중요합니다. 이 문서에서는 사용자가 브라우저 탭을 닫거나 특정 페이지에서 다른 페이지로 이동할 때를 감지하는 기술을 살펴봅니다.

Window.close 이벤트

이전에는 window.close 이벤트 창 폐쇄를 추적하는 신뢰할 수 있는 방법을 제공했습니다. 그러나 페이지 수명 주기 관리의 변경으로 인해 이 이벤트의 신뢰성이 떨어집니다.

Visibilitychange 이벤트

최신 브라우저의 경우 visiblechange 이벤트는 사용자가 종료할 때를 더 정확하게 표현합니다. 페이지. 이 이벤트는 페이지의 가시성 상태가 표시에서 숨김으로 전환될 때 트리거됩니다.

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Perform actions on page exit
  }
});

Beacon API

포괄적인 크로스 브라우저 지원을 위해서는 Beacon API 사용을 고려하세요. 비콘 요청은 사용자가 페이지를 떠날 때에도 완료되도록 설계되어 세션 및 분석의 데이터 캡처를 보장합니다.

var url = "https://example.com/foo";
var data = "bar";

navigator.sendBeacon(url, data);

Lifecycle.js 라이브러리

호환성을 위해 레거시 브라우저에서는 lifecycle.js 라이브러리가 추가 지원을 제공합니다. 페이지 수명 주기에 대한 모범 사례를 구현하여 안정적인 이벤트 처리를 보장합니다.

lifecycle.addEventListener('statechange', function(event) {
  if (event.originalEvent === 'visibilitychange' && event.newState === 'hidden') {
    navigator.sendBeacon(url, data);
  }
});

고려 사항

• 광고 차단기: 일부 광고 차단기는 특정에 대한 sendBeacon 요청을 차단합니다. 도메인.
• 교차 사이트 요청: 비콘 요청에는 CORS 제한이 적용됩니다.

위 내용은 사용자가 브라우저 탭을 닫거나 내 웹 페이지에서 다른 곳으로 이동하는 경우를 어떻게 안정적으로 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!