이벤트 설정 - 상담신청편 (2) - 디에이허브 구글애널리틱스 GTM

이벤트 설정 - 상담신청편 (2)


2017-07-25

이번 강의에서는 홈페이지내 소스를 직접 수정하면서 구글 태그 관리자를 이용하여 이벤트 설정을 해보겠습니다.   

 

아래의 이미지는 홈페이지에서 일반적으로 쓰이는 상담신청 화면입니다.  

 

이 화면의 소스 코드를 가지고 설명을 드리도록 하겠습니다.

 

 

   

구글태그관리자 이벤트

  

 

 

아래의 코드는 위 그림의 소스코드 입니다.  

 

[빠른 상담 신청] 버튼을 클릭하는 순간 "sp_ins()" 라는 함수가 호출되어 지는 자바스크립트 소스입니다.

 

 

  

 

<a href="javascript:sp_ins();"><img src="/images/input_btn.jpg" alt="빠른상담신청"></a>

 

   

 

 

아래의 자바스크립트 코드는 "sp_ins()" 라는 함수입니다. 

 

함수 안에는 성명, 핸드폰번호, 상담시간이 정확하게 입력되었는지 유효성 체크를 하는 스크립트가 있습니다.

 

 

  

 

<script>

function sp_ins() {

if(frm.sname.value == "") {

alert("성명을 입력하셔야 합니다.");

return frm.sname.focus();

}

  

if(frm.hphone2.value == "") {

alert("핸드폰번호 앞자리를 입력하셔야 합니다.");

return frm.hphone2.focus();

}

   

if(frm.hphone3.value == "") {

alert("핸드폰번호 뒷자리를 입력하셔야 합니다.");

return frm.hphone3.focus();

}

 

if(frm.time1.value == "08") {

if(frm.time2.value =="00" || frm.time2.value =="10" || frm.time2.value =="20") {

alert("희망상담시간은 08시30분 부터 19시까지 입니다.");

return frm.time2.focus();

}

}

frm.action = "/simple_advice_register";

frm.target = "csCti";

 

frm.submit();

}

</script>

 

   

 

 

위의 자바스크립트 코드를 잠깐 설명으로 드리면...  

 

[빠른 상담 신청] 버튼을 클릭하면 "sp_ins()" 라는 함수가 호출되면서 "sp_ins()" 함수 안에 있는 스크립트가 실행됩니다.  

 

이름, 핸드폰번호, 희망시간이 정확하게 입력되지 않으면 각각, 화면에 경고 메시지가 나오고 해당 입력값들이 유효한 경우 입력된 정보를 저장하는 곳으로 이동하게 됩니다.  

 

따라서, 올바르게 데이터가 입력되고 마지막으로 "frm.submit()" (데이터를 저장하는 곳으로 보내는 명령)을 하기전에 GA 이벤트 정보를 서버로 전송하면 단순한 버튼 클릭이 아닌 유효한 데이터를 포함하는 양식제출 버튼 클릭을 측정할 수 있습니다.   

 

추가된 GA 이벤트 설정 스크립트는 다음과 같습니다.  

 

 

  

<script>

function sp_ins() {

if(frm.sname.value == "") {

alert("성명을 입력하셔야 합니다."); return frm.sname.focus(); }

   

if(frm.hphone2.value == "") {

alert("핸드폰번호 앞자리를 입력하셔야 합니다.");

return frm.hphone2.focus();

}

    

if(frm.hphone3.value == "") {

alert("핸드폰번호 뒷자리를 입력하셔야 합니다.");

return frm.hphone3.focus();

}

 

if(frm.time1.value == "08") {

if(frm.time2.value =="00" || frm.time2.value =="10" || frm.time2.value =="20") {

alert("희망상담시간은 08시30분 부터 19시까지 입니다.");

return frm.time2.focus();

}

}

frm.action = "/simple_advice_register";

frm.target = "csCti";

 

      // google tag manager 시작

var ga_name = frm.sname.value;

var ga_hp = frm.hphone1.value+frm.hphone2.value+frm.hphone3.value;

var ga_time = frm.time1.value+frm.time2.value;


dataLayer.push({"event":"ga_event","eCategory":"상담신청","eAction":ga_name,"eLabel":ga_time});

  // google tag manager 완료

             

             frm.submit();

       </script>

   

 

 

추가된 스크립트 코드를 살펴보면 ga_name, ga_hp, ga_time 이라는 변수에 각각에 해당하는 값을 저장하였습니다.  

 

그리고, 그 저장된 변수를 사용하여 데이터영역(datalayer)으로 이벤트 정보를 보냈습니다.  

 

정리를 하면,  

 

이벤트 이름 : "ga_event"


이벤트 카테고리 값 : "상담신청"


이벤트 액션 값 : "성명"


이벤트 라벨 값 : "상담시간"  

 

이렇게 셋팅이 되었습니다.   

 

 

사실, 양식에 입력된 각 항목의 정보를 가져오는 건 자바스크립트나 제이쿼리에 대한 개발지식이 필요한 부분입니다. 

개발지식이 없거나 부족하다면 주변의 개발자 도움을 받아야 해결해야 합니다.


위에서 처럼 데이터를 가지고 오는 방법은 딱 한가지만 있는것이 아닙니다.  

 

여러분들이 알고 계시는 방법이 있으시면 그 방법을 하셔도 무방합니다.    

 

그럼, 다음 강좌에서는 위의 소스코드에서 가지고 오는 정보를 이용하여 어떻게 셋팅되는지 알아보도록 하겠습니다.  

1

추천하기

0

반대하기
  • 페이스북 공유
  • 트위터 공유
  • 밴드 공유
  • Google+ 공유
  • 인쇄하기

대표전화 : 02-715-0715 | 이메일 : da-hub@da-hub.net   |  주식회사 디에이허브 | 대표 : 한지현 | 주소 : 서울특별시 용산구 원효로 153 원효빌딩 8층 802호
사업자번호 : 825-81-00505 | 법인번호 : 110111-6124153  |  Copyrights (c) 2016 DA-HUB co.ltd. All Rights Reserved.