이 가이드는 Google Tag Manager(GTM)를 사용하여 Discourse 사이트에서 “회원가입”, “로그인”, "답글"과 같은 특정 버튼 클릭을 추적하는 방법을 설명합니다.
필요한 사용자 권한: Google Tag Manager 접근 권한이 있는 관리자
Google Tag Manager를 사용한 버튼 클릭 추적
사용자가 특정 버튼과 어떻게 상호작용하는지 추적하는 것은 사용자 행동과 전환 경로를 이해하는 데 귀중한 데이터를 제공합니다. Discourse는 기본적으로 많은 이벤트를 추적하지만, “회원가입” 버튼과 같은 특정 UI 요소를 모니터링하고 싶을 수 있습니다. Google Tag Manager(GTM)의 미리보기 모드를 사용하는 것이 올바른 요소를 식별하고 정확한 트리거를 설정하는 가장 효율적인 방법입니다.
요약
특정 버튼을 추적하려면 먼저 버튼이 클릭될 때 GTM이 해당 버튼을 어떻게 "확인"하는지 식별해야 합니다. 이 과정에는 클릭 변수 활성화, 일반 디버그 트리거 생성, Tag Assistant를 사용하여 요소의 고유한 속성을 식별하고, 해당 버튼에 대한 특정 태그를 만드는 단계를 포함합니다.
클릭 변수 활성화
클릭을 추적하기 전에 GTM이 브라우저에서 필요한 데이터를 수집하도록 해야 합니다.
- GTM 워크스페이스에서 **변수(Variables)**로 이동합니다.
- **구성(Configura)**을 선택합니다.
- 클릭(Clicks) 섹션에서 사용 가능한 모든 상자를 선택합니다:
Click Element,Click Classes,Click ID,Click Target,Click URL,Click Text.
일반 클릭 트리거 생성
테스트하는 동안 디버그 콘솔에서 모든 클릭 이벤트를 확인하기 위해 “전체 포착(catch-all)” 트리거가 필요합니다.
- **트리거(Triggers)**로 이동하고 **새로 만들기(New)**를 선택합니다.
- **트리거 구성(Trigger Configuration)**을 클릭하고 **클릭 - 모든 요소(Click - All Elements)**를 선택합니다.
- **모든 클릭(All Clicks)**을 선택합니다.
- 트리거 이름을 "All Clicks - Debug"로 설정하고 **저장(Save)**합니다.
Tag Assistant 확장 프로그램 사용
Tag Assistant Companion 확장 프로그램은 사이트를 상호작용할 때 GTM이 정확히 어떤 요소를 수신하는지 추적하는 데 도움이 됩니다.
- 브라우저에 확장 프로그램을 설치합니다.
- GTM 워크스페이스에서 오른쪽 상단의 **미리보기(Preview)**를 선택합니다.
- 사이트 URL(
discourse.example.com)을 입력하고 **연결(Connect)**을 클릭합니다.
특정 버튼 요소 식별
미리보기 창이 열리면 대상 버튼의 고유 식별자를 찾을 수 있습니다.
- 추적하려는 버튼(예: 회원가입 버튼)을 사이트에서 클릭합니다.
- Tag Assistant 탭으로 다시 전환합니다.
- 왼쪽 요약 패널에서 최신 클릭(Cli c k) 이벤트를 찾습니다.
- 클릭된 요소의 속성을 보려면 Data Layer 탭을 선택합니다.
회원가입 버튼을 특별히 대상으로 하려면 고유한 클래스인 sign-up-button을 사용할 수 있습니다.
영구 트리거를 만들 때 사용자가 버튼 내부의 텍스트를 클릭하더라도 클릭이 캡처되도록 CSS 셀렉터를 사용하십시오. 회원가입 버튼의 경우 다음을 사용하십시오:
button.sign-up-button, button.sign-up-button *
셀렉터 끝의
*(와일드카드)는 사용자가 버튼 내부의 텍스트 스팬을 클릭하더라도 트리거가 여전히 발동되도록 보장합니다.
모범 사례
- 설명적인 이름 사용: 트리거와 태그에 "GA4 - Event - Sign Up Button Click"과 같이 명확한 이름을 붙입니다.
- 익명으로 테스트: "회원가입"과 같은 버튼의 클릭을 테스트할 때, 버튼이 표시되도록 확인하기 위해 시크릿 창을 사용하거나 Discourse 사이트에서 로그아웃하는 것이 가장 좋습니다.
- 게시 전 검증: Tag Assistant의 요약(Summary) 패널을 항상 확인하여 의도된 버튼이 클릭될 때만 특정 태그가 발동되는지 확인합니다.