마우스
마지막 업데이트 날짜
2022년 11월 28일
이 기사에서는 웹 사이트의 사용자 지정 이벤트를 사용하여 동적 태그 관리(DTM) 규칙을 트리거하는 방법에 대해 설명합니다.
브라우저 이벤트
이벤트란 웹 페이지에서 어떤 일이 발생했음을 나타내는 신호입니다. 개발자는 이러한 신호를 사용하여 대응하거나 조치를 취할 수 있습니다.
이벤트를 무선 전파라고 생각하십시오. 무선 전파는 모든 사람들이 들을 수 있도록 방송되지만, 올바른 주파수를 듣기 위해서는 주파수를 맞춰야 합니다. 방송하고 아무도 듣지 않는다면 아무런 해가 없습니다. 이벤트도 마찬가지입니다. 이벤트를 트리거할 수 있으며, 이벤트가 수신되지 않으면 오류가 발생하지 않습니다. 문제가 발생하지 않거나 오류가 발생하지 않고 절대로 발생하지 않는 이벤트를 수신할 수도 있습니다.
여러 리소스가 HTML 이벤트를 다룹니다.
DTM에서 이벤트 기반 규칙 사용
이벤트 기반 규칙을 만들 때 특정 기본 이벤트에 대해 설정할 수 있습니다. 각 브라우저에는 다음과 같은 특정 작업에 의해 트리거되는 기본 이벤트가 있습니다.
- 마우스 클릭
- 마우스 오버(페이지의 무언가 위에 마우스를 올려놓음)
- 양식 필드 초점(양식 필드 내부로 커서 이동)
- 양식 필드 흐림(커서가 양식 필드를 벗어남)
- 양식 제출
이러한 이벤트는 의미가 있습니다. 매일 웹에서 실행됩니다. 브라우저의 기본 이벤트로 추적하려는 항목을 추적할 수 없는 경우 JavaScript 이벤트를 대신 사용할 수 있습니다.
DTM에 어떤 이벤트가 내장되어 있습니까?
다음 이벤트가 DTM의 이벤트 기반 규칙에 내장되어 있습니다.
|
|
키보드 |
포럼 |
HTML5 비디오 |
모바일 |
기타 |
|---|---|---|---|---|---|
|
Click mouseover |
keypress |
focus blur submit change |
ended loadeddata play pause stalled volumechange % complete time complete |
orientationchange zoomchange |
custom enters viewport element exists pushState or hashchange |
사용자 지정 이벤트
이벤트를 들을 수 있으려면 먼저 이벤트를 트리거해야 합니다. 이벤트는 개발자가 사이트 코드에서 정의합니다. 이벤트를 사용하는 시기와 장소를 식별하는 것은 다소 까다로울 수 있습니다. 간단한 경험 법칙: 추적하려는 항목이고 사전 정의된 DTM 이벤트 유형으로 추적할 수 없는 경우 사용자 지정 이벤트를 사용하십시오.
이벤트 트리거
사용자 지정 이벤트에 대한 다음 예제를 고려하십시오. 데이터를 추가할 수 있습니다. 장바구니가 있다고 가정해 보겠습니다. 장바구니에 무언가를 추가하면 AJAX가 사용됩니다. 새 페이지가 로드되지 않습니다. 대신 팝업 창이나 메시지를 통해 품목이 장바구니에 추가되었음을 알 수 있습니다. 이런 일이 발생하면 정확히 무엇이 추가되었는지 알려주는 사용자 지정 이벤트를 만들 수 있습니다.
var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);
위의 코드는 "data"라는 객체의 데이터를 참조합니다. "detail"이라는 사용자 지정 데이터는 개체로 정의되며 이벤트를 청취할 때 참조할 수 있습니다. 이벤트를 작성한 후 특정 요소(이 경우에는 ID가 "minicart"인 페이지의 요소)에서 이벤트를 트리거합니다. 이제는 듣고자 하는 사람들을 위해 방송하는 사용자 지정 이벤트가 있습니다.
사용자 지정 이벤트 리스너 추가
DTM에서는 사용자 지정 이벤트 리스너를 추가하는 것이 이벤트 기반 규칙을 추가하는 것만큼이나 쉽습니다.
이 단계에서는 DTM을 수신하는 규칙을 구성합니다.
-
새 이벤트 기반 규칙을 추가하십시오.
-
이름을 지정하십시오.
-
위의 예에서 사용자 정의 이벤트 유형을 선택하고 addToCart로 정의 된 이벤트 이름을 입력하십시오.
-
이 이벤트를 발생시킬 태그 또는 요소를 정의하십시오. CSS 선택자를 사용한다면 #minicart입니다.
-
적절한 비콘을 발생시키는 규칙을 구성하십시오.
질문이 있으십니까?
이 기사나 다른 DTM 주제에 관해 궁금한 점이 있으시면 DTM 커뮤니티 포럼에 들러 주시기 바랍니다. 포럼을 사용하여 질문하고, 토론에 참여하고, 각 솔루션에 대한 최신 정보를 받아 볼 수 있습니다.
블로그 게시물의 일부를 이 기사에서 사용할 수 있게 해 준 Disruptive Advertising의 Adam에게 감사드립니다.
