Show Menu
화제×

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

조건은 언제 이벤트 기반 규칙이 트리거되는지 결정합니다.
  1. 마우스 클릭이나 양식 제출과 같이 추적할 상호 작용 유형을 선택합니다.
    자세한 내용은 이벤트 유형을 참조하십시오 .
  2. 다음 옵션을 필요에 따라 활성화합니다.
    요소
    설명
    링크 활성화 지연
    이벤트가 링크를 활성화하고 이벤트를 실행할 시간이 될 때까지 링크가 지연되도록 하려는 경우 활성화합니다.
    이벤트 핸들러를 요소에 직접 적용
    타깃팅된 특정 요소에 이벤트 처리기를 적용합니다. 이 설정은 브라우저의 버블링 및 계층화 개념과 연결되어 있습니다.
    예를 들어 <a href="abc.html"><img src="xyz.png"/></a> 와 같은 앵커 태그의 내부에 있는 이미지를 클릭하면 태그가 버블 스트림에 있으므로 클릭이 앵커 태그와 연결되어 있을 것으로 예상할 수 있습니다. 하지만 개발자 도구에서 클릭을 검사하면 클릭은 실제로 <img> 태그에만 영향을 줄 수 있습니다. 이벤트가 올바로 처리되도록 하려면 클릭을 <img> 태그와 연결하되, 브라우저에서 클릭이 상위 요소로 버블링되도록 하지 마십시오. 클릭과 같은 이벤트는 잠재적으로 <body> 까지 버블링될 수 있습니다. 이벤트가 실제로 바인딩되는 위치를 파악하고, 규칙이 올바르게 실행되도록 명확하게 타깃팅하는 것이 중요합니다.
    버블링은 이벤트가 먼저 캡처되어 가장 안쪽 요소에 의해 처리된 다음 외부 요소로 전파됨을 의미합니다.
  3. 추적할 태그의 이름과 태그에 있는 일치시킬 추가적인 속성을 가리킵니다.
    올바른 요소 태그를 찾는 방법에 대한 자세한 내용은 CSS 선택기 사용을 참조하십시오.
  4. 규칙에 연결할 추가적인 기준이나 조건 유형을 선택하여 설정합니다.
  5. 이벤트 버블링에 대한 기본 설정을 가리킵니다.
    이벤트 버블링은 HTML DOM에서 이벤트 전파의 한 방법입니다.
    문제
    솔루션
    식별한 규칙 선택기의 하위 요소에 대한 관련 상호 작용이 규칙을 실행하도록 하려는 경우
    하위 요소의 이벤트가 버블링되도록 허용
    자식 요소가 이미 자체 이벤트를 트리거할 때 버블링이 발생하지 않도록 하려는 경우
    하위 요소가 이미 이벤트를 트리거한 경우 허용하지 마십시오.
    식별한 규칙 선택기의 이벤트가 이벤트 계층 구조에서 요소 자체를 벗어나는 것을 원하지 않습니다.
    이벤트가 상위까지 위쪽으로 버블링되도록 허용하지 않음

이벤트 유형

기본 제공 이벤트 유형 및 각 이벤트 정의 방법 목록
카테고리
이벤트
정의
마우스
click
포인팅 장치 단추를 눌러 요소에 놓습니다.
마우스오버
포인팅 장치는 리스너가 연결되어 있거나 해당 자식 중 하나로 이동됩니다.
키보드
키 누르기
키를 누르면 해당 키는 일반적으로 문자 값을 생성합니다(대신 입력 사용).
양식
초점
요소가 포커스를 받았습니다(버블링하지 않음).
흐림
요소가 포커스를 잃음(버블링하지 않음).
submit
양식이 제출됩니다.
변경
요소는 포커스를 얻은 후 포커스를 잃고 값이 변경되었습니다.
HMTL5 비디오
종료
미디어 끝에 도달하여 재생이 중지되었습니다.
loadeddata
미디어의 첫 번째 프레임이 로드를 완료했습니다.
play
재생이 시작되었습니다.
일시 중지
재생이 일시 중지됩니다.
교착 상태
사용자 에이전트가 미디어 데이터를 가져오려고 하지만 데이터가 예기치 않게 준비되지 않습니다.
volumechange
볼륨이 변경되었습니다.
% 완료
지정된 총 재생 시간의 백분율을 통해 이벤트를 전송합니다. 예를 들어 10%를 입력하면 비디오 전체 길이의 10%가 재생된 경우에만 이 규칙이 실행됨을 나타냅니다.
전체 시간
지정된 재생 시간이 지정된 이벤트를 전송합니다. 예를 들어 10을 입력하면 비디오 전체 길이의 10초가 재생된 경우에만 이 규칙이 실행됩니다.
모바일
방향 변경
장치의 방향(세로/가로)이 변경되었습니다.
zoomchange
모바일 장치에서 핀치 또는 스프레드 제스처가 수행되는 경우
브라우저
탭 초점
컨텐츠가 포커스를 받으면 이벤트가 트리거됩니다.
탭 흐림 효과
컨텐츠가 포커스를 잃으면 이벤트가 트리거됩니다.
기타
사용자 지정
DOM에서 사용자 지정 이벤트가 트리거되었습니다. Select Custom from the Event Type drop-down list, then specify the custom event name. 자세한 내용은 Mozilla 개발자 네트워크에서 CustomEvent 를 참조하십시오.
뷰포트 시작
요소가 처음 방문자 보기에 들어오면 요소가 페이지 로드 즉시 표시되어 있으면 규칙이 즉시 실행됩니다. 스크롤 후 요소가 표시되면 규칙이 실행됩니다. 이벤트가 트리거되기 전에 요소가 보기에 있어야 하는 시간(기본값은 1초)을 결정하는 선택적 지연을 규칙에 지정할 수 있습니다.
요소 존재
지정된 선택기의 요소가 페이지 마크업에 있거나 나중에 동적으로 삽입되어 존재하게 되는 경우 각 규칙이 한 번만 실행됩니다.
pushState 또는 해시 변경
URL 끝에 있는 URL 경로 또는 해시(조각 식별자)가 변경되었습니다. 이 pushState 또는 hashchange 이벤트는 페이지가 다시 로드되지 않고 컨텐츠가 변경되는 단일 페이지 앱(SPA)과 함께 사용할 수 있습니다. SPA를 생성하는 데 사용할 수 있는 공통 개발 프레임워크에는 Angular 및 Reperimate가 포함되어 있습니다. 이 이벤트 유형을 사용하면 개발자에게 의존하지 않고 이벤트 기반 규칙을 만들 수 있습니다. 이러한 규칙은 다음과 같은 SPA에서 일반적인 기능이 발생할 때 실행됩니다.HTML5 내역 API의 사용에 따라 URL 경로가 pushState 변경되었습니다. 사용 방법에 대한 자세한 내용은 pushState Mozilla 개발자 네트워크의 기록 항목 추가 및 수정을 참조하십시오. 사용자가 페이지의 보기 또는 위치를 변경하여 해시가 변경되었습니다. 사용에 대한 자세한 내용은 hashchange Mozilla 개발자 네트워크의 해시스트를 참조하십시오.
경과된 시간
값(초)입니다. 지정한 시간(초)이 경과하면 이벤트가 트리거됩니다.
dataelementchanged
날짜 요소가 변경되었습니다. 이 이벤트를 사용하면 트리거로 사용할 특정 데이터 요소를 선택할 수 있습니다. 사용 사례에 대한 자세한 내용은 Adobe Experience Manager ContextHub 도구 추가를 참조하십시오 .

CSS 선택기 사용

DTM 규칙 CSS Selector 빌더를 종료하지 않고도 이벤트 기반 규칙 트리거에 사용할 CSS 요소를 빠르고 손쉽게 선택할 수 있습니다.
DTM 파섹 그러나 원하는 CSS 요소를 규칙에 포함시키는 것은 어렵고 시간이 많이 소요되는 경우가 있습니다.

고유 요소가 있는 예

예를 들어 다음 그림과 같이 사용자가 웹 사이트에서 "로그인 또는 등록" 링크를 클릭할 때 트리거되는 규칙을 만듭니다. 이 예는 "로그인 또는 등록" 링크에 CSS와 유사한 요소가 없기 때문에 간단합니다.
아래에 설명된 보다 복잡한 예에서는 맨 위의 탭("남성용", "여성용", "장비" 등) 등 페이지에 유사한 요소가 많이 있을 때 이 CSS Selector 요소를 사용하는 방법을 보여 줍니다.

CSS 선택기를 사용하려면:

  1. 규칙을 CSS Selector 만드는 동안 Target 아이콘을 클릭하여 DTM 내에서 위젯에 액세스합니다 .
    이 예에서는 사용자가 "로그인 또는 등록" 링크를 클릭할 때 Click 이벤트 유형을 사용하여 규칙을 트리거하는 이벤트 기반 규칙을 만듭니다.
  2. 웹 사이트의 URL을 지정한 다음 을 클릭합니다 Load .
    이벤트를 시작할 웹 페이지에만 적용됩니다. CSS 스타일 시트는 웹 사이트와 아키텍처에 따라 한 페이지에서 다른 페이지로 변경될 수 있습니다. 스타일 시트가 얼마나 자주 변경되는지 실험해 보면 유용합니다.
    이제 CSS 선택기 위젯이 임베드되어 있는 iFrame에 웹 사이트가 로드됩니다. 다양한 요소 위에 마우스를 올려 놓으면 툴의 작동 방식을 확인할 수 있습니다.
    을 사용하지 않고 이 규칙을 만드는 CSS Selector경우 원하는 페이지 요소를 검사하여 사용할 적절한 CSS를 결정합니다. 규칙을 CSS Selector사용하여 규칙을 트리거할 페이지의 요소를 클릭하면 됩니다.
  3. Sign In or Register ​를 클릭합니다.
    선택기를 일치시킬 페이지 요소를 클릭하면 녹색으로 바뀝니다. 그러면 CSS Selector 해당 요소에 대한 최소 CSS 선택기가 생성됩니다.
    아래쪽의 패널에는 선택한 요소에 대한 정보와 DTM으로 정보를 보내는 단추가 포함되어 있습니다.
    괄호 옆의 숫자는 선택한 항목의 수를 Clear 나타냅니다. 이 예에서는 "로그인 또는 등록" 링크에 지정된 페이지에 있는 링크와 유사한 것이 없으므로 "1"이 표시됩니다. 아이콘을 Clear 클릭하여 선택한 항목을 제거합니다. 패널을 Toggle Position 클릭하여 원하는 대로 iFrame 위쪽이나 아래쪽으로 이동합니다. 클릭 ? 을 클릭하여 도움말 정보를 볼 수 CSS Selector있습니다.
  4. CSS를 Send to DTM 클릭하여 DTM 내의 Element Tag or Selector 필드에 복사합니다.
  5. 이벤트 기반 규칙에 대한 조건 만들기에 설명된 대로 규칙 구성을 완료합니다.
    코드를 작성하거나 요소를 검사하지 않고 사용자가 클릭할 때 트리거되는 이벤트 기반 규칙을 Sign In or Register ​만들었습니다.

유사한 요소가 있는 예

이제 사용자가 웹 사이트 상단의 "남성" 탭을 클릭할 때 트리거되는 규칙을 만든다고 가정합니다. 이 예제와 위에서 설명한 간단한 예제의 차이는 "남성" 탭에 페이지에 유사한 요소가 많이 있다는 것입니다.
  1. 규칙을 CSS Selector 만드는 동안 Target 아이콘을 클릭하여 DTM 내에서 위젯에 액세스합니다 .
  2. 웹 사이트의 URL을 지정한 다음 을 클릭합니다 Load .
  3. "남성용" 탭을 클릭하여 선택합니다.
    페이지의 많은 요소가 선택되고 노란색으로 강조 표시됩니다. 이 예에서는 괄호 옆에 Clear 있는 숫자가 28로, 즉 "a" 태그를 사용하는 페이지에 28개의 요소가 있음을 의미합니다.
    사용자가 "남성용" 링크를 클릭할 때 규칙이 트리거되도록 하기 때문에 다른 유사한 요소를 선택 취소해야 합니다.
    강조 표시된 유사한 요소(예: "여성") 위로 마우스를 가져가면 요소 주위에 빨간색 상자가 표시됩니다.
    선택기를 일치시킬 페이지 요소를 클릭하면 녹색으로 바뀝니다. 그러면 CSS Selector 해당 요소에 대한 최소 CSS 선택기가 생성됩니다. 또한 선택기는 해당 요소와 일치하는 모든 항목을 노란색으로 강조 표시합니다. 이렇게 CSS Selector 하면 선택 항목의 범위를 좁힐 수 있습니다.
    강조 표시된 요소를 클릭하여 거부하거나(빨간색), 강조 표시되지 않은 요소를 클릭하여 추가합니다(녹색). 이러한 선택 및 거부 프로세스를 통해 요구 사항에 적합한 CSS 선택기를 만들 수 있습니다. 마우스를 이동하는 동안 Shift 키를 누르면 다른 선택한 요소 내에서 요소를 선택할 수 있습니다.
  4. 빨간색 상자(여성)가 있는 요소를 클릭하여 요소 및 기타 모든 유사한 요소를 선택 해제합니다.
    괄호 옆의 숫자는 Clear 이제 1입니다.
  5. CSS를 Send to DTM 클릭하여 DTM 내의 Element Tag or Selector 필드에 복사합니다.
  6. 이벤트 기반 규칙에 대한 조건 만들기에 설명된 대로 규칙 구성을 완료합니다.

CSS 선택기 제한 사항

Beta CSS Selector 에 있으며 기술 제한으로 인해 일부 사이트에서 제대로 작동하지 않을 수 있습니다.

동적으로 변수 입력

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

예를 들어 외부 웹 사이트에 대한 링크가 여러 개인 검색 결과 페이지가 있다고 가정합니다. eVar를 클릭한 요소의 값으로 동적으로 채워 클릭한 링크를 추적하려고 id 합니다.
예제 링크: <a id='myFirstLink' href='www.exampleLink.com'>
이를 위해서는 페이지의 링크 클릭 시 트리거할 이벤트 기반 규칙을 만듭니다. 그런 다음 규칙의 Analytics 섹션 내에서 eVar를 %this.id% 설정합니다.
비표준 속성의 경우 다음과 같이 JavaScript 함수를 '%' 문자로 this.getAttribute() 래핑하여 활용할 수 있습니다.
%this.getAttribute(attributeName)%

예를 들어 앞의 예와 유사한 검색 결과 페이지가 있다고 가정합니다. 그러나 이러한 링크에는 클릭한 링크에 따라 동적으로 eVar로 설정하려는 비표준 속성이 loc 포함되어 있습니다.
예제 링크: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
이를 위해서는 페이지의 링크 클릭 시 트리거할 이벤트 기반 규칙을 만듭니다. 그런 다음 규칙의 Analytics 섹션 내에서 eVar를 %this.get Attribute(loc)% 설정합니다.
원하는 속성이 표준 속성인지 비표준 속성인지 확실하지 않은 경우 w3schools.com 을 참조하여 표준 HTML 속성에 대해 자세히 알아보십시오. 하지만 확실하지 않은 경우 두 가지 시나리오에서 작동하는 비표준 getAttribute() 형식을 사용할 수 있습니다.
이 기능은 다음을 포함한 다이내믹 태그 관리 규칙 필드에서 사용할 수 있습니다.

Analytics 변수

  • Adobe Analytics:
    • 링크 추적, 페이지 데이터, 계층
    • 전역 변수 및 이벤트
  • Google Analytics
    • 페이지 보기 횟수, 이벤트, 사용자 지정 변수

사용자 정의 스크립트

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