구글 태그 매니저 : 클래스 클릭 이벤트 발생

구글 태그 매니저를 통해 클릭으로 이벤트를 발생시킬 수 있는 방법은 많습니다. 예를 들어 텍스트 클릭이 있죠. 하지만 텍스트 클릭 태그의 경우 텍스트가 달라지면 동작하지 않는다는 단점이 있습니다. 그렇다면 어떻게 클릭 이벤트를 발생시키면 될까요? 바로 ‘클래스’를 이용하는 방법입니다.

class가 뭔지 궁금하실 겁니다. 클래스는 HTML에서 사용되는 개념으로 id와 그 궤가 비슷합니다. 바로 속성을 뜻하는 거죠. 각각의 속성에 이름을 붙인다고 보시면 됩니다. 클래스는 모든 엘리먼트 태그에 여러개, 다중으로 사용이 가능합니다. 또한 이름을 마음대로 정할 수 있지만 숫자로는 시작되서는 안됩니다.

예를 들어 웹페이지의 이미지를 구별하기 위해 img-red라고 이름을 붙일 수도 있겠죠.

클래스 클릭 이벤트는 이러한 이름을 부여한 클래스 자체를 이용해 동작을 발생시키는 겁니다. 

그렇다면 이 클래스를 이용해 어떻게 이벤트를 발생시키는지에 대해 알아보도록 하겠습니다.

클릭 이벤트이니 역시 클릭 유형으로 트리거를 만들어야겠죠? 모든 요소를 눌러봅시다.

만들 트리거의 조건으로 click classes를 선택해줍니다. 이제 여기서 중요한 확인이 남았죠. 바로 클릭의 조건으로 만들 클래스의 이름을 확인하는 겁니다. 

클릭 이벤트를 발생시킬 사이트에 들어가 오른쪽 마우스를 클릭해 검사를 해봅니다.

그럼 위와 같이 클래스가 뜨는 걸 확인할 수 있죠. 이번에는 이미지를 클릭할 경우 태그가 동작되는 것을 만들거기 떄문에 이미지의 클래스를 확인하셔서 이름을 따오시면 됩니다.

혹시라도 검사를 했는데도 클래스가 보이지 않는 경우에는 따로 개발자에게 연락해 협업하시면 됩니다. 이에 대한 도움이 필요하시면 하이프마크로 문의주세요.

확인한 상품 이미지 클래스를 따와 이런 방식으로 트리거를 완성시켰습니다.

마찬가지로 태그를 설정해주세요. 카테고리, 작업, 라벨 값을 넣어주시오 애널리틱스 설정에 구글 애널리틱스 추적아이디를 넣어주시거나 이미 만들어주신 애너리틱스 설정을 넣으시면 됩니다.

이제 미리보기로 잘 적용됐는지 확인해볼까요?

이미지를 눌렀더니 이벤트가 발생한 걸 확인할 수 있었습니다. 잘 적용되고 있으니 이제 제출을 눌러주시면 모든 과정이 마무리 됩니다.

이처럼 텍스트 클릭과는 다르게 클래스로 만드는 클릭 이벤트는 글씨가 달라지는 것과 상관 없이 고유의 클래스만 있으면 이벤트가 발생한다는 장점이 있습니다.

구글 태그 매니저 설치나 고도화가 필요하시다면  하이프마크에 문의해주세요.

감사합니다.