저는 Google Tag Manager로 GA4의 이벤트를 설치할 때, 웹 요소의 class명을 기준으로 이벤트를 추적합니다. 그 이유는 간단한데, text를 기준으로 추적할 경우, 웹 페이지가 업데이트되면서 GA4 이벤트가 누락되는 경우가 발생하기 때문입니다. 실제로 이러한 일은 굉장히 잦게 일어났죠.
결국 가장 쉬운 방법은 text를 조건으로 이벤트 태그를 만드는 것이지만, 조금 더 안정적인 방법은 별도의 class명을 추가하는 것입니다. 웹페이지 업데이트로 내용이 변경되어도, 해당 영역의 class명은 유지되는 경우가 많기 때문이죠.
GTM, click classes의 문제점
이러한 방법을 사용할 때, 단순히 click class를 트리거의 조건 항목으로 사용할 수 있습니다. 클릭한 요소의 지정한 class명이 있다면 트리거의 조건이 참 True가 되고, 이벤트가 작동하게 되죠. 하지만 하나의 문제가 발생할 수 있습니다.
클릭한 요소가 여러 개의 tag로 감싸져 있을 때, class명이 없는 요소가 클릭되는 경우가 있습니다. 이럴 경우, 이벤트가 작동하지 않을 수 있죠. 가장 좋은 것은 <a> 태그 안에 특정 class명을 넣고, 요소 내에서 해당 값만 클릭될 수 있도록 z-index를 조정하는 것입니다.
하지만 마케터라면 웹 페이지를 직접 구성하기 어렵기 때문에 개발자에게 요청하거나, 다른 방법을 찾아야 하죠.
class 클릭 추적의 방안 : click element
트리거 조건에서 click classes로 발생하는 문제를 해결하는 방안은 click element로 조건을 변경하는 것입니다. click element는 클릭한 요소의 최상위 html 태그까지 추적해 tag명과 class 및 id 값을 가져오게 됩니다. 즉, 가져온 값 중에 지정한 class명이 있다면 이벤트가 정상적으로 작동하게 되죠.
하지만 해당 방법은 class명이 호출된 값에 존재하지만 트리거 작동이 안 되는 경우도 있습니다. 이런 경우 click element로 해결할 수 있는 방안이 없습니다. 디버그 뷰에서 API Call 부분을 체크해서 동일하게 값을 맞춰도 안되기 때문이죠.
class 클릭 추적 방안 : 맞춤 자바 스크립트 변수
click element가 되지 않는 경우가 많이 있어서, 저는 맞춤 자바스크립트 변수로 해당 문제를 해결합니다. 보통 click classes의 문제는 사용자가 클릭한 요소 밖에 class명이 지정된 경우가 있기 때문이죠. 즉, 상위 요소의 class명을 체크할 수 있다면 간단히 해결할 수 있습니다.
function() {
var element = {{ClickElement}};
var gaClasses = [];
if (element.className) {
var classes = element.className.split(" ");
classes.forEach(function(cls) {
if (cls.includes("ga-")) {
gaClasses.push(cls);
}
});
}
var parentElement = element.parentElement;
while (parentElement) {
if (parentElement.className) {
var parentClasses = parentElement.className.split(" ");
parentClasses.forEach(function(cls) {
if (cls.includes("ga-")) {
gaClasses.push(cls);
}
});
}
parentElement = parentElement.parentElement;
}
return gaClasses.join(", ");
}
위 코드는 click element 값을 받아서,
현재 클릭 요소의 지정한 class명이 있다면 gaClasses 배열에 class명을 추가합니다. *첫 번째 if문
그리고 상위 요소를 추적해 지정한 class명이 있다면 다시 gaClasses 배열에 class명을 추가하죠. *두 번째 if문
마지막으로 gaClasses를 결괏값으로 return 합니다.
여기서 지정한 class명을 포함한다면 트리거 조건을 만족할 수 있죠.
저는 대체로 GA4 이벤트를 위한 class명 지정에는 ga- 를 추가해서 class명 지정을 요청합니다. 만약 페이지 최상단 영역의 버튼이라면 요청하는 class는 ga-hero-button 식입니다. 규칙은 ga-{위치}-{요소}로 구성합니다. 그렇기 때문에 위 코드에서 class 추적에는 cls.includes("ga-")로 ga-라는 값을 포함한 class명만을 배열에 추가하게 되죠.
만약 해당 코드를 그대로 사용한다면, GA4 이벤트를 위한 class명에는 ga-를 붙여야 합니다. 다른 방식을 사용한다면 공통된 class명 요소를 활용해서 cls.includes("ga-") 부분의 "ga-"를 class명 요소로 변경해서 사용하면 됩니다.
class를 기준으로 이벤트를 추적할 때, 앞선 문제는 실제로 굉장히 많이 본 이슈입니다. 이 경우 마케터들은 개발자에게 다시 한번 class명 위치 조정이나 관련한 tag들에 class명 추가를 요청하게 되죠. 개발자는 번거로운 작업을 진행하게 되고, 마케터는 미안한 마음을 갖게 됩니다. 그러니 가끔씩은 맞춤 자바스크립트 변수로 해결해 보는 것도 추천드립니다.