사용자 입력 정보의 분석을 가능하게 하는 양식제출 이벤트 설정

 

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만 놓고 보면 나름 굵직한 변화가 눈에 띄는데 기능상으로 크게 달라진 부분은 별로 없어 보입니다. 구체적인 사항은 좀 더 사용해봐야 알 수 있을 것 같습니다.

 

 

—————————————————————————

국내 대표적인 온라인마케팅 커뮤니티/매체인 아이보스에서 구글 애널리틱스 4(GA4) 강의를 진행하고 있습니다. 커리큘럼 등 자세한 사항은 아래 링크를 참조하세요.

GA4 실무과정: https://www.ibossedu.co.kr/edu-goods-380

 

GA4 구축 문의하기(오컴데이터)
GA4 기업교육  문의하기(오컴데이터)

 

 

* 표시가 있는 항목은 필수 입력란입니다.

 

 

[Google Tag Manager] 7. 구글태그관리자를 활용한 이벤트 설정 – 양식제출

[Google Tag Manager] 7. 구글태그관리자를 활용한 이벤트 설정 – 양식제출”에 대한 14개의 생각

  • 2017년 8월 28일 12:00 오후
    고유주소

    안녕하세요~ 항상 좋은글 감사히 잘보고 있습니다.
    포스팅해주신 글 관련하여 질문이 있어 댓글을 남기게되었습니다~
    지금 포스팅해주신 글을 보면 이벤트 트래킹을 이용해서 방문자가 입력한 값을 ga에 저장할수있는데요~
    외부 광고(예-facebook, naver 등) url을 타고 온 유저가 입력한 항목값을 유입경로와 함께 저장하고 싶은데요~ (예시 저장 – 페이스북, 사용자 입력값)
    트래킹url을 활용해서 방문자 경로와 입력값을 이벤트로 활용해서 위에 포스팅해주신 내용처럼 작업하면
    같이 항목을 저장할 수 있을까요?
    (트래킹 url 내 source, medium 등 활용해서 ‘contents’ 내 항목값 저장하는 방식을 몇달전 시도했었는데 실패해서 이벤트 방식으로 다시 시도해보려고합니다~)

    응답
    • 2017년 8월 28일 5:28 오후
      고유주소

      안녕하세요. 이벤트 정보를 수집할 때 유입출처를 이벤트 정보와 함께 표시해야 할 특별한 이유가 있나요? 맞춤 보고서 혹은 두 번째 측정기준을 사용해서 소스/매체를 확인하면 되지 않나 싶은데요…^^

      응답
  • 2017년 10월 20일 2:25 오후
    고유주소

    혹시 반대로 Alert 창이 뜬 이벤트 수를 측정할 순없을까요? 좀더 풀어 말하면 False 일때 이벤트 값을 측정하고 싶습니다.

    응답
    • 2017년 10월 23일 11:45 오전
      고유주소

      안녕하세요. 가능할 듯합니다. 예를 들어 본문 이벤트 설정 예시 중 함수 내 ‘alert(“연락처를 입력하세요.”);’ 구문과 ‘f.wr_phone.focus();’ 구문 사이에 이벤트가 제대로 실행되지 않음을 나타낼 수 있는 이벤트를 설정(카테고리/액션/라벨 값 지정)하면 의도하는 데이터를 수집할 수 있을 것 같습니다. 테스트는 해보지 않았습니다.^^

      응답
  • 2018년 8월 12일 10:45 오전
    고유주소

    안녕하세요! 좋은 글 너무 감사합니다ㅜ.ㅜ 그런데, 애드워즈 광고를 통해 유입이되어 당사 홈페이지에서 폼을 작성하여 제출한 경우에는 어떻게 설정할 수 있을까요?ㅜㅜ 이경우는 추적이 어려운건지 궁금합니다..도움 부탁드려요 ㅠㅠ

    응답
    • 2018년 8월 14일 12:08 오후
      고유주소

      안녕하세요. 1) 위 포스팅에서 설명드린대로 양식제출에 대한 이벤트 설정(이후 해당 이벤트를 목표로 설정)을 하거나, 2) 양식제출 시 별도이 완료페이지를 만들어 목표로 설정하는 법 모두 가능합니다. 애드워즈 등 특정 채널을 위한 별도의 이벤트 혹은 목표를 설정할 필요는 없습니다. 다만 특정 트래픽이 어떤 채널/캠페인에서 유입되었는지를 파악하기 위해서는 맞춤 캠페인 설정, 그리고 (애드워즈 채널의 경우) 애널리틱스와의 연동 작업이 필요합니다.

      응답
  • 2019년 3월 30일 3:59 오후
    고유주소

    안녕하세요.여기서 항상 많이 배웁니다.
    구글 태그매니저를 사용하면서 질문이 있어 댓글 남깁니다.
    wp를 사용중이고 구글 태그매니저로 이벤트를 설정했는데 애널리틱스로 제가 발생한 이벤트만 수집하고 다른 사용자의 이벤트는 수집하지 않고 있습니다. 미리보기에서는 모두 정상적으로 이벤트가 실행됩니다.어디에서 잘못 됐는지 알수가 없어 글 남기게 됐습니다.도움 부탁드립니다.

    응답
    • 2019년 4월 1일 6:45 오후
      고유주소

      안녕하세요. 죄송하지만, 제가 도움을 드리기는 어려울 것 같습니다. 정상적으로 작동해야 할 것 같은 상황에서 오류나 문제가 발생할 때 이를 정확히 진단하고 해결하는 건 상당히 어려운 작업입니다. 제대로 작동하지 않을 수 있는 가능성이 너무나 많기 때문입니다. 문의 주신 사항의 경우 설정 내역과 사이트 구조를 보지 않고 판단하기는 어렵습니다.

      응답
  • 2019년 8월 23일 2:18 오후
    고유주소

    질문이있습니다. GTM에 양식제출 트리거가 있고, 해당 트리거에 유효성검사 기능도 있는데
    해당 트리거를 사용하지 않고 맞춤이벤트 트리거를 쓰셨는데 이유가 있을까요? 맞춤이벤트 트리거쓰려면 기재해주신대로 datalayer.push() 메서드를 사용해서 코딩작업을 해주어야하는데… 특별한 이유가 있을까요?

    응답
    • 2019년 8월 26일 5:11 오후
      고유주소

      안녕하세요. 양식제출 트리거가 제대로 작동되지 않아 위와 같이 맞춤 이벤트 트리거를 사용했습니다만… 사용 초기 일부 상황에서 테스트를 한 후 제대로 작동되지 않는다 결론을 내리고 그 이후로는 해당 양식제출 트리거를 사용해 볼 생각을 하지 못했습니다. 그리고 맞춤 이벤트 설정의 경우 언급하신대로 소스 코드를 수정해야 하기 때문에 확실히 많이 불편합니다.

      이번에 문의를 주셔서 테스트를 한 번 해봤는데, 유효성 검사 기능이 제대로 작동하네요. 좀 더 다양한 환경에서 테스트를 해봐야 하겠지만, 많은 불편이 해소될 듯합니다. 정말 좋은 질문 주셔서 감사합니다.^^

      응답
  • 2020년 5월 21일 11:42 오전
    고유주소

    안녕하세요, 좋은 글 감사합니다.
    저희는 iframe form을 사용하고 있는데요,

    단순히 저희 양식 제출 폼에 유입한 사람 수와 양식 제출을 완료한 사람을 GA에서 트래킹하고 싶습니다.

    고객이 웹사이트 내에 있는 폼에(랜딩 URL : http://www.aaa.com/lead) 들어 온 후,
    양식을 제출을하면 (랜딩 URL : http://www.aaa.com/lead-submit-finish)

    위와 같은 랜딩 URL 기준으로 GA에서 도착 목표만을 설정해도 제출 폼에 유입한 사람 수와 양식 제출 완료한 사람 수를 트래킹할 수 있나요?

    응답
    • 2020년 5월 26일 6:48 오후
      고유주소

      안녕하세요. 양식제출 행동 추적시 별도의 완료페이지가 있다면 해당 페이지를 목표로 설정함으로써 양식제출 완료수를 추적할 수 있습니다. 또한 목표 설정 시 제출폼이 들어 있는 페이지 주소를 유입경로 단계에 포함시킨다면, 유입 세션수를 단계별로 측정할 수 있습니다. 그 수치는 유입경로시각화 보고서에서 확인 가능합니다.

      응답
  • 2023년 2월 23일 8:33 오후
    고유주소

    안녕하세요! ga4에서 적용하고 싶은데, ga4 양식제출 이벤트 설정도 동일하게 진행하면 될까요..?

    응답
    • 2023년 2월 25일 10:37 오후
      고유주소

      안녕하세요. GA4 이벤트 설정도 거의 동일합니다. UA에서 이벤트 데이터 수집 시 카테고리, 액션, 라벨 세 가지 항목을 수집했다면, GA4에서는 이를 이벤트 이름과 추가적인 이벤트 매개변수로 바꿔주시면 됩니다. 자세한 내용은 아래 글 참조하세요.

      참조글: https://analyticsmarketing.co.kr/digital-analytics/6008/

      응답

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다