초보자용

웰컴체크인
GTM 세팅 방법

웹사이트 행동을 dataLayer에 적고, GTM이 GA4로 전달하게 만드는 작업입니다.

웹사이트

→

dataLayer

→

GTM

→

GA4

먼저 확인한 현재 프로젝트 구조

개발 GTM 컨테이너: GTM-5M52F2PV
설정 파일: WebContent/WEB-INF/jsp/resources/properties/dev/globals.properties
공통 GTM 로더: WebContent/WEB-INF/jsp/common/include/inc_script.jsp
window.dataLayer는 GTM 로더가 이미 생성합니다.
신규 이벤트는 gtag()보다 dataLayer.push()를 사용합니다.

현재 공통 코드의 function gtag(){}는 빈 함수입니다. 따라서 웰컴체크인 신규 계측은 직접 dataLayer.push()로 보내는 방식이 안전합니다.

전체 작업 순서

1웹사이트에 기록

사용자가 행동하면 화면 코드가 dataLayer에 이벤트를 넣습니다.

2GTM에서 받기

Custom Event 트리거가 이벤트를 감지합니다.

3GA4로 보내기

GA4 Event 태그가 감지한 이벤트를 GA4에 전달합니다.

4검증 후 게시

Preview와 GA4 DebugView에서 확인한 뒤 Submit/Publish합니다.

1. 웹사이트 코드 준비

프로젝트의 웰컴체크인 화면에서 행동이 발생하는 곳에 다음처럼 작성합니다.

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: 'welcome_checkin_floating_clicked',
  page_path: window.location.pathname,
  experiment_id: 'welcome_checkin_floating_v1',
  assignment_id: assignmentId,
  variant: variant,
  button_position: 'bottom_right',
  destination: 'purchase_mission'
});

처음에는 플로팅 버튼 클릭 1개만 연결해 테스트하고, 정상 동작하면 나머지를 추가합니다.

2. 필요한 이벤트

이벤트	언제 보내나
`welcome_checkin_view`	웰컴체크인 화면 진입
`welcome_checkin_recommendation_viewed`	추천 상품 영역이 실제로 보임
`welcome_checkin_product_selected`	추천 상품 선택
`welcome_checkin_mission_join_clicked`	미션 참여 버튼 클릭
`welcome_checkin_mission_join_succeeded`	서버가 미션 참여 성공 처리
`welcome_checkin_floating_exposed`	플로팅 버튼이 실제로 보임
`welcome_checkin_floating_clicked`	플로팅 버튼 클릭

3. GTM에서 변수 만들기

왼쪽 메뉴 변수 → 사용자 정의 변수 → 새로 만들기

유형은 데이터 영역 변수(Data Layer Variable)로 선택합니다.

GTM 변수 이름	데이터 영역 변수 이름
`DLV - page_path`	`page_path`
`DLV - experiment_id`	`experiment_id`
`DLV - assignment_id`	`assignment_id`
`DLV - variant`	`variant`
`DLV - button_position`	`button_position`
`DLV - destination`	`destination`

4. GTM에서 트리거 만들기

트리거 → 새로 만들기 → Custom Event(맞춤 이벤트)

이름: CE - welcome_checkin_floating_clicked
이벤트 이름: welcome_checkin_floating_clicked
저장

웹사이트의 event 값과 GTM 이벤트 이름은 철자까지 완전히 같아야 합니다.

5. GTM에서 GA4 태그 만들기

태그 → 새로 만들기 → Google 애널리틱스: GA4 이벤트

기존 구성 태그 선택: GA4 Configuration - G-42D980ZZ74
이벤트 이름: welcome_checkin_floating_clicked
이벤트 매개변수 추가
트리거: CE - welcome_checkin_floating_clicked
저장

매개변수	값
`page_path`	`{{DLV - page_path}}`
`experiment_id`	`{{DLV - experiment_id}}`
`assignment_id`	`{{DLV - assignment_id}}`
`variant`	`{{DLV - variant}}`
`button_position`	`{{DLV - button_position}}`
`destination`	`{{DLV - destination}}`

6. 테스트

GTM 상단 미리보기 클릭
개발 서버 주소 연결
웰컴체크인에서 플로팅 버튼 클릭
GTM 미리보기에서 해당 이벤트 선택
GA4 태그가 Fired인지 확인
Variables에서 파라미터 값 확인
GA4 DebugView에서 이벤트 도착 확인

이벤트 이름과 파라미터 값까지 모두 확인해야 합니다.

7. 정상일 때 게시

테스트가 끝난 뒤에만 다음 순서로 진행합니다.

Submit

→

버전 이름

→

Publish

Preview는 테스트일 뿐이고, 실제 반영은 Submit 후 Publish까지 해야 합니다.

특히 조심할 것

클릭과 성공은 다릅니다.
미션 참여 성공은 버튼 클릭 때 보내지 말고, 서버 성공 응답 이후에 welcome_checkin_mission_join_succeeded를 보내야 합니다. 최종 성공·e머니 지급 건수는 GA4가 아니라 서버 원장을 기준으로 확인합니다.

최종 체크리스트

□ 개발 서버가 GTM-5M52F2PV를 사용하는가

□ 화면 코드가 dataLayer.push()를 호출하는가

□ Custom Event 트리거가 실행되는가

□ GA4 Event 태그가 Fired인가

□ 파라미터가 undefined가 아닌가

□ GA4 DebugView에 도착하는가

□ 구매에 source=welcome_checkin이 있어 일반 구매와 구분되는가

□ 검증 후 Submit/Publish했는가

웰컴체크인GTM 세팅 방법