CASE STUDY

GA4 & 채널톡 연동하기

2024-05-13
유준혁

안녕하세요! 그로스마케팅 파트너 허들러스의 유준혁 그로스 엔지니어입니다.

사용자의 클릭 추적은 마케팅 및 분석 목적으로 매우 중요합니다. 웹 페이지에서 사용자가 어떤 요소를 클릭했는지, 언제 클릭했는지, 클릭한 위치는 어디인지 등의 정보를 수집할 수 있습니다. 이를 통해 사용자의 행동 패턴을 분석하고, 어떤 요소가 더 많은 클릭을 유도하는지, 어떤 요소가 사용자에게 더 많은 관심을 끄는지 등을 파악할 수 있습니다.

이를 통해 마케팅 전략을 수정하고 최적화할 수 있습니다. 따라서 클릭 추적은 웹 페이지나 앱을 운영하는 데 있어서 필수적인 요소 중 하나입니다. 버튼을 클릭했을 때 이벤트를 전송하는 것은 간단하지만, 가끔 실무를 하다 보면 아래와 같은 문제가 생깁니다.

채널톡에 사람들이 얼마나 클릭하는지 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이라고 부릅니다.

예를 들어, 웹페이지에서 다른 라이브러리나 스크립트에서 사용되는 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과 해당 이벤트 리스너에 액세스 할 수 없기 때문입니다. 그렇기 때문에 구글 태그매니저가 해당 영역을 인식하지 못하는 것이지요.