* 이 글은 믹스패널(mixpanel)과 gtm(Google Tag Manager)를 연동하는 방법과 과정을 설명하는 글입니다.
안녕하세요. 오늘은 Google Tag Manager(GTM)를 이용해 Mixpanel을 설치하고 활용하는 방법에 대해 알아보겠습니다. Mixpanel은 사용자 행동 분석에 필수적인 도구로, 웹사이트나 앱에서 일어나는 다양한 이벤트를 측정하고 분석할 수 있게 해줍니다. GTM과 함께 사용하면 개발자의 도움 없이도 웹사이트에 누구나 쉽게 설치하고 관리할 수 있습니다. 이 글을 통해 GTM을 이용한 Mixpanel SDK 설치부터 클릭 이벤트 추적까지 직접 경험해 보시기 바랍니다.
1. 개발자 없이 설치를 도와주는 GTM(구글태그매니저)
1) GTM 설치를 위한 요소들 살펴보기
GTM(Google Tag Manager)은 비개발자들도 간단한 스크립트 설치와 이벤트 삽입을 도와주며, 구글의 구글애널리틱스4(Google Analytics 4)처럼 무료로 사용이 가능합니다.
구글태그매니저는 변수, 트리거, 태그 크게 3개의 요소로 구성되어 있습니다.
변수는 데이터를 담는 일종의 그릇으로써, 웹페이지의 데이터들을 저장합니다. 이후에 변수에 저장한 정보들을 태그에 활용하거나 트리거의 발동 조건으로 쓸 수 있습니다.
트리거는 웹페이지에서 이벤트가 발생했을때 실행되는 일종의 시작점으로 여러가지 유형의 트리거가 있습니다. 태그 실행을 위한 조건으로 트리거로 설정한 조건이 충족되면 태그가 실행됩니다.
태그는 트리거가 실행되었을 때, 발생되는 액션(행동)입니다. 주로 특정 플랫폼으로 데이터를 보내주는 방식으로 구성됩니다. 예를 들어 페이스북과 구글애즈 혹은 믹스패널과 같은 데이터 분석툴로 이벤트의 특정 데이터를 보내주는 방식으로 구성할 수 있습니다. 태그를 쉽게 활용하기 위해 여러 플랫폼에 사용가능한 템플릿이 있습니다. 이 템플릿에는 구글애널리틱스를 비롯해 믹스패널 템플릿이 있어 보다 간편하게 구현 가능합니다.
디버깅(Debugging)은 개발자들이 코드를 완성하고 배포 전, 꼭 하는 작업으로 구글태그매니저로 태그 세팅을 마친 후, 태그가 제대로 작동하는지 미리 확인하는 작업입니다. 구글태그매니저에선 디버깅을 ‘미리보기’라는 버튼으로 실행할 수 있습니다.
디버깅 버튼을 누르고 웹사이트 URL을 입력합니다. 이때, 입력한 웹사이트와 디버깅을 확인할 수 있는 창이 뜨게 됩니다. 웹사이트의 창에서 입력한 태그를 직접 수행한 후, 구글태그매니저의 디버깅 창에서 태그가 정상적으로 터졌는지 확인합니다. 해당 태그가 Tags Fired에 있다면 제대로 작동한 상태라고 볼 수 있습니다.
2) 이벤트 태깅 프로세스
이벤트 태깅 프로세스는 설치할 태그와 해당 태그를 실행시킬 수 있는 트리거 체크부터 시작합니다. 트리거는 다양한 조건으로 만들 수 있지만, 웹사이트 내에서 의도하지 않은 다른 상황에서 발동될 수 있어 트리거의 조건을 여러 조건으로 발동시킬 의도가 없다면 최대한 하나만 발동되게끔 하는게 좋습니다.
- 태그를 발동시킬 수 있는 트리거 체크 (웹사이트) : 트리거엔 다양한 트리거가 있지만 기본적으로 페이지뷰 그리고 클릭이 있습니다. 여기서 페이지뷰는 모든 페이지로 할지 일부 페이지로 할지 정할 수 있으며 클릭 역시, 모든 클릭과 일부 클릭으로 정할 수 있습니다.
여기서 페이지뷰/클릭의 일부 트리거 조건도 무척 다양하지만 해당 영역의 Click Text, Click ID 혹은 CSS Selector(CSS 선택자)가 주로 쓰입니다. Click Text와 Class ID는 웹사이트 기획 시, 구분을 지어놓지 않았다면 중복으로 트리거될 확률이 높으므로 카페24와 같은 호스팅사 이용시엔 CSS Selector가 주로 쓰인다고 보면 됩니다.
- 사용할 변수 확인 및 세팅 (GTM) : 전송할 데이터를 담거나, 담긴 변수를 고르고 세팅합니다.
- 트리거 & 태그 세팅 (GTM) : 트리거를 세팅하고 태그에 어떤 데이터를 어디로 보낼지 코드를 삽입하거나 태그 템플릿을 사용하여 만들 수 있습니다. 예를 들어, 메타의 구매 전환 이벤트를 심는 다면 메타의 기본 픽셀 스크립트가 심어져 있다는 전제 하에 메타에 구매 데이터를 보내줄 수 있는 코드를 태그에 세팅합니다.
- 디버깅 (GTM) : 디버깅으로 태그가 트리거, 즉 Fired 되었는지 확인합니다.
- 제출 (GTM) : 지금까지 이상이 없다면 제출하여 배포합니다.
- 온사이트 체크 (웹사이트) : 태그를 심은 웹사이트에서 태그를 발동시킨 후, 데이터를 보낸 매체의 크롬 익스텐션 앱으로 확인하거나 개발자 도구에서 확인합니다.
- 실 데이터 체크 (데이터 분석 툴) : 실제 데이터가 잘 들어왔는지 매체 혹은 데이터 분석 툴에서 확인합니다.
2. 카페24 GTM 설치
1) 카페24 가입
가장 많이 쓰이며 HTML 수정 등, 자유도가 높은 카페24로 진행했습니다. 이외에도 HTML 수정이나 삽입이 가능한 타 솔루션을 써도 무방합니다. 먼저 카페24에 가입하여 GTM 설치를 실습할 더미 웹사이트를 만듭니다.
카페24 HTML 사용법
카페24 내에서 HTML은 검색 엔진 최적화(SEO) 설정과 스마트디자인 편집창에서 편집할 수 있습니다. 스마트 디자인에서 코드를 편집하는 건 1번보다 어렵고 다른 디자인 영역들을 건드릴 수 있어 1번 고급 설정에서 수정하는 걸 추천드립니다.
방법 1. 쇼핑몰 설정 → 기본 설정 → 검색 엔진 최적화 (SEO) → 고급 설정 → 코드 직접 입력 (추천)
방법 2. 디자인(PC/모바일) → 디자인 대시보드 → 디자인 관리 → 디자인 편집 → 좌측 하단 HTML 수정 → 스마트 디자인
2) GTM 태그 설치
구글태그매니저(Google Tag Manager)는 구글에 구글태그매니저 혹은 GTM 검색 만으로도 쉽게 찾을 수 있습니다. GTM에서 제공해주는 기본 설치 태그(코드)를 대상 웹사이트의 모든 웹페이지에 설치해야합니다.
- GTM(Google Tag Manager)에 가입 합니다.
- 구글 태그 관리자 설치에서 <head>와 <body> 스크립트 코드를 복사합니다.
3. 복사한 코드를 카페24 HTML의 <head>영역과 <body>영역에 삽입합니다.
3. 개발자 도구 사용법 & 트리거 체크 방법
적합한 트리거 조건을 설정하기 위해 웹사이트에서 트리거 발동 조건을 찾아내야 합니다. 위에서 다양한 트리거 조건 중에, ‘모든’이 아닌 ‘일부’의 경우에는 해당 트리거를 특정할 수 있는 조건이 필요합니다. 동시에 여러 태그를 발동시키는 트리거를 의도했다면 문제 없지만, 보통은 태그를 발동시키는 트리거를 하나의 조건에서만 발동시킵니다. 이를 위해 해당 트리거 영역을 특정해야하고, 이를 구성하는 자바스크립트 코드를 찾아야 합니다. 코드는 크롬 브라우저에서 개발자 도구로 손쉽게 확인 가능합니다.
1) 개발자 도구
개발자 도구는 웹사이트를 구성하는 코드를 보여주는 도구로써 크롬 브라우저에서 두 가지 방법으로 사용할 수 있습니다.
- 마우스 우측 클릭 → 검사
2. 크롬 브라우저 창의 우측 상단 점 3버튼 → 도구더보기 → 개발자 도구
2) 트리거 확인 방법
트리거를 하나의 조건에만 발동시키려면 Click Text, Click URL과 같이 쉽게 찾을 수 있는 요소들로도 할 수 있지만 이런 경우에는 여러 조건으로 발동될 확률이 높습니다. 그래서 중복될 확률이 낮은 class ID 혹은 CSS selector(선택자)를 조건으로 선택합니다. class ID와 CSS 선택자는 자바스크립트에서 각각 요소를 특정해주는 코드라고 이해하면 쉽습니다.
- 참고 자료 : CSS selector 설명문서
트리거를 발동시키려는 영역의 class ID와 CSS 선택자를 보려면 개발자 도구의 ‘검사’라는 기능을 써야합니다. 검사 기능은 개발자 도구 창의 좌측 상단의 화살표 아이콘을 누르면 사용할 수 있습니다.
여기서 ‘무료 데모 받기’ 라는 버튼의 트리거를 찾아보겠습니다. 검사 버튼을 눌러 기능을 활성화한 후, 마우스커서를 해당 버튼 위에 올리면 해당 영역을 이루는 정보를 좌측에서 보여주고, 우측 개발자 도구에서는 해당 영역의 코드 위치를 자동으로 찾아 보여줍니다.
class ID는 우측의 코드에서 class= 뒤에 붙은 "button w-inline-block” 가 됩니다. 그리고 CSS 선택자는 해당 블록에 마우스 커서를 올려 우측 버튼을 누른 후, Copy → Copy selector를 선택 하면 CSS 선택자가 복사되어 ctrl+v로 선택자를 사용할 수 있습니다. 여기서 선택자는 #demo_request_button_hero 가 됩니다.
트리거 체크 위한 간단한 콘솔 함수 설명
이제 class ID와 CSS 선택자를 찾았다면, 해당 값들이 웹사이트에서 중복되는지 확인해야 합니다. 이 확인을 위해선 개발자 도구의 콘솔을 사용할 필요가 있습니다. 개발자 도구의 콘솔은 개발자 도구 상단 탭에서 ‘Console’에서 사용할 수 있습니다.
class ID가 몇개 있는지, CSS 선택자가 몇개 있는지 확인하는 콘솔 함수 코드를 알려드리겠습니다. 아래 코드를 콘솔 창에 입력하면 대상 웹사이트에서 해당 중복값이 몇 개 있는지 확인할 수 있습니다.
4. 믹스패널 SDK 설치
믹스패널 설치에 앞서, SDK를 먼저 설명하겠습니다. SDK는 Software Development Kit의 약자로 미리 작성된 코드이며 기존의 소프트웨어를 사용하여 새로운 환경을 구축하는데 필요한 모든 도구가 들어있습니다.
쉽게 말하면, 비개발자도 쉽게 쓸 수 있도록 코드를 미리 만들어 놓은 템플릿과 같다고 이해하면 쉽습니다. 우리가 앞에서 설치한 GTM의 코드, 그리고 메타의 기본 픽셀 코드도 SDK에 속합니다.
- GTM에서 믹스패널 연동을 위해 프로젝트 토큰을 변수에 저장합니다. 믹스패널 프로젝트에서 프로젝트 토큰을 먼저 확인 한 후, 상수 유형의 변수를 만들어 저장합니다.
참고문서 : 믹스패널 토큰
2. GTM 믹스패널 태그 생성
- 트리거는 All pages 모든 페이지 뷰
믹스패널 SDK는 모든 페이지에서 발동해야 다른 믹스패널 태그들도 작동할 수 있기 때문에 트리거는 All pages로 설정합니다.
트리거 종류 참고 문서
- 태그 유형 : GTM 태그 구성 → 태그 유형 선택 → 커뮤니티 템플릿 갤러리 → mixpanel 검색 → 추가
믹스패널 태그 템플릿이 생겨서 코드 삽입 없이 편하게 템플릿을 통해 initialization(초기 세팅) 할 수 있습니다.
- 프로젝트 토큰에 추가버튼을 눌러 아까 저장해둔 변수를 선택한후 아래와 같이 세팅합니다. 태그명은 다르게 설정해도 무방합니다.
- GTM 디버깅(미리보기)를 통해 위에서 설치한 믹스패널 SDK 태그가 작동하는지 확인합니다.
- 믹스패널 프로젝트에서 페이지뷰 데이터가 들어오는지 체크합니다.
5. 버튼 클릭 이벤트
믹스패널 SDK를 설치했으니 이제 이벤트들도 설치하여 믹스패널에서 데이터를 분석할 수 있습니다. 이번에는 버튼 클릭 이벤트를 잡아보겠습니다.
회원가입은 웹사이트에서 중요한 퍼널 중에 하나이므로 회원가입 버튼 클릭 횟수 트래킹을 위해 회원가입 버튼 클릭 태그를 설치해보겠습니다.
- 회원 가입 버튼 클릭 트리거 체크
- 회원 가입 버튼이 여러 개일 경우, 동시에 잡을지, 특정 버튼만 잡을지 선택해야 합니다. 이번 경우엔 회원 가입 버튼이 하나 이므로 하나만 잡겠습니다.
- 회원 가입 버튼 클릭 | class ID : 개발자 도구에서 회원 가입 버튼 영역을 선택해 Class ID 값을 확인하여 복사합니다.
회원 가입 버튼 클릭 | CSS selector : 개발자 도구에서 회원 가입 버튼 영역을 마우스 오른쪽 버튼 클릭 후, CSS selector 값을 확인하여 복사합니다.
여기서 회원 가입 버튼 클릭의 CSS Selector 는 #header > div > div.toparea.display_pc_only > div.toparea_state > a:nth-child(1) 입니다.
- 회원가입 버튼 클릭 태깅
- 위에서 복사한 CSS selector를 클릭 트리거로 만든 후, 아래와 같이 태그를 만듭니다.
- GTM 디버깅(미리보기)를 통해 위에서 설치한 믹스패널 SDK 태그가 작동하는지 확인합니다.
- 믹스패널 프로젝트에서 버튼클릭 데이터가 들어오는지 체크합니다.
6. 끝마치며
지금까지 우리는 GTM을 사용하여 믹스패널 SDK를 설치하고, 클릭 이벤트를 직접 설치하는 방법에 대해 알아보았습니다. 이렇게 웹 기반의 프로덕트에서 개발자의 도움 없이도 믹스패널을 통한 프로덕트 분석이 가능해집니다. 데이터를 트래킹하고 분석하는 것은 프로덕트, 서비스의 성능을 평가하고 개선하기 위한 중요한 단계입니다.
다음 글에서는 좀 더 심화된 내용으로, 이벤트 프로퍼티를 추가하여 상세 페이지 조회, 장바구니 추가 및 결제 완료 등 e-commerce funnel에 필수적인 이벤트들을 어떻게 추적할 수 있는지 알아보겠습니다.
여기서 다룬 내용들과 함께 다음 글의 내용도 잘 활용한다면, 여러분들도 효과적인 사용자 경험 분석과 최적화 작업을 할 수 있습니다. 그 결과로 우리가 보지 못하고 있던 데이터들을 눈으로 확인하여 프로덕트 개선에 큰 도움이 될 수 있습니다.
.svg)
