안녕하세요! 그로스마케팅 파트너 허들러스의 유준혁 그로스 엔지니어입니다.
클릭 추적은 마케팅 및 분석 목적으로 매우 중요합니다. 웹 페이지에서 사용자가 어떤 요소를 클릭했는지, 언제 클릭했는지, 클릭한 위치는 어디인지 등의 정보를 수집할 수 있습니다. 이를 통해 사용자의 행동 패턴을 분석하고, 어떤 요소가 더 많은 클릭을 유도하는지, 어떤 요소가 사용자에게 더 많은 관심을 끄는지 등을 파악할 수 있습니다.
고객 로그 데이터의 중요성
이를 통해 마케팅 전략을 수정하고 최적화할 수 있습니다. 따라서 클릭 추적은 웹 페이지나 앱을 운영하는 데 있어서 필수적인 요소 중 하나입니다. 버튼을 클릭했을 때 이벤트를 전송하는 것은 간단하지만, 가끔 실무를 하다 보면 아래와 같은 문제가 생깁니다.
채널톡에 사람들이 얼마나 클릭하는지 GA4로 보고 싶은데 구현이 안됩니다.
태그매니저로 쉽게 구현이 어려운 채널톡 클릭 잡기
채널톡 아이콘은 분명 우리 웹사이트 안에 들어가 있어서, 구글 태그매니저로 단순하게 버튼 클릭을 잡으면 될 줄 알았는데, 실제로 잘 되지 않는 것이지요. 구글 태그매니저로 쉽게 구현하기가 어려운 이유는 Shadow DOM이라는 녀석이 존재하기 때문입니다.
일단 DOM이 뭔데?
Shadow DOM을 알기 전에 우선, DOM이 무엇인지 알아야겠지요. DOM이란 Document Object Model의 준말로서, 우리말로 직역하면 ‘문서 객체 모델(The Document Object Model, 이하 DOM)’이라고 표현합니다.
DOM은 HTML, XML 문서의 프로그래밍 인터페이스이며, DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. 해당 개념 설명이 어렵다면, 간단하게 웹 문서라고 생각해 주시면 좋습니다.
그렇다면, Shadow DOM 이란?
그렇다면, Shadow DOM이란 무엇일까요? Shadow DOM은 웹 페이지에서 요소를 캡슐화하고 격리시키는 기술입니다. 이를 통해 요소의 스타일이나 동작이 다른 요소에 영향을 주지 않고, 독립적으로 작동할 수 있습니다. 우리가 흔히 보는 채널톡의 경우, 채널톡 아이콘이 들어갔다고 해서, 우리 웹사이트의 구조가 바뀌면 안 됩니다. 그래서 우리 웹사이트에 전혀 영향을 주지 않고, 아이콘을 배치하게 하는 기술을 Shadow DOM이라고 부릅니다.
Shadow DOM의 기본 원리
예를 들어, 웹페이지에서 다른 라이브러리나 스크립트에서 사용되는 CSS와 요소 이름이 충돌하는 경우, Shadow DOM을 사용하여 이러한 충돌을 방지할 수 있습니다.
또한, 요소와 스타일을 캡슐화하여 여러 웹페이지에서 재사용할 수 있는 모듈화 된 코드를 만들 때 사용하기도 합니다. Shadow DOM은 숨겨진 DOM 트리가 기본 DOM 트리에 속하여 부착되게 합니다.
이 Shadow DOM 트리는 Shadow root로부터 시작되어 원하는 모든 요소 안에 부착될 수 있으며, 그 방법은 일반 DOM과 같습니다. (Shadow DOM에 대해 더 알고 싶으신 분들은 링크를 클릭해 주세요!)
Shadow DOM의 구조는 일반적으로 숨겨져 있지만 개발자 도구에서 볼 수 있습니다.
채널톡 플러그인의 경우, 웹사이트에 삽입하는 순간 해당 플러그인의 Shadow DOM 요소가 생성됩니다. 이렇게 함으로써 기존 웹사이트에 스타일이나 동작에 영향을 주지 않게 되며, 웹 페이지의 전체적인 안정성과 일관성을 유지할 수 있습니다.
그러나 이러한 이유로, Shadow DOM은 기존의 클릭 추적 방법으로는 사용자의 행동을 정확하게 추적하기는 어렵습니다. 구글 태그매니저로 간단하게 트리거를 잡으면 될 줄 알았지만, 이 Shadow DOM은 구글 태그매니저가 정확하게 인식하기 어렵기 때문이지요.
구글 태그 매니저에서 기존에 클릭을 잡는 방법
구글태그매니저(GTM)에는 [모든 요소]와 [링크만]이라는 두 가지 유형의 클릭 트리거가 있습니다.
태그매니저의 클릭 트리거
이름에서 알 수 있듯이 [모든 요소]의 경우 브라우저에서 사용자의 모든 클릭을 추적하고, [링크만] 트리거의 경우 링크 클릭만 추적합니다. 링크 클릭의 경우 HTML의 요소가 <a> 태그일 때만 사용가능합니다.
이후, 트리거의 조건을 설정하여 트리거를 생성한 후 태그를 생성하여 이벤트를 전송합니다.
태그매니저의 클릭 트리거를 세팅하는 방법
일반적인 요소 클릭의 경우 두 가지 유형의 클릭 트리거를 생성하여 사용하면 추적에는 문제가 없습니다.
그러나 구글태그매니저(GTM)에서는 Shadow DOM 클릭 추적을 따로 제공하고 있지 않습니다.
먼저 Shadow DOM에 대해서 간략히 설명드리고, 왜 구글태그매니저에서 추적이 불가능한지에 대해서 말씀드리겠습니다.
구글태그매니저에서 Shadow DOM을 추적을 못하는 이유
GTM 클릭 트리거는 Shadow DOM 내부가 아닌 기본 DOM에서 발생하는 이벤트만 추적하기 때문에 기본적으로 Shadow DOM 내부의 요소를 추적할 수 없습니다. 그 이유는 Shadow DOM이 콘텐츠와 스타일을 캡슐화하도록 설계되어 기본 DOM과 해당 이벤트 리스너에 액세스 할 수 없기 때문입니다. 그렇기 때문에 구글 태그매니저가 해당 영역을 인식하지 못하는 것이지요.
구글태그매니저를 Shadow DOM 클릭을 추적하는 방법
구글태그매니저에 있는 클릭 트리거는 Shadow DOM 클릭 추적이 작동하지 않기 때문에 다른 방식으로 추적해야 합니다.
1단계 : 추적 플러그인 다운로드하기
링크를 누른 다음 오른쪽 버튼을 클릭하여 “다른 이름으로 저장”을 선택하여 파일을 컴퓨터에 저장합니다.
2단계 : 파일 GTM 컨테이너로 가져오기
3단계 : 기존 버전과 병합하기
구글 태그매니저에서 Shadow DOM 클릭을 잡는 방법 – 1단계
구글 태그매니저에서 Shadow DOM 클릭을 잡는 방법 – 2단계
4단계 : 코드 커스텀하기
HURDLERS – [맞춤 HTML] Shadow DOM 클릭 추적 클릭 후 코드를 수정합니다.
구글 태그매니저에서 Shadow DOM 클릭을 잡는 방법 – 3단계
구글 태그매니저에서 Shadow DOM 클릭을 잡는 방법 – 4단계
DEBUG_MODE
디버그 모드가 true 일 경우 브라우저 콘솔창에 로그가 나올 수 있도록 세팅해 두었습니다.
기본값은 false입니다.
EVENT_NAME
맞춤 이벤트 이름입니다. 수정하고자 하는 이벤트 이름을 기입해 주시면 됩니다.
기본값은 ‘shadow_dom_click’입니다.
특정 Element 만 트래킹 할 경우
모든 shadow DOM 클릭을 추적하지 않고, 특정 element 만 트래킹 할 경우를 대비해서 변수를 하나 만들어 두었습니다. 해당 변수에 트래킹 하고자 하는 element의 css selector 값을 설정해 주시면 됩니다.
5단계 : 미리 보기 게시 후 브라우저 콘솔 탭에서 확인하기
DEBUG_MODE를 true로 설정 한 다음, shadow DOM 클릭 시 아래와 같이 로그가 잘 찍히는지 확인합니다.
요약
이번글에서는 구글태그매니저(GTM)를 활용하여 Shadow DOM 클릭을 추적하는 방법에 대해서 알아보았습니다. 허들러스 개발팀에서는 GTM을 활용하여 다양한 환경에서 다양한 이벤트를 구현하고 있습니다.
추후에 추가되는 내용이 있다면 다시 안내드리겠습니다. GA4 도입이나 마이그레이션에 대한 도움이 필요하신 분들은 데이터 전문 그로스마케팅 파트너, 허들러스에 편하게 연락 주세요.
긴 글 읽어주셔서 감사합니다.
그로스마케팅 파트너 허들러스의 더 많은 콘텐츠는
그로스마케팅 전문 컨설팅사, 허들러스 바로가기👉https://bit.ly/495zj4f
허들러스 GA4 도입 이벤트 바로가기👉https://bit.ly/3whEejW
GA4 유료 강의 바로가기👉https://bit.ly/493R3wN
허들러스에서 더 많은 콘텐츠 보러가기👉https://brunch.co.kr/@seongminyoo
작가의 링크드인 바로가기👉https://www.linkedin.com/in/yoo-seongmin/
