CSS 선택자부터 GA4 연동까지, 단계별 이벤트 설정 방법
서론
온라인 쇼핑몰에서 네이버페이는 흔히 사용되는 결제 방식입니다. 하지만 네이버페이로 결제 시 다른 페이지로 넘어가기 때문에 실제 구매 여부를 파악하기 어렵습니다. 그럼에도 마케팅 성과 측정을 위해 네이버페이 버튼 클릭 이벤트 설정은 중요합니다. 이를 통해 더 효과적인 광고 전략을 수립할 수 있기 때문입니다.
이 글에서는 구글 태그 매니저를 이용한 네이버페이 클릭 이벤트 설정 방법을 cafe24 솔루션 기반 쇼핑몰을 예로 들어 설명하겠습니다.
준비 단계: CSS 선택자 찾기
1. PC 상세 페이지 선택자 찾기
– 상품 상세 페이지로 이동
– 개발자 도구를 열고 상품 금액 선택
– CSS 선택자를 복사하여 메모장에 “PC상세”로 저장
2. PC 장바구니 페이지 선택자 찾기
– 장바구니 페이지로 이동
– 개발자 도구에서 결제 예정 금액 선택
– CSS 선택자를 복사하여 메모장에 “PC장바구니”로 저장
3. 모바일 페이지 선택자 찾기
– 모바일 상세 페이지와 장바구니 페이지에서 같은 방식으로 선택자 복사
– 메모장에 각각 “모바일상세”와 “모바일장바구니”로 저장
구글 태그 매니저 설정
1. 변수 설정
a) PriceDetailPcMobileVariable
– 변수 구성: DOM 요소
– 선택 방법: CSS 선택도구
– 요소 선택 도구: PC상세와 모바일 상세의 공통 부분 입력
b) PriceBasketPcMobileVariable
– 설정 방법은 상세 페이지 변수와 동일
– 요소 선택 도구: `total_order_price_front` ID 값 입력
c) PriceAllVariable
– 변수 구성: 상수
– 값: PriceDetailPcMobileVariable과 PriceBasketPcMobileVariable 불러오기
d) PriceNumberVariable
– 변수 유형: 정규식
– 입력 변수: PriceAllVariable
– 정규식 패턴: \D
– 고급 설정: 대소문자 무시, 그룹 캡처 및 기능 바꾸기 사용
e) PriceNumber_Stringtonumber_Variable
– PriceNumberVariable을 정수로 변환하는 스크립트 사용
2. 트리거 설정
– 트리거 유형: 클릭-링크만
– 조건:
– Click ID에 ‘NPAY’ 포함
– PriceNumber_Stringtonumber_Variable 값이 0 초과
3. 태그 설정
– 태그 유형: GA4 이벤트
– 측정 ID: GA4 ID 변수 사용
– 이벤트 이름: purchase
– 매개변수:
– currency: KRW
– value: PriceNumber_Stringtonumber_Variable
– 트리거: 네이버페이Trigger
테스트 및 확인
1. Tag Assistant를 사용하여 미리보기 테스트
2. 애널리틱스 실시간 보고서에서 이벤트 확인
3. PC 장바구니, 모바일 상세 페이지, 모바일 장바구니에서도 테스트 진행
결론
구글 태그 매니저와 애널리틱스는 실제로 설정하고 결과를 확인하며 배우는 것이 가장 효과적입니다. 이 가이드가 여러분의 디지털 마케팅 여정에 도움이 되길 바랍니다.
