Web Beacon API로 활동 로깅
게시 됨: 2022-03-10 Beacon API는 응답을 기다리지 않고 브라우저에서 웹 서버로 소량의 데이터를 보내는 JavaScript 기반의 Web API입니다. 이 기사에서는 이것이 무엇에 유용할 수 있는지, XMLHTTPRequest ('Ajax')와 같은 친숙한 기술과 다른 점, 사용을 시작하는 방법을 살펴보겠습니다.
이미 Beacon을 사용하려는 이유를 알고 있다면 시작하기 섹션으로 바로 이동하십시오.
Beacon API는 무엇을 위한 것입니까?
Beacon API는 응답을 기다리지 않고 서버에 소량의 데이터를 보내는 데 사용됩니다. 마지막 부분은 중요하며 Beacon이 왜 그렇게 유용한지에 대한 핵심입니다. 우리 코드는 서버가 응답을 보내더라도 응답을 보지 못합니다. 비콘은 특히 데이터를 보낸 다음 잊어버리기 위한 것입니다. 우리는 응답을 기대하지 않으며 응답을 받지 않습니다.
휴가 때 집에 보내는 엽서와 같다고 생각하십시오. 당신은 그것에 소량의 데이터("당신이 여기 있었으면 좋겠어"와 "날씨가 좋았어")를 넣고, 그것을 우편함에 넣고, 당신은 응답을 기대하지 않습니다. 아무도 "네, 제가 실제로 거기에 있었으면 좋았을 텐데, 정말 감사합니다!"라고 답장하는 엽서를 보내지 않습니다.
최신 웹사이트 및 애플리케이션의 경우 이러한 전송 후 삭제 패턴에 매우 깔끔하게 속하는 여러 사용 사례가 있습니다.
통계 및 분석 데이터 추적
대부분의 사람들이 가장 먼저 떠올리는 사용 사례는 분석입니다. Google Analytics와 같은 큰 솔루션은 페이지 방문과 같은 항목에 대한 좋은 개요를 제공할 수 있지만 더 맞춤화된 것을 원하면 어떻게 될까요? 페이지에서 무슨 일이 일어나고 있는지 추적하기 위해 JavaScript를 작성할 수 있지만(예: 사용자가 구성 요소와 상호 작용하는 방식, 스크롤한 거리 또는 CTA를 따르기 전에 표시된 기사) 그런 다음 해당 데이터를 보내야 합니다. 사용자가 페이지를 떠날 때 서버에 Beacon은 데이터를 기록할 뿐이며 응답이 필요하지 않으므로 이에 적합합니다.
사용자 자신과 기기 및 브라우저의 기능에 대해 보고하는 Google 애널리틱스에서 자주 처리하는 일상적인 작업을 다루지 않을 이유가 없습니다. 사용자가 로그인한 세션이 있는 경우 해당 통계를 알려진 개인과 다시 연결할 수도 있습니다. 수집한 데이터가 무엇이든 Beacon을 사용하여 서버로 다시 보낼 수 있습니다.
디버깅 및 로깅
이 동작에 대한 또 다른 유용한 응용 프로그램은 JavaScript 코드에서 정보를 로깅하는 것입니다. 모든 테스트에서 완벽하게 작동하지만 프로덕션에서는 때때로 실패하는 복잡한 대화형 구성 요소가 페이지에 있다고 상상해 보십시오. 그것이 실패하고 있다는 것을 알고 있지만 디버깅을 시작하기 위해 오류를 볼 수 없습니다. 코드 자체에서 오류를 감지할 수 있으면 진단을 수집하고 Beacon을 사용하여 로깅을 위해 모두 다시 보낼 수 있습니다.
사실, 게임에서 저장 지점을 생성하거나, 기능 사용에 대한 정보를 수집하거나, 다변수 테스트에서 결과를 기록하는 등 모든 로깅 작업은 Beacon을 사용하여 유용하게 수행할 수 있습니다. 서버에 알리고 싶은 브라우저에서 일어나는 일이라면 Beacon이 경쟁자일 가능성이 큽니다.
우리는 이미 이것을 할 수 없습니까?
무슨 생각하는지 알아. 이 중 어느 것도 새로운 것이 아닙니다. 그렇죠? 우리는 10년 이상 XMLHTTPRequest 를 사용하여 브라우저에서 서버로 통신할 수 있었습니다. 더 최근에는 더 현대적인 약속 기반 인터페이스와 거의 동일한 작업을 수행하는 Fetch API도 있습니다. 그렇다면 왜 Beacon API가 필요할까요?
여기서 핵심은 응답을 받지 못하기 때문에 브라우저가 다른 코드의 실행을 차단하지 않고 요청을 대기열에 넣고 보낼 수 있다는 것입니다. 브라우저에 관한 한, 우리 코드가 여전히 실행 중인지 아닌지 또는 스크립트 실행이 어디로 가야 하는지는 중요하지 않습니다. 보내.
이는 CPU 부하가 낮아질 때까지 기다리거나 네트워크가 사용 가능해질 때까지 기다리거나 가능하면 즉시 보내는 것을 의미할 수 있습니다. 중요한 것은 브라우저가 신호를 대기열에 넣고 즉시 제어를 반환한다는 것입니다. 비콘이 보내는 동안 물건을 유지하지 않습니다.
이것이 왜 중요한지 이해하려면 이러한 종류의 요청이 코드에서 어떻게 그리고 언제 발행되는지 살펴봐야 합니다. 분석 로깅 스크립트의 예를 살펴보십시오. 우리 코드는 사용자가 페이지에서 보내는 시간을 측정할 수 있으므로 데이터가 가능한 마지막 순간에 서버로 다시 전송되는 것이 중요합니다. 사용자가 페이지를 떠날 때 타이밍을 멈추고 데이터를 집으로 다시 보내고 싶습니다.
일반적으로 unload 또는 beforeunload 이벤트를 사용하여 로깅을 실행합니다. 사용자가 페이지의 링크를 따라 이동하는 것과 같은 작업을 수행하면 시작됩니다. 여기서 문제는 unload 이벤트 중 하나에서 실행되는 코드가 실행을 차단하고 페이지 언로드를 지연시킬 수 있다는 것입니다. 페이지 언로드가 지연되면 다음 페이지 로드도 지연되므로 경험이 정말 느립니다.
HTTP 요청이 얼마나 느릴 수 있는지 염두에 두십시오. 성능에 대해 생각하고 있다면 일반적으로 줄이려고 하는 주요 요소 중 하나는 추가 HTTP 요청입니다. 왜냐하면 네트워크에 나가서 응답을 받는 것이 매우 느릴 수 있기 때문입니다. 마지막으로 하고 싶은 일은 링크 활성화와 다음 페이지에 대한 요청 시작 사이에 속도를 늦추는 것입니다.
Beacon은 차단하지 않고 요청을 대기열에 넣고 제어를 즉시 스크립트로 되돌려 이 문제를 해결합니다. 그런 다음 브라우저는 차단하지 않고 백그라운드에서 해당 요청을 보냅니다. 이것은 모든 것을 훨씬 더 빠르게 만들어 사용자를 더 행복하게 만들고 우리 모두가 우리의 직업을 유지할 수 있게 해줍니다.
시작하기
그래서 우리는 Beacon이 무엇인지, 왜 그것을 사용할 수 있는지 이해하고 있으므로 몇 가지 코드로 시작하겠습니다. 기본 사항은 더 간단할 수 없습니다.
let result = navigator.sendBeacon(url, data); 결과는 부울이고, 브라우저가 요청을 수락하고 대기열에 넣으면 true 이고, 그렇게 하는 데 문제가 있으면 false 입니다.
navigator.sendBeacon() 사용
navigator.sendBeacon 은 두 개의 매개변수를 사용합니다. 첫 번째는 요청할 URL입니다. 요청은 HTTP POST로 수행되어 두 번째 매개변수에 제공된 모든 데이터를 보냅니다.
데이터 매개변수는 Fetch API에서 직접 가져온 여러 형식 중 하나일 수 있습니다. 이것은 Blob , BufferSource , FormData 또는 URLSearchParams 가 될 수 있습니다. 기본적으로 Fetch로 요청할 때 사용되는 모든 본문 유형입니다.
나는 복잡하지 않고 다시 읽기 쉽기 때문에 기본 키-값 데이터에 FormData 를 사용하는 것을 좋아합니다.
// URL to send the data to let url = '/api/my-endpoint'; // Create a new FormData and add a key/value pair let data = new FormData(); data.append('hello', 'world'); let result = navigator.sendBeacon(url, data); if (result) { console.log('Successfully queued!'); } else { console.log('Failure.'); }브라우저 지원
Beacon에 대한 브라우저 지원은 Internet Explorer(Edge에서 작동) 및 Opera Mini만 제외하면 매우 훌륭합니다. 대부분의 경우에는 문제가 없지만 navigator.sendBeacon 을 사용하기 전에 지원을 테스트할 가치가 있습니다.
그것은 하기 쉽습니다:
if (navigator.sendBeacon) { // Beacon code } else { // No Beacon. Maybe fall back to XHR? }Beacon을 사용할 수 없고 요청이 중요한 경우 XHR과 같은 차단 방법으로 대체할 수 있습니다. 청중과 목적에 따라 똑같이 귀찮게하지 않을 수도 있습니다.
예: 페이지에 시간 기록
이것을 실제로 보기 위해 사용자가 페이지에 머문 시간을 측정하는 기본 시스템을 만들어 보겠습니다. 페이지가 로드되면 시간을 기록하고 사용자가 페이지를 떠날 때 시작 시간과 현재 시간을 서버에 보냅니다.
우리는 보낸 시간(실제 시간이 아님)에만 신경을 쓰기 때문에 performance.now() 를 사용하여 페이지가 로드될 때 기본 타임스탬프를 얻을 수 있습니다.
let startTime = performance.now();로그인을 함수로 마무리하면 페이지가 언로드될 때 호출할 수 있습니다.
let logVisit = function() { // Test that we have support if (!navigator.sendBeacon) return true; // URL to send the data to, eg let url = '/api/log-visit'; // Data to send let data = new FormData(); data.append('start', startTime); data.append('end', performance.now()); data.append('url', document.URL); // Let's go! navigator.sendBeacon(url, data); }; 마지막으로 사용자가 페이지를 떠날 때 이 함수를 호출해야 합니다. 내 첫 번째 본능은 unload 이벤트를 사용하는 것이지만 Mac의 Safari는 보안 경고와 함께 요청을 차단하는 것 같으므로 여기에서는 beforeunload 가 잘 작동합니다.
window.addEventListener('beforeunload', logVisit); 페이지가 언로드될 때(또는 로드되기 직전에) logVisit() 함수가 호출되고 브라우저가 Beacon API를 지원하면 비컨이 전송됩니다.
(비콘 지원이 없으면 true 를 반환하고 모두 잘 작동하는 척합니다. false 를 반환하면 이벤트가 취소되고 페이지 언로드가 중지됩니다. 불행한 일입니다.)
추적 시 고려 사항
Beacon의 잠재적인 용도 중 많은 부분이 활동 추적을 중심으로 이루어지므로 사용자와 연결될 수 있는 활동을 기록하고 추적할 때 개발자로서 우리가 갖는 사회적, 법적 책임은 말할 것도 없습니다.
GDPR
최근 유럽 GDPR 법률이 이메일과 관련되어 있다고 생각할 수 있지만, 물론 법률은 모든 유형의 개인 데이터 저장과 관련이 있습니다. 사용자가 누구인지 알고 세션을 식별할 수 있다면 어떤 활동을 기록하고 있으며 이것이 명시된 정책과 어떤 관련이 있는지 확인해야 합니다.
종종 우리는 개발자가 해야 한다고 말하는 본능만큼 많은 데이터를 추적할 필요가 없습니다. 사용자를 식별할 수 있는 정보를 의도적으로 저장 하지 않는 것이 더 나을 수 있습니다. 그러면 잘못될 가능성이 줄어듭니다.
DNT: 추적하지 않음
법적 요구 사항 외에도 대부분의 브라우저에는 사용자가 추적을 원하지 않는 의사를 표현할 수 있는 설정이 있습니다. Do Not Track은 다음과 같은 요청과 함께 HTTP 헤더를 보냅니다.
DNT: 1 특정 사용자를 추적할 수 있는 데이터를 기록하고 사용자가 긍정적인 DNT 헤더를 보내는 경우 사용자의 희망에 따라 해당 데이터를 익명화하거나 전혀 추적하지 않는 것이 가장 좋습니다.
예를 들어 PHP에서는 다음과 같이 이 헤더를 매우 쉽게 테스트할 수 있습니다.
if (!empty($_SERVER['HTTP_DNT'])) { // User does not wish to be tracked ... }결론적으로
Beacon API는 특히 로깅 컨텍스트에서 페이지에서 서버로 데이터를 다시 보내는 데 정말 유용한 방법입니다. 브라우저 지원은 매우 광범위하며 사용자의 탐색 경험과 사이트 성능에 부정적인 영향을 미치지 않으면서 원활하게 데이터를 기록할 수 있습니다. 요청의 비차단 특성은 성능이 XHR 및 Fetch와 같은 대안보다 훨씬 빠릅니다.
Beacon API에 대해 더 알고 싶다면 다음 사이트를 참조하세요.
- "W3C 비콘 사양", W3C 후보 추천
- "MDN 비콘 문서", MDN 웹 문서, Mozilla
- "브라우저 지원 정보" caniuse.com