GTM 네이버 페이 클릭값 이벤트! 간단하게 설정하기

작성자 홍승택
작성일 2023.05.31
조회수 1068

안녕하세요

AMPM Global 광고퍼포먼스 2팀 홍승택입니다.


일반적으로 네이버 페이 뿐만 아니라 버튼클릭 이벤트는 완료페이지 등이 없지만

그래도 어떻게든 전환값을 꾸역꾸역 잡기 위해서 설정을 합니다.



네이버페이의 경우는

버튼을 클릭하는 순간 도메인이 네이버로 넘어가기 때문에 그 이후에 전환 추적 트래킹이 불가능하여

클릭 값으로 잡게 되는데요.


이 클릭 부분에 있어서 상당히 부정확한 값을 추적하게 되기 때문에

최대한 가능한 조건들을 추가하여 그나마 정확도를 조금 올려보면서 이벤트 값을 추적하게 됩니다.


해당 과정에서 2가지 변수를 추가할 수 있는데요.


1. Click classes & ID..

(이 부분은 element를 포함한 다른 변수로 설정하셔도 되는데 오늘은 classes값으로 잡아보겠습니다.)


2. '0' 이상의 가격에 대해서 버튼 클릭이 일어났을 때만 전환을 추적하는 맞춤 자바 스크립트 변수 추가


보통 상품을 구매할 때 요렇게 바로 구매하기가 있고 네이버 페이 또는 카카오페이로 구매하기 버튼이 있습니다.






요 네이버페이 버튼 클릭을 이벤트로 잡는 과정을 GTM 태깅을 통해서 진행해보겠습니다.


GTM 컨테이너 생성 및 GA4 계정은 모두 생성 완료, 공통스크립트 추가 완료되었다는 가정하에

진행해보도록 하겠습니다!




1. 변수 생성



변수는 간단히 정보를 담는 공간이라고 생각해주시면 됩니다.


앞서 말씀드린대로 트리거,태그를 위한 2가지 변수 + GA4 구성이벤트를 위한 상수 변수 요렇게 3가지를 생성해주시면 됩니다.



1) GA4 구성이벤트 변수





변수 값에는 GA4  데이터 스트림에서 확인되는 측정 ID를 입력해주시면 됩니다.




2) Click 기본 제공 변수






저는 뭘 쓸지 몰라 click 관련 기본 제공 변수는 다 추가합니다




3)  '0' 이상의 가격에 대해서 버튼 클릭이 일어났을 때만 전환을 추적하는 맞춤 자바 스크립트 변수




맞춤 자바스크립트를 추가해주시면 되는데


return document.querySelector("#totalPrice > span > strong").innerText.replace(/\D/g,'')

이 구문은 간단하게 해석하자면


ㄱ. 웹페이지에서 #totalPrice > span > strong에 값을 출력하는데

ㄴ. innerText : 여기서 텍스트만 추출할껀데

ㄷ. replace(/\D/g,'') : 가져온 텍스트에서 숫자를 제외한 모든 문자를 제거할꺼야!


라는 뜻인데 저희는 개발자가 아니니 ctrl+c,v 기능을 최대한 활용하도록 합시다



2. 트리거 생성


변수 생성이 완료되었으면 발동 조건을 정의하는 트리거를 생성해주시면 됩니다.




2가지 고유 값으로 특정 조건을 정의할 수가 있습니다.

네이버 페이 버튼값이 갖고 있는 고유의

click classes 값 (npay_btn_link) + 앞서 추가한 html 변수 1-3)에서 출력된 값이 0 초과일 때


요렇게 되면





필수 옵션을 선택하지 않아 총 상품금액이 0원이면 네이버페이 버튼을 클릭해도 fired 되지가 않습니다.



  


요렇게 상품 종류를 입력하고 총 상품금액이 0 초과이므로 트리거 조건을 충족하여

네이버 페이 버튼을 클릭하면 gtm에서 fired가 됩니다


그리고 Click classes값은 gtm 미리보기 화면에서 확인 할 수 있습니다!




3. 태그 생성


이제 태그를 추가해주시면 됩니다.


태그 유형 : Google 애널리틱스 : GA4 이벤트


구성태그 : 아까 1-1)에서 생성한 GA4 구성태그


이벤트 이름 : 식별 가능한 이름으로 설정해주시면 됩니다. 저는 Npay TEST로 하겠습니다


트리거 : '2'에서 생성해주신 트리거를 추가해주시면 됩니다. 저는 Npay view item으로 설정하였습니다.




태그까지 설정이 완료되었다면 미리보기 화면을 통해서 제대로 설정이 되었는지 확인해주시면 됩니다.




상품 상세 옵션을 클릭하고 가격이 떴을 때 네이버 페이 버튼을 누르니 제대로 fired 된 화면이 확인됩니다!


요렇게만 되면 GTM에서 제대로 설치가 되었습니다!

제출까지 꼭 해주셔야 제대로 반영이 됩니다!


GTM을 통해서 네이버 페이 클릭 버튼 확인하는 방법을 알아봤는데요. 

사실상 버튼 클릭 이벤트는 앞서 말씀드렸던 것 처럼 정확한 데이터는 아닌 점!

다시 한번 확인해주시면 될 것 같습니다


감사합니다 :D


댓글

1

kjh1020
2023.06.05 08:33
신가하군요!
김한아 마케터에게 컨설팅받기
02-6049-1150
카카오 오픈채팅인스타그램유튜브블로그
Copyright ⓒ 2019-2025 AMPM Global. All rights reserved.