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

조건은 언제 이벤트 기반 규칙이 트리거되는지 결정합니다.

  1. 마우스 클릭이나 양식 제출과 같이 추적할 상호 작용 유형을 선택합니다.

    자세한 내용은 이벤트 유형을 참조하십시오.

  2. 다음 옵션을 필요에 따라 활성화합니다.

    요소 설명
    링크 활성화 지연 이벤트가 링크를 활성화하고 이벤트를 실행할 시간이 될 때까지 링크가 지연되도록 하려는 경우 활성화합니다.
    이벤트 핸들러를 요소에 직접 적용 타깃팅된 특정 요소에 이벤트 핸들러를 적용합니다. 이 설정은 브라우저의 버블링 및 계층화 개념과 연결되어 있습니다.

    예를 들어 <a href="abc.html"><img src="xyz.png"/></a>와 같은 앵커 태그의 내부에 있는 이미지를 클릭하면 태그가 버블 스트림에 있으므로 클릭이 앵커 태그와 연결되어 있을 것으로 예상할 수 있습니다. 하지만 개발자 도구에서 클릭을 검사하면 클릭은 실제로 <img> 태그에만 영향을 줄 수 있습니다. 이벤트가 올바로 처리되도록 하려면 클릭을 <img> 태그와 연결하되, 브라우저에서 클릭이 상위 요소로 버블링되도록 하지 마십시오. 클릭과 같은 이벤트는 잠재적으로 <body>까지 버블링될 수 있습니다. 이벤트가 실제로 바인딩되는 위치를 파악하고 규칙이 올바르게 실행되도록 명확하게 타깃팅해야 합니다.

    버블링은 이벤트가 먼저 캡처되어 가장 내부 요소에 의해 처리된 후 외부 요소로 전파됨을 의미합니다.

  3. 추적할 태그의 이름과 태그에 있는 일치시킬 추가적인 속성을 가리킵니다.

    올바른 요소 태그를 찾는 방법은 CSS 선택기 사용을 참조하십시오.

  4. 규칙에 연결할 추가적인 기준이나 조건 유형을 선택하여 설정합니다.

  5. 이벤트 버블링에 대한 기본 설정을 가리킵니다.

    이벤트 버블링은 HTML DOM에서 이벤트 전파의 한 방법입니다.

    문제 솔루션
    식별한 규칙 선택기의 하위 요소에 대한 관련 상호 작용이 규칙을 실행하도록 하려는 경우 하위 요소의 이벤트가 버블링되도록 허용
    하위 요소가 이미 자체 이벤트를 트리거할 때 버블링이 발생하지 않도록 하려는 경우. 하위 요소가 이미 이벤트를 트리거한 경우 허용하지 마십시오.
    식별한 규칙 선택기의 이벤트가 이벤트 계층의 요소 자체를 넘지 않도록 합니다. 이벤트가 상위까지 위쪽으로 버블링하는 것을 허용하지 않음

이벤트 유형

기본 제공 이벤트 유형 및 각 이벤트 정의 방법 목록

카테고리 이벤트 정의
마우스 click 포인팅 장치 단추를 눌러 요소에 놓습니다.
마우스오버 포인팅 장치는 리스너가 연결되어 있거나 해당 하위 요소 중 하나로 이동됩니다.
키보드 키 입력 키를 누르면 해당 키가 일반적으로 문자 값을 생성합니다(대신 입력 사용).
양식 초점 요소가 포커스를 받았습니다(버블 아님).
흐림 요소가 포커스를 잃습니다(버블링하지 않음).
submit 양식이 제출됩니다.
변경 요소는 초점을 잃으며 포커스를 받은 이후 값이 변경되었습니다.
HTML5 비디오 종료 미디어 끝에 도달하여 재생이 중지되었습니다.
loadeddata 미디어의 첫 번째 프레임이 로드를 완료했습니다.
play 재생이 시작되었습니다.
일시 중지 재생이 일시 중지됩니다.
중단 사용자 에이전트가 미디어 데이터를 가져오려고 하지만 데이터가 예기치 않게 준비되지 않습니다.
볼루메간 볼륨이 변경되었습니다.
% 완료 지정된 총 재생 시간의 백분율을 통해 이벤트를 전송합니다. 예를 들어 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 또는 hashchange URL 끝에 있는 URL 경로 또는 해시(조각 식별자)가 변경되었습니다. 페이지 pushState hashchange 가 다시 로드되지 않고 컨텐츠가 변경되는 단일 페이지 앱(SPA)에서 또는 이벤트를 사용할 수 있습니다. SPA를 만드는 데 사용할 수 있는 공통 개발 프레임워크에는 각도와 반작용이 포함됩니다. 이 이벤트 유형을 사용하면 개발자에 의존하지 않고 이벤트 기반 규칙을 만들 수 있습니다. 다음과 같은 SPA에서 일반적인 기능이 발생하는 경우 이러한 규칙이 실행됩니다. HTML5 내역pushStateAPI의 사용에 따라 URL 경로가 변경되었습니다. 사용 방법에 대한 자세한 내용 pushState은 Mozilla Developer Network 에서 기록 항목 추가 및 수정을 참조하십시오. 사용자가 페이지의 보기 또는 위치를 변경하여 해시가 변경되었습니다. 사용 방법에 대한 자세한 내용 hashchange은 Mozilla Developer Network 에서해시 변경을 참조하십시오.
경과된 시간 값(초)입니다. 지정된 시간(초)이 경과하면 이벤트가 트리거됩니다.
dataelementchanged 날짜 요소가 변경되었습니다. 이 이벤트를 사용하면 트리거로 사용할 특정 데이터 요소를 선택할 수 있습니다. 가능한 사용 사례에 대한 자세한 내용은 Adobe Experience Manager ContextHub 도구 추가를 참조하십시오.

CSS 선택기 사용

DTM 규칙 빌더를 종료하지 않고도 이벤트 기반 규칙 트리거에 사용할 CSS 요소를 빠르고 쉽게 선택할 수 있습니다. CSS Selector

DTM의 가장 큰 이점 중 하나는 웹 사이트에서 행동 또는 페이지 인터랙션을 이벤트화할 수 있는 기능입니다. 하지만 원하는 CSS 요소를 규칙에 포함시키는 것은 어렵고 시간이 많이 소모되는 경우가 있습니다.

고유 요소가 있는 예

예를 들어 다음 그림과 같이 사용자가 웹 사이트에서 "로그인 또는 등록" 링크를 클릭할 때 트리거되는 규칙을 만들고 싶습니다. 이 예는 "로그인 또는 등록" 링크에 CSS와 유사한 요소가 없기 때문에 간단합니다.

아래에 설명된 보다 복잡한 예제는 맨 위에 있는 탭("남성", "여성", "장비" 등) 등과 같이 페이지에 유사한 요소가 많이 있을 때 CSS Selector 를 사용하는 방법을 보여줍니다.

CSS 선택기를 사용하려면:

  1. 규칙을 CSS Selector 만드는 동안 Target 아이콘을 클릭하여 DTM 내의 위젯에 액세스합니다.

    이 예에서는 사용자가 "로그인 또는 등록" 링크를 클릭할 때 Click 이벤트 유형을 사용하여 규칙을 트리거하는 이벤트 기반 규칙을 만듭니다.

  2. 웹 사이트의 URL을 지정한 다음 을 클릭합니다 Load.

    노트

    이벤트를 시작할 웹 페이지에만 적용됩니다. CSS 스타일 시트는 웹 사이트와 아키텍처에 따라 한 페이지에서 다른 페이지로 변경될 수 있습니다. 스타일 시트가 얼마나 자주 변경되는지 실험해 보는 것이 유용합니다.

    이제 웹 사이트가 CSS 선택기 위젯이 포함된 iFrame에 로드됩니다. 다양한 요소 위로 마우스를 가져가면 툴의 작동 방식을 확인할 수 있습니다.

    을 사용하지 않고 이 규칙을 만드는 경우 원하는 페이지 요소를 검사하여 사용할 적절한 CSS를 결정할 CSS Selector것입니다. 규칙을 사용하여 규칙 CSS Selector을 트리거할 페이지의 요소를 클릭하면 됩니다.

  3. Sign In or Register​를 클릭합니다.

    선택기를 일치시킬 페이지 요소를 클릭하면 해당 요소가 녹색으로 바뀝니다. 그런 CSS Selector 다음 해당 요소에 대해 최소한의 CSS 선택기를 생성합니다.

    맨 아래에 선택한 요소에 대한 정보와 DTM으로 정보를 보내는 단추가 있는 패널이 있습니다.

    괄호 옆에 있는 숫자는 선택한 항목 수를 Clear 나타냅니다. 이 예에서, "로그인 또는 등록" 링크는 지정된 페이지에 있는 링크와 유사하지 않으므로 "1"이 표시됩니다. 아이콘을 Clear 클릭하여 선택한 항목을 제거합니다. 원하는 대로 패널 Toggle Position 을 iFrame 위나 아래로 이동하려면 을 클릭합니다. 클릭 ? 을 클릭하여 도움말 정보를 볼 수 있습니다 CSS Selector.

  4. Send to DTM 클릭하여 DTM 내의 Element Tag or Selector 필드에 CSS를 복사합니다.

  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. Send to DTM 클릭하여 DTM 내의 Element Tag or Selector 필드에 CSS를 복사합니다.

  6. 이벤트 기반 규칙의 만들기 조건에 설명된 대로 규칙 구성을 마칩니다.

CSS 선택기 제한

베타 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를 사용하여 참조할 수도 있습니다.

이 페이지에서는