Show Menu
화제×

이벤트 기반 규칙 조건 만들기

조건은 언제 이벤트 기반 규칙이 트리거되는지 결정합니다.
  1. 마우스 클릭이나 양식 제출과 같이 추적할 상호 작용 유형을 선택합니다.
    For more information, see Event Types .
  2. 다음 옵션을 필요에 따라 활성화합니다.
    요소
    설명
    링크 활성화 지연
    이벤트가 링크를 활성화하고, 이벤트를 실행할 시간이 되기 전까지 링크가 지연되기를 원할 경우 비활성화합니다.
    이벤트 핸들러를 요소에 바로 적용
    타깃팅된 특정 요소에 이벤트 처리기를 적용합니다. 이 설정은 브라우저의 버블링 및 계층화 개념과 연결되어 있습니다.
    For example, when you click an image inside an anchor tag like <a href="abc.html"><img src="xyz.png"/></a> , you might expect the click to be associated with the anchor tag, because the tag is in the bubble stream. However, when you inspect the click in the developer tools, the click may actually affect only the <img> tag. To ensure that the event is handled correctly, associate the click with the <img> tag and do not depend on the browser to bubble up the click to a parent element. An event like a click can potentially bubble up to <body> . 이벤트가 실제로 연결되는 위치를 이해하고, 규칙이 올바로 실행되도록 명확하게 타깃팅하는 것은 중요합니다.
    버블링 ​은 이벤트가 캡처되어 가장 안쪽의 요소에 의해 처리된 후 외부 요소로 전파됨을 의미합니다.
  3. 추적할 태그의 이름과 태그에 있는 일치시킬 추가적인 속성을 가리킵니다.
    See Using the CSS Selector for information about finding the correct element tag.
  4. 규칙에 연결할 추가적인 기준이나 조건 유형을 선택하여 설정합니다.
  5. 이벤트 버블링에 대한 기본 설정을 가리킵니다.
    이벤트 버블링은 HTML DOM에서 이벤트 전파의 한 방식입니다.
    문제
    솔루션
    식별한 규칙 선택기의 하위 요소에 있는 관련 상호 작용이 규칙을 실행하도록 하려는 경우
    하위 요소에 대한 이벤트의 버블링 허용
    하위 요소가 이미 자신의 이벤트를 트리거했다면 버블링이 되지 않도록 하려는 경우
    이미 하위 요소에 의해 이벤트가 실행되는 경우 허용하지 않음
    식별한 규칙 선택기의 이벤트가 이벤트 계층 구조에서 요소 자체를 넘지 않도록 하려는 경우.
    이벤트가 상위까지 위쪽으로 버블링하는 것을 허용하지 않음

이벤트 유형

내장된 이벤트 유형 목록 및 각 유형 정의 방법.
카테고리
이벤트
정의
마우스
click
요소에서 포인팅 장치 단추를 눌렀다 뗍니다.
마우스 이동
수신자가 연결되어 있거나 요소 또는 그 하위 항목 중 하나로 포인팅 장치를 이동합니다.
키보드
키 누름
키를 누르고 그 키가 일반적으로 문자 값을 생성합니다(대신 입력 사용).
양식
포커스
요소가 포커스를 받았습니다(버블 표시 안 됨).
흐림 효과
요소가 포커스를 놓쳤습니다(버블 표시 안 됨).
제출
양식이 제출됩니다.
변경
요소가 포커스를 얻었다가 놓치고 그 값이 변경됩니다.
HMTL5 비디오
종료됨
미디어 끝에 다다랐기 때문에 재생이 중지되었습니다.
loadeddata
로딩을 완료한 미디어 첫 프레임입니다.
play
재생이 시작되었습니다.
pause
재생이 일시 중지되었습니다.
정지
사용자 에이전트가 미디어 데이터를 가져오려 하지만 데이터가 갑자기 준비되지 않습니다.
volumechange
볼륨이 변경되었습니다.
% 완료
전체 재생 시간 중 지정된 비율을 감안하여 이벤트를 생성합니다. 예를 들어 10%를 입력하면 비디오 총 길이의 10%가 재생되어야만 이 규칙이 작동한다는 의미입니다.
완료 시간
지정된 재생 시간을 감안하여 이벤트를 생성합니다. 예를 들어 10을 입력하면 비디오 총 길이 중 10초 동안 재생되어야만 이 규칙이 작동한다는 의미입니다.
모바일
orientationchange
장치 방향(가로/세로)이 변경되었습니다.
zoomchange
모바일 장치 화면 위에서 손가락을 모으거나 펼치는 제스처를 수행합니다.
브라우저
탭 포커스
컨텐츠가 포커스를 받으면 이벤트가 트리거됩니다.
탭 흐림 효과
컨텐츠가 포커스를 놓치면 이벤트가 트리거됩니다.
기타
사용자 지정
DOM에서 사용자 지정 이벤트가 트리거되었습니다. Select Custom from the Event Type drop-down list, then specify the custom event name. 자세한 내용은 Mozilla Developer Network의 CustomEvent 를 참조하십시오.
뷰포트에 들어갑니다
요소가 처음으로 방문자의 보기로 들어갑니다. 페이지가 로드되고 나서 바로 요소가 보기에 들어와 있으면 규칙이 즉시 작동합니다. 스크롤링한 후에 요소가 보기로 들어오면 규칙이 그때 작동합니다. 이벤트가 트리거되기 전 요소가 보기에 들어와 있어야 하는 시간을 정하는 지연을 옵션으로 규칙에서 지정할 수 있습니다(기본값은 1초임).
요소가 존재합니다.
지정된 선택기의 요소가 페이지 마크업에 있거나 나중에 동적으로 주입되기 때문에 이 요소가 존재하게 됩니다. 각 규칙은 1회만 작동합니다.
pushState 또는 hashchange
URL 경로 또는 URL 끝부분의 해시(조각 식별자)가 변경되었습니다. 페이지가 다시 로드되지 않지만 페이지 내용이 변경되는 단일 페이지 앱(SPA)에서 pushState 또는 hashchange 이벤트를 사용할 수 있습니다. SPA 작성에 사용하는 공통 개발 프레임워크에는 Angular와 React가 포함됩니다. 이 이벤트 유형을 사용하면 개발자 없이도 이벤트 기반 규칙을 작성할 수 있습니다. 이러한 규칙은 다음과 같이 SPA에서 일반적인 함수 관계가 발생할 때 작동합니다. HTML5 History pushState API 사용에 따라 URL 경로가 변경되었습니다. pushState 사용에 대한 자세한 내용은 Mozilla Developer Network의 History 입력 항목 추가 및 수정 을 참조하십시오. 사용자가 페이지의 보기 또는 위치를 변경하여 해시가 변경되었습니다. hashchange 사용에 대한 자세한 내용은 Mozilla Developer Network의 Hashchange 를 참조하십시오.
경과한 시간
초 단위 값입니다. 지정된 시간(초)이 지난 후 이벤트가 트리거됩니다.
dataelementchanged
데이터 요소가 변경되었습니다. 이 이벤트를 사용하면 트리거로 사용할 특정 데이터 요소를 선택할 수 있습니다. For more information on a possible use case, see Add Adobe Experience Manager ContextHub Tool .

Using the CSS selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.
DTM의 최대 장점 중 하나는 웹 사이트의 동작 또는 페이지 상호 작용을 일회성으로 중지할 수 있는 기능입니다. 그렇지만 원하는 CSS 요소를 찾아 규칙에 포함하기가 때로 어렵고 시간이 많이 걸립니다.

Example with unique element

다음 그림에 나온 것처럼 사용자가 웹 사이트의 "로그인 또는 등록" 링크를 클릭하면 작동하는 규칙을 만들려는 경우를 예로 들어 봅시다. 이 예는 단순히 "로그인 또는 등록" 링크에 CSS와 유사한 요소가 없기 때문입니다.
The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

CSS 선택기를 사용하려면 다음과 같이 하십시오.

  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
    In this example, we are creating an event-based rule that uses the Click event type to trigger the rule when users click the "Sign in or Register" link.
  2. Specify the website's URL, then click Load .
    이벤트를 수행할 웹 페이지 전용으로 지정합니다. 웹 사이트와 그 구조에 따라 CSS 스타일 시트가 페이지마다 다를 수 있습니다. 스타일 시트가 얼마나 자주 바뀌는지 확인하는 실험에 도움이 됩니다.
    웹 사이트가 이제 CSS 선 택기 위젯이 포함된 iFrame으로 로드됩니다. 마우스를 다양한 요소 위로 이동시키면서 도구가 어떤 식으로 작동하는지 느껴보십시오.
    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.
  3. 클릭 Sign In or Register .
    선택기에서 일치 항목을 찾을 페이지 요소를 클릭하면 해당 요소가 녹색으로 바뀝니다. The CSS Selector then generates a minimal CSS selector for that element.
    선택한 요소에 대한 정보와 DTM으로 정보를 전송하는 단추가 있는 하단의 패널에 주목하십시오.
    The number in parenthesis next to Clear indicates the number of items selected. 이 예에서 "로그인 또는 등록" 링크에 지정한 페이지와 유사한 요소가 없으므로 "1"이 표시됩니다. Click Clear to remove selected items. Click Toggle Position to move the panel to the top or bottom of the iFrame as desired. 클릭 ? to view help information about the CSS Selector.
  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  5. Finish configuring the rule as described in Create conditions for event-based rules .
    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click Sign In or Register .

Example with similar elements

이제 사용자가 상단 또는 웹 사이트에 있는 "남성'탭을 클릭할 때 트리거되는 규칙을 만들고자 합니다. 이 예제와 위에 설명한 간단한 예제의 차이는 "남성용" 탭에 페이지의 유사 요소가 많이 포함되어 있다는 점입니다.
  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
  2. Specify the website's URL, then click Load .
  3. "남성용" 탭을 클릭하여 선택합니다.
    페이지의 여러 요소가 선택되고 노란색으로 강조 표시되는 것이 보입니다. The number next to Clear in parenthesis is 28 in this example, which means there are 28 elements on the page that use the "a" tag.
    사용자가 "남성용" 링크를 클릭하면 규칙을 트리거하게 하려고 하므로 다른 유사한 요소를 선택 해제해야 합니다.
    마우스를 강조 표시된 유사한 요소(예: "여성용") 위로 이동하면 요소 주변에 빨간색 상자가 표시되는 것을 알 수 있습니다.
    선택기에서 일치 항목을 찾을 페이지 요소를 클릭하면 해당 요소가 녹색으로 바뀝니다. The CSS Selector then generates a minimal CSS selector for that element. 또한 선택기에서 노란색으로 표시된 해당 요소와 일치하는 모든 항목이 강조 표시됩니다. The CSS Selector starts out broad and then lets you narrow your selection.
    강조 표시된 요소를 클릭하여 거절하거나(빨간색) 강조 표시되지 않은 요소를 클릭하여 추가합니다(녹색). 이러한 선택 및 거절 과정을 통해 사용자의 필요에 완벽하게 일치하는 CSS 선택기를 찾을 수 있습니다. 마우스를 이동하는 동안 Shift 키를 눌러 선택한 다른 요소 내부의 요소를 선택할 수 있습니다.
  4. 빨간색 상자가 있는 요소("여성용")를 클릭하여 해당 요소와 다른 모든 유사한 요소를 선택 해제합니다.
    Notice that the number in parenthesis next to Clear is now 1.
  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  6. Finish configuring the rule as described in Create conditions for event-based rules .

CSS Selector limitations

The CSS Selector is in Beta and might not work well for some sites due to technical limitations.

Dynamically populate variables

요소 속성을 변수에 동적으로 할당할 수 있습니다.
요소 속성을 변수에 동적으로 할당하려면 다음 구문을 사용하십시오.
%this.attributeName%

예를 들어 외부 웹 사이트에 대해 여러 개의 링크가 있는 검색 결과 페이지가 있는 경우 클릭한 요소의 id 로 eVar을 동적으로 채워 클릭한 링크를 추적하려고 할 수 있습니다.
Example Link: <a id='myFirstLink' href='www.exampleLink.com'>
이를 위해서는 페이지의 링크 클릭 시 트리거할 이벤트 기반 규칙을 만듭니다. Then, within the Analytics section of the rule, set the eVar to %this.id% .
For non-standard attributes, you can similarly leverage the JavaScript function this.getAttribute() by wrapping it in '%' characters, as follows:
%this.getAttribute(attributeName)%

예를 들어 앞의 예제와 비슷한 검색 결과 페이지가 있습니다. 그렇지만 이러한 링크에 클릭한 링크에 따라 동적으로 eVar로 설정하려는 비표준 속성인 loc 가 포함되어 있습니다.
Example link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
이를 위해서는 페이지의 링크 클릭 시 트리거할 이벤트 기반 규칙을 만듭니다. Then, within the Analytics section of the rule, set the eVar to %this.get Attribute(loc)% .
원하는 속성이 표준 속성인지 또는 비표준 속성인지 잘 모를 경우 w3schools.com 을 참조하여 표준 HTML 속성을 확인해 보십시오. 그렇지만 의심스러운 경우에는 두 가지 시나리오에서 모두 작동하는 비표준 getAttribute() 형식을 사용할 수 있습니다.
이 기능은 다음을 포함한 다이내믹 태그 관리 규칙 필드에서 활용할 수 있습니다.

Analytics variables

  • Adobe Analytics:
    • 링크 추적, 페이지 데이터, 계층 구조
    • 전역 변수 및 이벤트
  • Google 애널리틱스
    • 페이지 뷰, 이벤트, 사용자 지정 변수

Custom script

표준 속성을 사용자 지정 코드에서 일반 JavaScript를 사용하여 참조할 수도 있습니다.