지난 주 올스타 Adobe Dynamic Tag Management 팀은 DTM의 이벤트 기반 규칙에 몇 가지 매력적인 새 기능을 추가했습니다. 사용할 수 있는 이벤트 기반 규칙에 대해 2개의 새로운 이벤트 유형이 있습니다.

1. 관습
2. pushState 또는 해시체인지

각 이벤트 유형에 대한 자세한 내용은 아래 섹션을 참조하십시오.

이벤트 기반 규칙: 사용자 정의

먼저 맞춤 이벤트를 정의해 보겠습니다. DTM의 다른 이벤트 기반 규칙에 대한 몇 가지 예를 살펴보겠습니다. 다음은 이벤트 기반 규칙에 대한 이벤트 유형 목록입니다.

이벤트 기반 규칙을 만들 때 특정 기본 이벤트에 대해 설정할 수 있습니다. 각 브라우저(Internet Explorer 포함)에는 특정 작업에 대해 트리거할 수 있는 기본 이벤트가 있습니다. 쉬운 것 중 일부는 다음과 같습니다.

• 마우스 클릭
• 마우스 오버(페이지에서 무언가를 가리킴)
• 양식 필드 포커스(커서가 양식 필드 내부로 이동)
• 양식 필드가 흐려짐(커서가 양식 필드를 벗어남)
• 양식 제출
• 등.

이것들은 모두 의미가 있습니다. 그것들은 우리가 웹에서 매일 하는 일입니다. 때로는 무언가를 추적해야 하는데 제대로 하는 것이 거의 불가능합니다. 이것이 제가 JavaScript 이벤트를 사용하는 것을 좋아하는 이유입니다. 이벤트를 전파로 생각하십시오. 모든 사람이 들을 수 있도록 방송되지만 들으려면 올바른 주파수에 맞춰야 합니다. 방송을 하는데 아무도 듣고 있지 않다면 큰 문제가 아닙니다(라디오 광고주에게 알리지 마십시오). 이벤트와 동일: 이벤트를 트리거할 수 있으며 이벤트를 수신하는 항목이 없는 경우 문제가 발생하거나 오류가 발생하지 않습니다. 그리고 절대 발생하지 않는 이벤트를 수신하는 경우에도 문제가 발생하거나 오류가 발생하지 않습니다.

이것이 왜 중요한가요? 작업을 추적하는 이전 방법 중 하나는 사용자 지정 JavaScript 함수를 만든 다음 호출하거나 태그 관리 시스템 또는 기타 코드 베이스에 고유한 매우 구체적인 코드 집합을 구현하는 것이었습니다. 하지만 그 기능이 어떻게든 제거되거나 이름이 바뀌면 어떻게 될까요? 때때로 사이트를 손상시킬 수 있는 JavaScript 오류가 발생합니다. 이벤트는 그 문제를 해결합니다.

DTM의 직접 호출 규칙에 대해 잘 알고 있는 경우 "직접 호출 규칙을 사용하지 않는 이유는 무엇입니까?"라고 자문할 수 있습니다. 유효한 질문입니다. 문제는 직접 호출 규칙이 DTM에 대한 종속성을 구축한다는 것입니다. 내가 개발자이고 누군가가 내 코드에 _satellite.track을 참조하는 코드를 많이 넣으라고 하면 질문을 던지고 대부분 거절할 것입니다! 대신 종속성이 없는 이벤트를 사용할 수 있습니다.

이벤트를 수신하려면 먼저 이벤트를 트리거해야 합니다. 이벤트는 개발자가 사이트 코드에 정의해야 합니다. 사용 시기와 위치를 식별하는 것은 약간 까다로울 수 있지만 간단한 경험 법칙은 추적하려는 항목이고 미리 정의된 DTM 이벤트 유형으로 추적할 수 없는 경우 사용자 지정 이벤트를 사용하는 것입니다. Mozilla에서 이를 수행하는 방법에 대한 좋은 정보를 찾을 수 있습니다. 2가지 기본 이벤트 유형이 있습니다.

• 이벤트 – 이벤트에 대한 추가 데이터를 전송하지 않고 어떤 일이 발생했음을 트리거합니다.
• CustomEvent – ​​이벤트에 일부 데이터 추가

데이터를 추가할 수 있는 사용자 지정 이벤트의 예를 사용하겠습니다. 장바구니가 있고 장바구니에 무언가를 추가하면 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"라는 개체의 데이터를 참조하고 있음을 알 수 있습니다. 사용자 지정 "세부 정보" 데이터를 개체로 정의하고 있으며 이벤트를 수신할 때 참조할 수 있습니다. 이벤트를 만든 후 특정 요소(이 경우에는 ID가 "minicart"인 페이지의 요소)에서 이벤트를 트리거합니다. 이제 듣고 싶은 사람을 위해 방송하는 맞춤 이벤트가 있습니다.

다음으로 DTM에서 수신하도록 규칙을 구성합니다.

1. 새 이벤트 기반 규칙 추가
2. 이름을 지어주세요
3. 이벤트 유형 "custom"을 선택하고 "addToCart"로 정의한 이벤트 이름을 입력합니다.
   
4. 이 이벤트를 가질 태그 또는 요소를 정의합니다. CSS 선택기를 사용하면 "#minicart"가 됩니다.
   
5. 규칙을 구성합니다. 이것은 시원해지는 곳입니다. 이벤트에서 제공되는 "디테일"을 사용할 수 있으며 오브젝트로도 사용할 수 있습니다. 감사합니다 어도비! 여기서는 내가 원하는 데이터와 함께 Google Analytics 이벤트를 보냅니다. %event.detail%를 사용하여 데이터를 참조하거나 개체가 있는 경우 %event.detail.<<name>>%로 참조할 수 있습니다. 아래 예를 참조하십시오.
   
   나는 아마 이런 이벤트를 보내지 않을 것입니다. 그러나 당신은 그것이 어떻게 사용될 수 있는지에 대한 요지를 얻습니다. 그리고 사용자 지정 코드에서 사용해야 하는 경우 Adobe Analytics 도구에 대해 _satellite.getVar(“%event.detail.product_id%”)로 참조할 수 있습니다. 굉장한 소스!!!

이것은 소설을 의도한 것이 아니었지만 이 기능이 얼마나 멋진지 보여주고 싶었습니다. 내가 직접 호출 규칙을 좋아하는 만큼 규칙은 내 구현에서 뒷전으로 밀려나고 있으며 사용자 지정 이벤트는 제자리걸음입니다.

pushState 또는 해시체인지

푸시 상태

이제 pushState를 살펴보겠습니다. 기본적으로 새 페이지를 실제로 로드하지 않고도 페이지/사이트의 URL을 업데이트할 수 있습니다. 그 자체로는 아무 작업도 수행하지 않지만 단일 페이지 앱을 사용할 수 있습니다. 이 기능을 활용하는 여러 프레임워크가 있습니다. 따라서 사이트가 이와 같이 구축된 경우 pushState 기능이 정말 유용할 수 있습니다!

규칙을 설정할 때 물론 새 이벤트 유형을 선택하게 됩니다.

추가 정의를 위해 CSS 선택기가 필요하지 않습니다. 그러나 몇 가지 조건을 살펴보고 싶을 것입니다. 새 URL을 보고 있는 경우 주로 사용하게 될 것은 경로입니다. 그게 다야!

해시체인지

Twitter 덕분에 우리는 모두 해시(해시 태그)가 무엇인지 알고 있으므로 해시 변경은 해시 변경을 참조해야 합니다! 해시의 멋진 점은 원하는 대로 변경할 수 있고 페이지를 로드하지 않는다는 것입니다. 해시는 다양한 용도로 사용될 수 있으므로 누군가 해시를 사용하는 이유는 다루지 않겠습니다. pushState가 등장하기 전에는 AJAXy 또는 단일 페이지 사이트에 대한 새 콘텐츠로 해시를 업데이트하는 것이 일반적이었습니다.

새 규칙을 구성하려면 pushState와 동일한 이벤트 유형을 선택합니다. 유일한 차이점은 이제 해시를 기준으로 볼 수 있다는 것입니다. 예를 들어:

결론

Adobe DTM은 최고의 태그 관리 시스템이며 Adobe 고객에게는 운 좋게도 무료입니다! 이 유용한 팁을 사용하여 그 힘과 잠재력을 활용하고 더 많은 내용을 자주 확인하십시오! 웹사이트 분석에 대한 도움이 필요한 경우 저희에게 연락해 주시면 도움을 드릴 수 있는 방법에 대한 무료 제안서를 보내드리겠습니다!