이벤트란 웹 페이지에서 어떤 일이 발생했음을 나타내는 신호입니다. 개발자는 이러한 신호를 사용하여 대응하거나 조치를 취할 수 있습니다.
이벤트를 무선 전파라고 생각하십시오. 무선 전파는 모든 사람들이 들을 수 있도록 방송되지만, 올바른 주파수를 듣기 위해서는 주파수를 맞춰야 합니다. 방송하고 아무도 듣지 않는다면 아무런 해가 없습니다. 이벤트도 마찬가지입니다. 이벤트를 트리거할 수 있으며, 이벤트가 수신되지 않으면 오류가 발생하지 않습니다. 문제가 발생하지 않거나 오류가 발생하지 않고 절대로 발생하지 않는 이벤트를 수신할 수도 있습니다.
여러 리소스가 HTML 이벤트를 다룹니다.
이벤트 기반 규칙을 만들 때 특정 기본 이벤트에 대해 설정할 수 있습니다. 각 브라우저에는 다음과 같은 특정 작업에 의해 트리거되는 기본 이벤트가 있습니다.
- 마우스 클릭
- 마우스 오버(페이지의 무언가 위에 마우스를 올려놓음)
- 양식 필드 초점(양식 필드 내부로 커서 이동)
- 양식 필드 흐림(커서가 양식 필드를 벗어남)
- 양식 제출
이러한 이벤트는 의미가 있습니다. 매일 웹에서 실행됩니다. 브라우저의 기본 이벤트로 추적하려는 항목을 추적할 수 없는 경우 JavaScript 이벤트를 대신 사용할 수 있습니다.
| 마우스 | 키보드 | 포럼 | 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 커뮤니티 포럼에 들러 주시기 바랍니다. 포럼을 사용하여 질문하고, 토론에 참여하고, 각 솔루션에 대한 최신 정보를 받아 볼 수 있습니다.
블로그 게시물의 일부를 이 기사에서 사용할 수 있게 해 준 Disruptive Advertising의 Adam에게 감사드립니다.
Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.