왜 화면에 보이는 것만으로는 부족할까요?
현업에서 데이터 분석 환경을 구축하다 보면, 단순히 “버튼 클릭”이나 “페이지 로드”만으로는 비즈니스의 핵심 성과를 측정하기 어려운 순간이 반드시 찾아옵니다.
예를 들어, 사용자가 ‘회원가입 완료’ 버튼을 눌렀을 때, 단순히 버튼 클릭 수만 세는 것은 위험합니다. 유효성 검사 실패로 가입이 안 되었을 수도 있고, 가입한 회원의 등급(일반/VIP) 정보를 함께 수집해야 할 수도 있기 때문입니다.
이때 실무자들이 가장 많이 범하는 실수는 HTML 요소의 클래스(Class)나 ID를 긁어오는 ‘DOM 스크래핑’ 방식에 의존하는 것입니다. 이는 웹사이트 디자인이 조금만 바뀌어도 추적이 끊기는 치명적인 단점이 있습니다.
오늘은 이러한 불안정성을 해결하고, 개발 코드와 GTM 간의 공식적인 대화 채널인 ‘데이터 레이어(Data Layer)’를 활용하여 동적 이벤트를 정확하게 추적하는 방법을 상세히 다루겠습니다.
Part 1. Data Layer Push의 핵심 개념과 중요성
데이터 분석 실무 관점에서 dataLayer는 웹사이트(소스코드)와 GTM(태그 관리자) 사이의 ‘공용 정보 게시판’으로 정의할 수 있습니다.
1. 정적 데이터 vs 동적 데이터 푸시
기본적인 GTM 스니펫 설치 시 생성되는 데이터 레이어는 페이지 로드 시점의 정보만 담고 있습니다. 하지만 dataLayer.push() 메서드를 사용하면, 사용자가 특정 행동을 하는 그 순간(Event)에 정보를 게시판에 새롭게 밀어 넣을 수 있습니다.
- 잘못된 접근 (DOM 스크래핑): “화면에 ‘구매 완료’라는 텍스트가 뜨면 이벤트를 보내줘.” (디자인 변경 시 누락 발생)
- 올바른 접근 (Data Layer Push): “결제가 성공적으로 완료되면, purchase_success라는 신호를 데이터 레이어에 쏘아줘.” (디자인과 무관하게 데이터 전송)
2. 핵심 키: ‘event’ 변수의 역할
dataLayer.push를 사용할 때 가장 중요한 것은 ‘event’라는 키(Key)를 포함하는 것입니다. GTM은 이 ‘event’ 키가 들어올 때만 “아, 뭔가 새로운 일이 발생했구나!”라고 인지하고 트리거(Trigger)를 작동시킵니다.
[실무 Note]
event 키 없이 데이터만 푸시하면(예: {userId: ‘12345’}), 변수 값은 업데이트되지만 태그를 실행시킬 ‘방아쇠’가 당겨지지 않아 GA4로 데이터가 전송되지 않는 경우가 많습니다.
Part 2. 실무 적용 가이드
이제 실제로 generate_lead (잠재고객 생성) 이벤트를 동적으로 추적하는 상황을 가정하여 설정해 보겠습니다.
Step 1: 개발자에게 코드 요청 (Data Layer Push)
가장 먼저 웹사이트 소스코드에 이벤트가 발생하는 시점에 아래와 같은 코드가 실행되도록 개발팀에 가이드를 전달해야 합니다.
[개발자 전달용 가이드 예시]
사용자가 상담 신청 폼 제출을 완료(Success)했을 때, 아래 자바스크립트 코드를 실행해 주세요.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘event’: ‘form_submit_success’, // GTM 트리거용 커스텀 이벤트 이름
‘form_type’: ‘consulting’, // 동적 매개변수 1
‘value’: 10000 // 동적 매개변수 2
});
Step 2: GTM에서 데이터 레이어 변수 생성
코드에 심어진 form_type과 value 값을 GTM이 읽어들일 수 있도록 변수를 만듭니다.
- GTM 접속 > 변수(Variables) > 새로 만들기
- 변수 유형: 데이터 레이어 변수 (Data Layer Variable)
- 데이터 레이어 변수 이름: form_type (코드의 키값과 정확히 일치해야 함)
- 저장: 이름 예시 DLV – form_type
- (동일한 방식으로 value 변수도 생성합니다)
Step 3: 트리거(Trigger) 설정
dataLayer.push에 포함된 event 키값을 감지하는 트리거를 만듭니다.
- 트리거(Triggers) > 새로 만들기
- 트리거 유형: 맞춤 이벤트 (Custom Event)
- 이벤트 이름: form_submit_success (코드의 event 값과 정확히 일치)
- 저장: 이름 예시 CE – form_submit_success
Step 4: GA4 태그 설정 및 매개변수 연결
마지막으로 트리거가 발동될 때 GA4로 데이터를 쏘아줍니다.
- 태그(Tags) > 새로 만들기
- 태그 유형: Google 애널리틱스: GA4 이벤트
- 측정 ID: 본인의 GA4 측정 ID 입력
- 이벤트 이름: generate_lead (GA4 추천 이벤트 명명 규칙 준수 권장)
- 이벤트 매개변수 (Event Parameters):
- 매개변수 이름: lead_type / 값: {{DLV – form_type}}
- 매개변수 이름: value / 값: {{DLV – value}}
- 트리거: 방금 만든 CE – form_submit_success 선택
- 저장 및 게시
FAQ – Data Layer 관련 자주 묻는 질문
Q1. 개발자 도움 없이 Data Layer를 쓸 수 없나요?
Google 공식 가이드라인 및 구조적으로 볼 때, dataLayer.push 코드는 웹사이트 소스 코드 내에서 실행되어야 하므로 개발자의 작업(또는 웹사이트 관리 도구에서의 스크립트 삽입)이 필수적입니다. 마케터가 GTM에서 임의로 푸시할 수도 있지만, 이는 정확한 서버 응답 시점(예: 결제 완료 직후)을 포착하기 어렵습니다.
Q2. 변수 이름에 대소문자를 구분해야 하나요?
네, 매우 중요합니다. 자바스크립트는 대소문자를 엄격하게 구분(Case Sensitive)합니다. 코드에 Form_Type으로 적고 GTM에서 form_type으로 받으면 데이터는 undefined로 처리됩니다.
Q3. gtag()와 dataLayer.push()는 무엇이 다른가요?
gtag()는 구글의 태그 라이브러리 함수로, 내부적으로 dataLayer를 사용합니다. GTM 환경에서는 dataLayer.push()를 사용하는 것이 표준이며, GTM 없이 하드코딩으로 GA4를 심을 때 주로 gtag()를 사용합니다. GTM을 쓰신다면 dataLayer.push()를 사용하세요.
Q4. 미리보기(Preview)에서는 보이는데 GA4 보고서에 안 떠요.
GTM 미리보기의 ‘Data Layer’ 탭에 데이터가 보인다면 코드는 정상입니다. 하지만 GA4 태그가 실제로 Fired 되었는지 확인해야 합니다. 태그가 실행되었다면, GA4 ‘관리 > 데이터 표시 > 맞춤 정의’에서 해당 매개변수를 맞춤 측정기준(Custom Dimension)으로 등록했는지 확인하세요. 등록 후 보고서 반영까지 24~48시간이 소요될 수 있습니다.
Q5. 페이지 이동 시 데이터 레이어 값은 유지되나요?
아니요, 기본적으로 페이지가 새로고침되거나 이동하면 기존 데이터 레이어 객체는 초기화됩니다. 페이지 이동 후에도 데이터를 유지하려면 쿠키나 로컬 스토리지 등을 활용하거나, 다음 페이지 로드 시 개발자가 다시 푸시해 주어야 합니다.
결론
Data Layer Push를 활용한 동적 이벤트 추적은 초기 구축 시 개발팀과의 커뮤니케이션 비용이 발생하지만, 장기적으로는 데이터의 무결성을 보장하는 가장 확실한 투자입니다.
단순히 “사용자가 클릭했다”는 사실을 넘어, “어떤 맥락(Context)에서, 어떤 가치(Value)를 가지고 행동했는가”를 분석하고 싶다면, 지금 바로 DOM 스크래핑 방식을 멈추고 데이터 레이어 구조를 설계하시기를 권장합니다.
정확한 데이터만이 정확한 비즈니스 의사결정을 가능하게 합니다.
