소셜로그인 중단 안내

계정으로 로그인 기능이 2023년 11월 16일 중단되었습니다.

아이보스 계정이 사라지는 것은 절대 아니며, 계정의 이메일 주소를 이용해 로그인 하실 수 있습니다.

▶️ 자세한 공지사항 확인

구글태그관리자(GTM)를 활용한 이벤트 설정 양식제출

2016.09.09 12:55

김종진

조회수 2,980

댓글 4

ga_gtm_image_03

 

 

양식제출 이벤트 추적 설정은 웹사이트에서 상담이나 이벤트 등을 신청하는 양식(form)을 제출하는 행위 즉 신청완료 버튼을 클릭하는 행위를 추적하는 것을 말합니다.

 

병원, 학원, 보험, 대출 등의 업종을 포함하여 온라인마케팅 활용도가 높은 서비스업 업체들의 경우 웹사트를 운영하는 주요 목적 중 하나가 바로 (오프라인 결제로 유도하기 위해) 고객 DB를 획득하는 것입니다. 그리고 고객 DB를 획득하는 데 있어 가장 일반적으로 사용하는 방법은 상담신청, 이벤트신청 등 신청양식을 작성하여 정보를 제출하도록 하는 것입니다. 

 

이러한 양식제출 행위는 많은 비전자상거래 업체에 있어 주요 전환에 해당하는데요, 문제는 이러한 행위를 구글애널리틱스가 자동으로(즉, 추가 설정 없이) 측정하지 못한다는 데 있습니다. GA에서 양식제출 액션에 대한 데이터를 수집하려면 별도로 이벤트 태깅 작업을 해야 합니다. 

 

 

GA에서의 양식제출 이벤트 추적 설정은 두 가지 측면에서 다른 이벤트들과 중요한 차이가 있습니다.


첫째, 양식제출 이벤트를 추적하기 위해서는 태그관리자를 사용한다 하더라도 거의 대부분의 경우 소스 코드를 수정해야 합니다. 

 

양식제출 이벤트에는 대부분 '유효성 검사'라는 단계가 존재합니다. 유효성 검사란 사용자가 양식 내에서 올바른 값을 입력했는지 여부 즉 데이터의 유효성을 검증하는 것을 말하며, 이 과정을 거치는 이유는 불필요한 데이터가 수집되는 걸 방지하기 위함입니다. 잠재 고객으로부터 상담신청 DB를 획득했는데 고객에게 연락할 수 있는 전화번호나 이메일 주소가 포함되어 있지 않다면 이 DB는 쓸모가 없을 것입니다. 따라서 양식이 제출될 때 여기에 포함된 데이터의 유효성을 검증하는 과정이 필요합니다.

 

문제는 유효성 검사가 자바스크립트를 이용, 내부적으로 진행되기 때문에 양식제출 버튼에 표면적으로 드러나는 요소만로는 유효성 검사가 제대로 이뤄졌는지 파악할 수 없다는 점입니다. 구글태그관리자는 링크나 버튼에 표시되는 html 혹은 css 요소를 토대로 트리거를 만들고 태그를 실행하기 때문에 유효성 검사가 내부적으로 이뤄진다는 사실은 구글태그관리자의 기본 제공 변수만을 사용해서는 이를 측정할 수 없다는 얘기가 되며, 이는 또한 웹사이트의 소스 코드를 수정해야 할 필요가 있다는 얘기도 됩니다.

 

둘째, 양식제출 이벤트 방식을 이용하면 사용자가 제공한 정보를 GA의 분석 대상으로 삼을 수 있습니다. 

 

다른 이벤트와 달리 양식을 작성할 때는 사용자가 다양한 정보를 입력할 수 있습니다. 이 정보 중 분석에 도움이 되는 정보가 있으면 이를 추출하여 GA의 이벤트 카테고리, 액션, 라벨 중 적절한 항목으로 보내고 이를 분석하면 됩니다. 치과에서 상담신청 DB를 받는다고 할 때 스케일링과 같은 일반치료에 대한 문의 DB와 전체임플란트 문의 DB는 아마도 그 가치가 다를 것입니다. 따라서 사용자가 제공하는 상세 정보를 활용하면 보다 의미 있는 성과측정이 가능해집니다. 다만 이렇게 사용자가 제공한 정보를 수집하기 위해서는 해당 정보를 추출할 수 있도록 소스 코드에 자바스크립트를 코드를 추가해야 합니다. 

 

그러면 위 두 가지 측면을 염두에 두고 구글 태그매니저를 통해서 양식제출 이벤트를 추적하는 방법을 설명하도록 하겠습니다. 소스 코드를 수정해야 하고 자바스크립트를 통해 양식에 입력된 정보를 수집해야 한다는 점에서 개발지식이 없는 분들에게는 내용이 다소 기술적이고 어려울 수도 있습니다. 

 

  • 상담신청 양식(샘플)

구글태그관리자_이벤트설정_양식제출_P01

 

위 이미지에서 보이는 양식은 양식제출 이벤트에 대한 설명을 돕기 위해 예시로 만든 것이며, 양식을 제출하는 '등록' 버튼의 요소는 아래와 같습니다.

<form name="fwrite" id="fwrite" action="bbb.php" 
onsubmit="return fwrite_submit(this);" method="post">

 

우선 '등록' 버튼을 누르면 onsubmit 이벤트 핸들러가 작동되면서  아래와 같이 'fwrite_submit'라는 이름을 가진 자바스크립트 함수를 실행시킵니다. 

<script>
    function fwrite_submit(f) {
        if (  f.wr_name.value == "") {
            alert("이름을 입력하세요.");
            f.wr_name.focus();
            return false;
        }

        if (  f.wr_phone.value == "") {
            alert("연락처를 입력하세요.");
            f.wr_phone.focus();
            return false;
        }

        return true;
    }
</script>

 

'fwrite_submit' 함수가 실행되면 사용자가 입력한 '이름'과 '연락처'를 확인해서 유효한 데이터인지를 검사합니다. 데이터가 유효하지 않은 경우 '이름' 혹은 '연락처'를 입력하라는 경고창을 띄우게 되며, 유효한 경우 'true'값을 반환하고 사용자가 입력한 정보를 DB를 저장하는 곳으로 보내게 됩니다.

 

따라서 데이터의 유효성을 확인하고 'true' 값을 반환하기 직전의 위치에 스크립트를 추가하여 해당 이벤트 정보를 구글태그관리자의 데이터영역(dataLayer)으로 보내고, 양식제출 이벤트 태그 설정을 통해 데이터영역에 저장된 이벤트 정보를 다시 GA서버로 전송하면, 단순한 버튼 클릭이 아닌 유효한 데이터를 포함하는 양식제출 버튼 클릭을 측정할 수 있습니다. 이벤트 설정이 추가된 스크립트는 아래와 같습니다. 

<script>
    function fwrite_submit(f) {
        if (  f.wr_name.value == "") {
            alert("이름을 입력하세요.");
            f.wr_name.focus();
            return false;
        }

        if (  f.wr_phone.value == "") {
            alert("연락처를 입력하세요.");
            f.wr_phone.focus();
            return false;
        }

        // GTM- begin
            	var ga_gender = f.sex.value; 
            	var ga_hobby = getCheckBoxValue(f, "play[]");
            	var ga_area = f.area.value;

            	dataLayer.push({'event':'ga_lead','eventCategory':'상담신청',
                'eventAction': ga_area,'eventLabel': ga_gender+' - '+ga_hobby});
        // GTM - end

        return true;
    }
</script>

 

추가된 스크립트 코드를 살펴보면 우선 리드(DB)를 확보한다는 의미에서 'event' 이름으로 'ga_lead'를 사용했습니다. 이벤트 카테고리 값은 '상담신청'으로 정했으며 이벤트 액션과 라벨 값은 변수를 적용하여 사용자가 입력한 정보를 수집할 수 있도록 했습니다. 액션 값에는 사용자 거주지역, 라벨 값에는 사용자 성별과  취미가 포함되도록 만들었습니다.  이벤트명, 카테고리, 액션, 라벨 값 모두 정해진 값이나 이름이 있는 게 아니며, 담당자가 적절한 기준을 토대로 임의로 정해서 사용하면 됩니다.

 

양식에 입력된 각 항목의 정보를 가져오는 건 자바스크립트나 제이쿼리에 대한 개발지식이 필요한 부분입니다. 개발지식이 없거나 부족하다면 주변의 개발자 도움을 받아야  해결해야 합니다. 자세한 설명은 생략하지만 위와 같이 변수 처리를 한 이유를 알 수 있도록 각 항목의 요소 검사 캡처 화면을 함께 올립니다. (양식에 입력된 정보를 포함해서 웹사이트에서 정보를 추출하는 방법 또한 한 가지 방법만 있는 게 아닙니다. 본인이 알고 있고 또 익숙한 방법을 사용하면 됩니다.) 

 

  • 지역 : var ga_area = f.area.value;

구글태그관리자_이벤트설정_양식제출_P02

 

  • 성별 : var ga_gender = f.sex.value;

구글태그관리자_이벤트설정_양식제출_P03

 

  • 취미 : var ga_hobby = getCheckBoxValue(f, "play[]");

구글태그관리자_이벤트설정_양식제출_P04

 

GA에서 이벤트 추적 설정을 해본 경험이 있다면 위와 같은 GTM 방식이 GA 서버로 이벤트 정보를 바로 전송하는 기존 방식과 유사하다는 것을 알 수 있을 겁니다. 실제로 구글태그관리자를 사용한다 하더라도 기존 방식을 통해 데이터영역이 아닌 GA 서버로 이벤트 정보를 바로 전송하는 것도 가능합니다. 어떻게 보면 불필요한 중간 단계가 하나 더 들어 있다고 볼 수도 있으나 태그관리자를 통해 이벤트 추적 설정을 하면 생성된 태그를 보고 이벤트 태깅이 어느 곳에서 이뤄졌는지 한 눈에 알 수 있고 또한 필요에 따라 선택적으로 이벤트 추적을 하는 것도 가능하다는 장점이 있습니다. 

 

다시 본론으로 와서 양식이 제출될 때 데이터가 유효한 지 여부를 확인하여 이를 데이터영역에 보냈다면 이제는 구글태그관리자를 통해 이 정보를 GA로 전송할 수 있도록 이벤트 태그를 생성하는 방법을 설명하도록 하겠습니다.

  

1. 태그 구성 – 이벤트 태그 생성

– 태그 이름 : 이벤트_상담신청 ← 임의로 지정

– 태그 유형 : '유니버설 애널리틱스 (Google 애널리틱스)' 선택

– 추적 ID :{{UA-id-preview}} ← 추적 ID, 사용자 정의 변수

– 추적 유형 : ‘이벤트’ 선택

– 카테고리 : {{event_category}} ← 사용자 정의 변수

– 작업 : {{event_action}} ← 사용자 정의 변수

– 라벨 : {{event_label}} ← 사용자 정의 변수

 

구글태그관리자_이벤트설정_양식제출_P05

 

이벤트 카테고리, 작업, 라벨 값은 모두 사용자 정의 변수를 사용했습니다.  각각의 변수는 양식제출 버튼에 추가된 스크립트가 실행되면서 데이터 영역으로 전송된 카테고리, 작업, 라벨 값을 다시 데이터영역에서 가져와 보관하는 변수로서 변수 구성은 아래와 같습니다.

 

  • 이벤트 카테고리 변수 구성

– 변수 이름 : event_category ← 임의로 지정 

– 변수 유형 : '데이터 영역 변수' 선택

– 데이터 영역 변수 이름 : eventCategory ← 데이터 영역으로 정보 전송 시 사용한 변수 이름과 동일

구글태그관리자_이벤트설정_양식제출_P07

 

  • 이벤트 작업 변수 구성

– 변수 이름 : event_action ← 임의로 지정

– 변수 유형 : '데이터 영역 변수' 선택

– 데이터 영역 변수 이름 : eventAction ← 데이터 영역으로 정보 전송 시 사용한 변수 이름과 동일

 

구글태그관리자_이벤트설정_양식제출_P08

 

  • 이벤트 라벨 변수 구성

– 변수 이름 : event_label ← 임의로 지정

– 변수 유형 : '데이터 영역 변수' 선택

– 데이터 영역 변수 이름 : eventLabel ← 데이터 영역으로 정보 전송 시 사용한 변수 이름과 동일

 

구글태그관리자_이벤트설정_양식제출_P09

 

 

2. 트리거 구성 – 트리거 생성

– 트리거 이름 : 상담신청 ← 임의로 지정

– 트리거 유형 : ‘맞춤 이벤트’ 선택

– 이벤트 이름 : ga_lead

 

구글태그관리자_이벤트설정_양식제출_P06

 

트리거는 이벤트 태그가 실행되는 조건을 지정합니다. 위 트리거는 맞춤 이벤트의 'event' 이름이 'ga_lead'와 일치할 경우 실행되는 조건인데요, 위에서 추가된 스크립트를 보면 유효성 검사가 완료되는 시점에 이벤트 이름이 'ga_lead'인 정보가 데이터 영역으로 전송된다는 걸 알 수 있습니다. 역으로 얘기하면, 데이터 영역에 이벤트 이름이 'ga_lead'인 정보가 존재한다면 유효한 양식제출 이벤트가 발생했다고 간주할 수 있다는 결론에 이릅니다. 따라서 위와 같은 조건으로 트리거를 만들게 됩니다.

 

지금까지 구글태그관리자의 데이터 영역을 활용하여 양식제출 이벤트 추적 태그를 만드는 방법을 알아보았는데요, 간단하게 요약하자면 아래와 같습니다.

 

1) 양식제출 이벤트가 발생하고 유효성 검사가 완료된 후 데이터 저장위치로 데이터가 전송되기 직전 위치의 소스 코드에 스크립트를 추가하여 해당 이벤트 정보를 데이터영역(dataLayer)으로 전송한다.


2) 태그매니저 내 이벤트 태그를 생성하여 데이터영역에 저장된 정보(변수)를 트리거 조건으로 활용하고 또 구글애널리틱스로 전송하여 분석 대상으로 삼는다.

 

 

아래는 위에서 설명한 것도 동일한 방식을 이용해 실제 상담신청 양식 제출에 대해 이벤트 추적 설정을 하고 사용자가 입력한 데이터를 수집한 사례입니다.

 

  •  # 상담신청 양식

구글태그관리자_이벤트설정_양식제출_P10

 

인테리어 중개 플랫폼 사이트의 상담신청 양식인데요, 좀 더 상세한 분석이 가능하도록 '이벤트 액션' 값으로는 인테리어 물건의 위치 정보를, '이벤트 라벨' 값으로는 공사 구분 정보를 수집했습니다.

 

  • # 구글애널리틱스 데이터 (방문 형태 > 이벤트 > 인기 이벤트 보고서)

구글태그관리자_이벤트설정_양식제출_P11

 

구글태그관리자_이벤트설정_양식제출_P12-1

 

구글태그관리자_이벤트설정_양식제출_P13

 

 

* 2016년 8월 29일자로 구글태그관리자에 몇 가지 기능이 추가되면서 UI가 변경되었습니다. 따라서 이번 포스팅을 작성하면서 캡처한 화면 UI가 이전 포스팅에서 캡처된 화면 UI와 다릅니다. 우선 UI만 놓고 보면 나름 굵직한 변화가 눈에 띄는데 기능상으로 크게 달라진 부분은 별로 없어 보입니다. 구체적인 사항은 좀 더 사용해봐야 알 수 있을 것 같습니다.

 

출처: http://analyticsmarketing.co.kr/digital-analytics/google-tag-manager/1066/

 

 

스크랩

공유하기

신고

하트 아이콘차차연님 외 3명이 좋아합니다.

목록글쓰기
댓글 4
댓글 새로고침
2

모임지기

09.30569
4

uniquest

09.30653
32

김종진

09.291,471
63

전승범

09.271,065
3

보스톡

09.24942
5

김종진

09.221,149
2

어흥!!

09.22398
12

mean

09.21607
2

uniquest

09.20647
4

어흥!!

09.19807
16

어흥!!

09.19674
74

신용성

09.151,179
9

어흥!!

09.11781
1

내담기획

09.091,118
44

김종진

09.092,981
23

하루네

09.07661
14

송완소

09.06918
23

김종진

09.04702
26

씨즈부스

08.29921
3

궁금합니당

08.29755
7

minxx

08.252,636
1

vip치킨

08.25820
1

사쿠라린

08.23547

밍이

08.23343

밍이

08.23445
2

송종국

08.13702
1

신용성

08.09967
2

신용성

08.05945
1

헴이

08.04566

신용성

08.04594
목록 글쓰기
로그인 후 더욱 많은 기능을 이용하세요!아이보스 로그인