이벤트 유형

이벤트 유형 라이브러리 모듈에는 "활동의 발생 시점을 감지하고 해당하는 경우 함수를 호출하여 관련 규칙 실행"이라는 하나의 목표가 있습니다. 감지 대상은 개발자가 결정합니다. 사용자의 특정 제스처를 감지해야 합니까? 사용자가 빠르게 스크롤하는 시점을 감지해야 합니까? 사용자가 다른 사용자와 상호 작용하는 시점을 감지해야 합니까?

노트

이 문서에서는 사용자가 라이브러리 모듈 및 Platform Launch 확장에 이러한 모듈을 통합하는 방법을 잘 알고 있다고 가정합니다. 이 안내서로 돌아가기 전에 구현의 입문 부분을 보려면 라이브러리 모듈 형식 지정 개요를 참조하십시오.

다른 모듈 유형에서 일반적으로 사용되는 settings 매개 변수 외에도, 이벤트 유형에 대한 module.exports에서는 두 번째 매개 변수인 trigger를 사용할 수 있습니다.

module.exports = function(settings, trigger) { … };
매개 변수 설명
settings 이벤트 유형의 보기에서 사용자가 구성한 설정을 포함하는 객체입니다. 개발자는 이 객체에 대한 입력을 완벽하게 제어할 수 있습니다.
trigger 규칙이 실행될 때마다 모듈이 호출해야 하는 함수입니다. settings 객체, trigger 함수, 규칙 간에는 일대일 관계가 있습니다. 즉, 하나의 규칙에 대해 받은 트리거 함수를 다른 규칙을 실행하기 위해 사용할 수 없습니다.
노트

내보낸 함수는 이벤트 유형을 사용하도록 구성된 각 규칙에 대해 한 번 호출됩니다.

감지 중인 활동을 5초 후라고 가정해 보겠습니다. 5초 후에 이 활동이 수행되며 규칙이 실행되어야 합니다. 이러한 모듈은 다음과 같습니다.

module.exports = function(settings, trigger) {
  setTimeout(trigger, 5000);
};

Adobe Experience Platform Launch 사용자가 지속 시간을 구성할 수 있도록 하려면 어떻게 해야 할까요? 보기에서 사용자가 지속 시간을 입력한 다음 설정 객체에 지속 시간을 저장할 수 있도록 허용하면 됩니다. 객체는 다음과 같을 수 있습니다.

{
  "duration": 25000
}

사용자 정의 지속 시간에 대해 작업하려면 모듈을 다음과 같이 변경해야 합니다.

module.exports = function(settings, trigger) {
  setTimeout(trigger, settings.duration);
};

컨텍스트 기반 이벤트 데이터 전달

규칙을 트리거할 때는 발생한 이벤트에 대한 추가 세부 정보를 제공하는 것이 유용할 수 있습니다. 이러한 정보는 규칙을 생성하는 사용자가 특정 동작을 달성하는 데 유용할 수 있습니다. 예를 들어, 사용자가 화면을 스와이프할 때마다 분석 비콘이 전송되는 규칙을 마케팅 담당자가 생성하고 있다고 가정해 보겠습니다. 확장에서 swipe 이벤트 유형을 제공하면 마케팅 담당자는 이벤트 유형을 사용하여 규칙을 적절하게 트리거할 수 있습니다. 이제 마케팅 담당자가 비콘에 스와이프가 발생한 특정 각도를 포함하려면 어떻게 해야 할까요? 추가 정보 없이 이러한 작업을 수행하는 것은 까다롭습니다.

발생한 이벤트에 대한 추가 정보를 제공하려면 trigger 함수를 호출할 때 객체를 전달합니다. 예:

trigger({
  swipeAngle: 90 // the value would be the detected angle
});

그러면 마케팅 담당자는 텍스트 필드에 값을 지정하여 분석 비콘에서 이 %event.swipeAngle% 값을 사용할 수 있습니다. 또한, 다른 컨텍스트(예: 사용자 지정 코드 작업 등) 내에서도 event.swipeAngle에 액세스할 수 있습니다. 마케팅 담당자에게 유용할 수 있는 모든 이벤트 정보를 자유롭게 포함할 수 있습니다. 이 정보는 완전히 선택 사항입니다.

nativeEvent

이벤트 유형이 기본 이벤트를 기반으로 하는 경우(예: 확장에서 click 이벤트 유형을 제공하는 경우)에는 다음과 같이 nativeEvent 속성을 설정하는 것이 좋습니다.

trigger({
  nativeEvent: nativeEvent // the value would be the underlying native event
});

이 기능은 마케팅 담당자가 커서 좌표와 같은 기본 이벤트의 모든 정보에 액세스하려고 할 때 유용합니다.

element

요소와 발생한 이벤트 간에 강력한 관계가 있는 경우에는 element 속성을 요소의 DOM 노드로 설정하는 것이 좋습니다. 예를 들어, 확장이 click 이벤트 유형을 제공하고 마케팅 담당자가 구성할 수 있도록 허용하여 herobanner의 ID가 포함된 요소를 선택하는 경우에만 규칙이 실행되도록 한다고 가정해 보겠습니다. 이러한 경우에는 사용자가 히어로 배너를 선택하면, 히어로 배너의 DOM 노드에 대한 trigger 호출 및 element 설정을 수행하는 것이 좋습니다.

trigger({
  element: element // the value would be the DOM node
});

규칙 순서 준수

Platform Launch를 통해 사용자는 규칙 순서를 지정할 수 있습니다. 예를 들어, 사용자가 방향 변경 이벤트 유형을 사용하고 규칙이 실행되는 순서를 지정하기 위한 두 개의 규칙을 만들 수 있습니다. Platform Launch 사용자가 규칙 A의 방향 변경 이벤트에 대한 순서 값을 2로 지정하고 규칙 B의 방향 변경 이벤트에 대한 순서 값을 1로 지정한다고 가정해 보겠습니다. 이는 모바일 장치에서 방향이 변경되면 규칙 B 이후에 규칙 A가 실행되어야 함을 나타냅니다(순서 값이 낮은 규칙이 먼저 실행되어야 함).

앞에서 설명한 바와 같이, 이 이벤트 모듈에서 내보낸 함수는 이벤트 유형을 사용하도록 구성된 각 규칙에 대해 한 번 호출됩니다. 내보낸 함수가 호출될 때마다 특정 규칙에 연결된 고유한 trigger 함수가 전달됩니다. 방금 설명한 시나리오에서 내보낸 함수는 규칙 B에 연결된 trigger 함수와 함께 한 번 호출되고 규칙 A에 연결된 trigger 함수를 사용하여 다시 호출됩니다. 사용자가 규칙 A보다 낮은 순서 값을 제공했기 때문에 규칙 B가 실행됩니다. 라이브러리 모듈에서 방향 변경을 감지하면 라이브러리 모듈에 제공된 것과 동일한 순서로 trigger 함수를 호출하는 것이 중요합니다.

아래 예제 코드에서는 방향 변경이 감지되면 트리거 함수가 내보낸 함수에 제공된 순서와 동일한 순서로 호출됩니다.

var triggers = [];

window.addEventListener('orientationchange', function() {
  triggers.forEach(function(trigger) {
    trigger();
  });
});

module.exports = function(settings, trigger) {
  triggers.push(trigger);
};

이를 통해 사용자가 지정한 순서가 유지될 수 있습니다.

잘못된 구현은 트리거 함수를 다른 순서로 호출하는 것입니다.

var triggers = [];

window.addEventListener('orientationchange', function() {
  for (var i = triggers.length - 1; i >= 0; i--) {
    triggers[i]();
  }
});

module.exports = function(settings, trigger) {
  triggers.push(trigger);
};

기본 프로그래밍 방식에서는 일반적으로 적절한 순서가 유지되지만, 의미를 이해하고 그에 따라 개발하는 것이 중요합니다.

이 페이지에서는

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now