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

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


2017-07-27
지난 강의에서 사이트 내에 스크립트를 삽입하는 방법에 대해 살펴보았습니다. 

 

이번 강의에서는 삽입한 스크립트를 참고하여 구글 태그 관리자에서 셋팅하는 방법을 알아 보겠습니다.

  

지난 강의에서 삽입한 스크립트 코드 입니다.

 

 

 

 

<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>

 

 

 

셋팅하는 순서는 아래와 같습니다.

 

 

1. 이벤트 태그 생성


2. 이벤트 변수 생성


3. 이벤트 트리거 생성

 

 

그럼, 하나씩 살펴보도록 하겠습니다.

 

 

1. 이벤트 태그 설정

 

 

 

구글태그관리자 이벤트

 

 

 

위 화면에 대해 설명 드리겠습니다.

 

 

① 태그 이름

 

태그 이름을 입력합니다.

 

 

② 태그 유형

 

태그 유형을 선택합니다.

 

 

③ 추적 유형

 

추적 유형을 선택합니다.

 

"이벤트"

 

 

④ 카테고리

 

[카테고리 변수]를 입력합니다.

 

변수 생성 방법은 다음 항목에서 설명드리겠습니다.

 

 

⑤ 작업

 

[작업 변수]를 입력합니다.

 

변수 생성 방법은 다음 항목에서 설명드리겠습니다.

 

 

⑥ 라벨

 

[라벨 변수]를 입력합니다.

 

변수 생성 방법은 다음 항목에서 설명드리겠습니다.

 

 

⑦ 추적 ID

 

추적 ID 값을 입력합니다.

 

위의 화면에서는 추적 ID 변수를 이용하여 입력하였습니다.

 

추적 ID 값을 직접 입력하셔도 상관없습니다.

 

 

 

 

2. 이벤트 변수 생성

 

태그를 생성하셨으면 태그에서 사용되는 이벤트 변수를 생성해 보겠습니다.

  

[변수] > [사용자 정의 변수] > [새로 만들기] 를 클릭합니다.

  

먼저, [카테고리 변수]를 생성합니다.

 

아래 그림과 같이 셋팅하시면 됩니다.

 

 

 

구글태그관리자 이벤트

 

 

 

위 화면에 대해 설명 드리겠습니다.

  

 

① 변수 이름

  

변수 이름은 [이벤트 태그 설정] 시 입력했던

 

"e_category" 

 

를 똑같이 입력합니다.

 

반드시 일치해야 합니다.

 

 

② 변수 유형

 

변수 유형은 [데이터 영역 변수]를 선택합니다.

 

 

③ 데이터 영역 변수 이름

 

데이터 영역 변수 이름은 사이트에 추가했던 스크립트에 사용한

 

"eCategory"

 

이름을 똑같이 입력합니다.

 

반드시 일치해야 합니다.

 

 

같은 방법으로 [작업 변수]와 [라벨 변수]를 생성합니다.

 

 

아래와 같이 [작업 변수]를 생성합니다.

 

 

 

구글태그관리자 이벤트

 

 

 

위 화면에 대해 설명 드리겠습니다.

 

 

① 변수 이름

 

변수 이름은 [이벤트 태그 설정] 시 입력했던

 

"e_action"

 

를 똑같이 입력합니다.

 

반드시 일치해야 합니다.

 

 

② 변수 유형

 

변수 유형은 [데이터 영역 변수]를 선택합니다.

 

 

③ 데이터 영역 변수 이름

 

데이터 영역 변수 이름은 사이트에 추가했던 스크립트에 사용한

 

"eAction"

 

이름을 똑같이 입력합니다.

 

 

반드시 일치해야 합니다.




마지막으로,


아래와 같이 [라벨 변수]를 생성합니다.



구글태그관리자 이벤트

 

 

 

위 화면에 대해 설명 드리겠습니다.

 

 

① 변수 이름

 

변수 이름은 [이벤트 태그 설정] 시 입력했던

 

"e_label"

 

를 똑같이 입력합니다.

 

반드시 일치해야 합니다.

 

 

② 변수 유형

 

변수 유형은 [데이터 영역 변수]를 선택합니다.

 

 

③ 데이터 영역 변수 이름

 

데이터 영역 변수 이름은 사이트에 추가했던 스크립트에 사용한

 

"eLabel"

 

이름을 똑같이 입력합니다.

 

반드시 일치해야 합니다.

 

 


3. 이벤트 트리거 생성


마지막으로 [이벤트 트리거]를 생성하겠습니다.


아래의 화면과 같이 트리거를 구성합니다.



 

구글태그관리자 이벤트

 

 

 

위의 화면에 대해 설명드리겠습니다.


 

① 트리거 이름


트리거 이름을 입력합니다.



② 트리거 유형


트리거 유형을 선택합니다.



③ 이벤트 이름


이벤트 이름을 입력합니다.


사이트에 추가했던 스크립트에 사용한

 

"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.