이 문서는 브라우저가 비동기 SPA(단일 페이지 앱) 데이터를 수집하고 저장하는 방법을 설명합니다. 이렇게 하면 브라우저 UI에 표시되는 SPA 데이터를 더 잘 이해할 수 있습니다. 이렇게 하면 SPA API 를 사용하여 사용자 지정 모니터링을 더 쉽게 추가할 수도 있습니다.
브라우저 상호 작용
SPA 모니터링의 핵심은 browser interaction 개념입니다. 뉴렐릭은 소프트 네비게이션이라고도 불리는 브라우저 블록복합을 Google의 경험적 방법 을 바탕으로 다음과 같은 일련의 이벤트로 정의합니다.
- 사용자 상호작용이 발생합니다. 우리는 특히
click,keydown또는submit이벤트를 찾습니다. History API 의popstate이벤트도 쿠션작용을 시작합니다. - URL은 경로나 해시 등 어떤 방식으로든 변경됩니다.
- 노드 속성이나 텍스트를 포함한 모든 변경 사항은 문서 DOM 트리의 어느 곳에서나 발생합니다.
이러한 단계를 따르면 다음 다시 칠하기 프레임에서 브라우저 렌더링이 완료된 것으로 간주됩니다. 또한 XHR을 연결하고 해당 범위 내에서 시작된 requests 가져옵니다. v2.1에서는 또 다른 단계가 도입되었습니다.
- SPA 버전 2.1 이상에서는 모니터가 최대 5초 동안 장기 실행 콜백을 확인합니다. 장기 실행 콜백이 식별되면 시스템은 현재 상호작용을 확장하고 모니터를 다시 실행합니다.
5초 동안 긴 작업이 없으면 상호작용이 완전히 종료됩니다. 마지막으로 관찰된 장기 작업이 끝나기 전 연장 기간 동안 발생하는 모든 AjaxRequest 및 JavascriptError도 해당 학습과 연관됩니다. 중요한 점은 상호작용 시간에 마지막 5초의 비활성 시간은 포함되지 않는다는 것입니다.
특정 시나리오에서는 4단계가 단락되거나 우회될 수 있습니다.
팁
popstate 이벤트 트리거는 브라우저에서의 특정 동작으로 인해 다른 UI 이벤트 트리거와 비교하여 고유하게 관리됩니다. 클릭과 같은 다른 UI 이벤트 후 500밀리초 이내에 popstate 이벤트가 발생하면 해당 이벤트가 시작한 기존 상호작용에 병합되며, 상호작용의 원래 트리거(예: '클릭')는 변경되지 않습니다. 그러나 두 개의 연속된 popstate 이벤트는 이 방식으로 병합되지 않습니다.
popstate 을 트리거로 하는 상호작용은 일반적으로 뒤로 또는 앞으로 버튼을 사용하는 것과 같은 브라우저 작업이나 URL을 프로그래밍 방식으로 변경하는 것과 같은 코드 관련 작업에서 시작됩니다.
SPA 데이터 보고 유형
@@ -39,54 +38,39 @@ 단일 페이지 앱 데이터의 세 가지 주요 범주를 뉴렐릭에 보고할 수 있습니다.
이들 각각은 BrowserInteraction 이벤트를 생성합니다. 하나 이상의 AJAX 요청이 상호작용의 일부인 경우 연결된 AjaxRequest 이벤트도 생성됩니다. 이러한 이벤트 및 해당 속성은 쿼리 작성기 에서 쿼리할 수 있습니다.
중요
기본 또는 사용자 정의되지 않은 기술은 네트워크 requests 완료될 때까지 기다리지 않습니다. 이는 그대로의 기준으로 인프라와 연관되어 있습니다. 즉, 스케줄러가 인프라를 수집하기 전에 완료된 requests 만 인프라에 연결됩니다. 네트워크 요청이 느리거나 오래 지속되고 상호작용의 일부로 시작되면 이 시간 창 밖에 있을 수 있으며 상호작용과 연결되지 않을 수 있습니다.
또는 API를 사용하여 중요한 네트워크 요청이 반환될 때까지 상호작용이 계속 열려 있도록 상호작용 기간을 수동으로 연장할 수 있습니다.
초기 페이지 로드
initial page load 은 URL을 완전히 로드하거나 다시 로드하는 데서 발생하는 전통적인 URL 변경입니다. 이는 페이지 로드 이벤트( window.onload 이벤트)가 발생할 때 브라우저에 표시되며 하드 탐색이라고도 합니다. 초기 페이지 로드는 브라우저 UI 의 경로 변경과 함께 표시됩니다.
경로 변경
SPA 사용자 환경 페이지 로드와 유사한 방식으로 동적 경로가 변경됩니다. 사이트나 앱 방문자는 일반적으로 how 새 보기가 전달되었는지 신경 쓰지 않습니다. 그들은 단순히 작업을 수행할 때 새로운 보기가 나타난다는 것을 알고 있습니다. 이러한 이유로 우리는 UI의 페이지 로드와 유사한 방식으로 경로 변경을 처리합니다.
단일 페이지를 최적으로 모니터링하기 위해 이론적으로 경로 변경으로 이어질 수 있는 모든 블록 합성을 모델링하기 시작합니다.
- 이러한 상호작용이 위에서 정의한 휴리스틱 단계를 완료하지 못하면 에이전트는 모니터링을 시작하지만 그 후에는 이를 무시합니다.
- 이러한 상호작용 do 이 모든 단계를 따르는 경우 에이전트는 시퀀스를 완료된
BrowserInteraction이벤트로 저장합니다.
URL이 시작과 끝 사이에서 변경되면 상호작용은 경로 변경으로 간주되고 BrowserInteraction 이벤트로 저장됩니다. URL 변경 사항은 두 가지 방법으로 추적됩니다.
popstate이벤트.window.location.hash설정하는 것과 같이 URL을 프로그래밍 방식으로 변경하면 이 이벤트가 트리거됩니다.pushState또는replaceState호출됩니다. SPA는 일반적으로 이러한 History API 메서드를 사용하여 URL을 업데이트합니다.
경로 변경 사항은 브라우저 UI 에 초기 페이지 로드와 함께 나타납니다.
에이전트는 경로 변경 URL의 해시 조각을 보고합니다. 해시를 사용하여 개인 정보나 민감한 데이터를 전달하는 경우 해당 데이터가 귀하의 뉴렐릭 계정 사용자에게 표시될 수 있습니다. 데이터 수집 및 보고에 대한 자세한 내용은 브라우저 보안을 참조하세요.
맞춤형 모니터링
모든 앱은 서로 다르며 모니터링 요구 사항도 다릅니다. SPA API를 사용하면 브라우저 상호작용을 사용자 지정하거나 캡처 방법을 직접 정의할 수 있습니다.
맞춤형 대시보드는 BrowserInteraction 이벤트로 저장되며 속성에 다음과 같은 차이점이 있습니다.
category속성은Custom값을 갖습니다.trigger속성은api값을 갖습니다. (기본값이지만 API로 변경할 수 있습니다.)
위의 경험적 방법이 사용자 기반이나 앱에 맞지 않을 경우, API 사용하면 이러한 사용자 정의 마케팅을 언제 시작하고 중지할지 지정할 수 있습니다.
이벤트 및 속성
경로 변경 및 페이지 로드로 이어지거나 API 를 통해 생성된 브라우저 확장 기능을 BrowserInteraction 이벤트로, AJAX requests AjaxRequest 이벤트로 저장합니다. 이러한 이벤트는 쿼리 빌더 에서 쿼리할 수 있습니다.