interaction (SPA API)

통사론

newrelic.interaction([JSON object $options])

현재 SPA 상호작용에 바인딩된 새 핸들 객체를 반환하거나, 상호작용이 없으면 새 상호작용을 반환합니다.

요구 사항

.interaction() API에는 브라우저 Pro+SPA 에이전트(v963 이상)가 필요합니다.
API에 $options 객체를 제공하는 것은 v1.285.0 이상 버전에서만 지원됩니다.
waitForEnd 옵션은 v1.285.0 이상에서만 지원됩니다.
targetPageLoad 옵션은 v1.315.0 이상에서만 지원됩니다.

npm을 통해 수분 에이전트를 설치하고 선택한 기능으로 사용자 정의 에이전트를 구축하는 경우, Agent 를 생성할 때 spa 기능을 활성화해야 합니다. features 에 다음을 추가하세요.

import { Agent } from '@newrelic/browser-agent/loaders/agent'
import { Spa } from '@newrelic/browser-agent/features/spa';

const options = {
  info: { ... },
  loader_config: { ... },
  init: { ... },
  features: [
    ... other features ...
    Spa
  ]
}

new Agent(options)

자세한 내용은 npm 브라우저 설치 설명서를 참조하세요.

설명

SPA 모니터링 interaction() API 호출을 사용하면 브라우저 에이전트가 추적하는 SPA 상호작용을 제어하고 맞춤 설정할 수 있습니다. 이 API를 사용하여 다음을 수행합니다:

브라우저 에이전트가 자동으로 감지하지 못하는 패턴에 대해 사용자 지정 상호작용을 수동으로 생성하십시오.
커스텀 속성을 추가하거나, 이름을 지정하거나, 완료 시점을 제어하여 기존 상호작용을 수정합니다.

작동 원리

newrelic.interaction()을(를) 호출하면 BrowserInteraction 이벤트를 참조하는 handle [핸들] (JavaScript 객체)을 얻게 됩니다. 이 핸들을 사용하면 .save(), .ignore(), .setName() 및 .setAttribute() 와 같은 메서드를 호출하여 상호작용을 제어할 수 있습니다.

상호작용 상태별 API 동작

API는 상호작용의 현재 상태에 따라 다르게 동작합니다:

상태	행동
No interaction in progress	새로운 커스텀 상호작용을 생성합니다. `waitForEnd: true`을(를) 설정하지 않는 한, 다음 소프트 탐색이 완료될 때(기본 SPA 휴리스틱에 따라) 사용자 지정 상호작용이 자동으로 종료됩니다. 모달 열기나 섹션 확장과 같이 라우트 변경을 트리거하지 않는 사용자 작업을 추적하려면 이것을 사용하십시오.
Interaction already in progress	현재 활성화된 상호작용을 참조하는 새 핸들을 반환합니다. 동일한 상호작용에 대해 여러 핸들을 생성할 수 있습니다. 코드의 여러 부분에서 상호작용의 다양한 측면을 제어하려는 경우에 유용합니다. 기존 상호작용은 계속됩니다. 이 API는 이미 진행 중인 상호작용을 대체하거나 덮어쓸 수 없습니다. 사용자 트리거 상호작용(예: 클릭) 및 API 트리거 사용자 지정 상호작용 모두에서 작동합니다.
Targeting the initial page load	`targetPageLoad: true` 옵션을 사용할 때 핸들은 항상 초기 페이지 로드 BrowserInteraction 이벤트를 참조합니다. 이것이 초기 페이지 로드 상호작용에 액세스하고 수정하는 유일한 방법입니다. 이 옵션 이전에는 API를 통해 초기 페이지 로드에 액세스할 수 없었습니다.

상태

행동

No interaction in progress

새로운 커스텀 상호작용을 생성합니다.

waitForEnd: true을(를) 설정하지 않는 한, 다음 소프트 탐색이 완료될 때(기본 SPA 휴리스틱에 따라) 사용자 지정 상호작용이 자동으로 종료됩니다.
모달 열기나 섹션 확장과 같이 라우트 변경을 트리거하지 않는 사용자 작업을 추적하려면 이것을 사용하십시오.

Interaction already in progress

현재 활성화된 상호작용을 참조하는 새 핸들을 반환합니다.

동일한 상호작용에 대해 여러 핸들을 생성할 수 있습니다. 코드의 여러 부분에서 상호작용의 다양한 측면을 제어하려는 경우에 유용합니다.
기존 상호작용은 계속됩니다. 이 API는 이미 진행 중인 상호작용을 대체하거나 덮어쓸 수 없습니다.
사용자 트리거 상호작용(예: 클릭) 및 API 트리거 사용자 지정 상호작용 모두에서 작동합니다.

Targeting the initial page load

targetPageLoad: true 옵션을 사용할 때 핸들은 항상 초기 페이지 로드 BrowserInteraction 이벤트를 참조합니다.

이것이 초기 페이지 로드 상호작용에 액세스하고 수정하는 유일한 방법입니다.
이 옵션 이전에는 API를 통해 초기 페이지 로드에 액세스할 수 없었습니다.

주요 행동

행동	설명
여러 핸들은 독립적입니다	`newrelic.interaction()` 에 대한 각 호출은 동일한 기본 상호작용을 참조하는 경우에도 별도의 핸들 객체를 생성합니다. 한 핸들에서 호출된 메서드는 다른 핸들에 영향을 주지 않지만, 모두 동일한 BrowserInteraction 이벤트를 수정합니다.
상호작용을 덮어쓸 수 없습니다	사용자가 버튼을 클릭하고(상호작용 시작) 이후 코드가 `newrelic.interaction()`을(를) 호출하면, API는 클릭 상호작용에 대한 핸들을 반환합니다 ― 새로운 상호작용을 생성하지 않습니다. 브라우저 에이전트는 실제 사용자 상호작용을 우선시합니다.
핸들이 비활성화됩니다	상호작용이 완료되면, 이를 참조하는 모든 핸들이 비활성화됩니다. 비활성 핸들에 대한 메서드 호출은 아무런 영향을 미치지 않으며 오류를 발생시키지 않습니다.
정밀한 제어를 위해 `waitForEnd` 을(를) 사용하세요.	기본적으로 상호작용은 SPA 휴리스틱(경로 변경, AJAX 완료, DOM 안정화)을 기반으로 종료됩니다. `waitForEnd: true` 을(를) 설정하면 핸들에서 `.end()` 을(를) 명시적으로 호출할 때까지 상호작용이 열린 상태로 유지됩니다.

주의

waitForEnd: true 을(를) targetPageLoad: true 와(과) 함께 사용하면 .end() 이(가) 호출될 때까지 초기 페이지 로드 BrowserInteraction 이벤트가 무기한 열린 상태로 유지되며, 초기 페이지 로드 BrowserInteraction 이벤트의 기본 정의가 변경됩니다. 이는 고급 사용 사례이며 주의해서 사용해야 합니다.

매개변수

매개변수	설명
`$options` JSON 객체	선택 사항: 상호작용 동작에 영향을 미치는 옵션을 지정합니다. `waitForEnd` - (v1.285.0+) 기본값은 `false`입니다. 핸들에서 `.end` 메서드가 호출될 때까지 상호작용을 강제로 열어 두려면 이를 `true`(으)로 설정하세요. 상호작용이 이것으로 지정된 후에는 되돌릴 수 없습니다. `targetPageLoad` - (v1.315.0+) 기본값은 `false`입니다. `true`로 설정된 경우, 반환된 핸들은 소프트 내비게이션 상호작용을 생성하거나 타겟팅하는 대신 초기 페이지 로드 상호작용에 바인딩됩니다. 이것이 initialPageLoad 상호작용을 타겟으로 지정하는 유일한 방법입니다.

설명

$options

JSON 객체

선택 사항: 상호작용 동작에 영향을 미치는 옵션을 지정합니다.

waitForEnd - (v1.285.0+) 기본값은 false입니다. 핸들에서 .end 메서드가 호출될 때까지 상호작용을 강제로 열어 두려면 이를 true(으)로 설정하세요. 상호작용이 이것으로 지정된 후에는 되돌릴 수 없습니다.
targetPageLoad - (v1.315.0+) 기본값은 false입니다. true로 설정된 경우, 반환된 핸들은 소프트 내비게이션 상호작용을 생성하거나 타겟팅하는 대신 초기 페이지 로드 상호작용에 바인딩됩니다. 이것이 initialPageLoad 상호작용을 타겟으로 지정하는 유일한 방법입니다.

반환 값

이 메서드는 잠재적인 BrowserInteraction 이벤트 를 가리키는 네이티브 JS 객체를 반환합니다. BrowserInteraction 이 아직 종료되지 않은 상태에서 이 메서드가 동일한 에 대해 호출될 때마다 새 객체가 생성되지만 여전히 동일한 인스턴스를 참조합니다.

예

SPA API 메서드는 newrelic.interaction()의 반환된 출력에 적용할 수 있습니다. 나중에 사용하기 위해 반환된 값이나 핸들을 다른 변수에 할당할 수 있습니다. 예를 들어:

let myInteraction = newrelic.interaction();
...
myInteraction.save();

상호작용 API 목록은 단일 페이지 앱 추적을 참조하십시오.

명명된 핸들은 인스턴스 외부에서 저장하여 사용할 수 있지만, 인스턴스가 종료된 후에는 SPA 메서드가 아무런 효과가 없다는 점에 유의하세요.

다음 방법을 사용하여 상호작용 기간을 사용자 지정할 수도 있습니다.

// Say an interaction is already open from a user click.
const userInteraction = newrelic.interaction({ waitForEnd: true }); // grabs the current interaction in-progress & keep it open
// URL changes & DOM is modified. Because of those condition being met, interaction will be saved but is kept open.
fetch('myurl.com/endpoint').then(() => userInteraction.end()) // associate this request to the interaction before completing this BrowserInteraction

const myCustomIxn = newrelic.interaction({ waitForEnd: true }) // create a new api-triggered interaction
// This interaction will be kept open indefinitely until `.end` is called, and no new interaction will start, custom or otherwise. AjaxRequest will continue to buffer under this interaction until it is closed.

사용자의 편의를 위해 제공되는 기계 번역입니다.

통사론.css-21sua1{background:none;border:none;width:0;padding:0;}