Google 태그 관리자 및 Google 애널리틱스로 양식 추적 분석을 설정하는 방법

게시 됨: 2022-04-12

전환율은 가장 단순하면서도 동시에 가장 중요한 마케팅 효율성 측정 방법 중 하나입니다. 얼마나 많은 사용자가 구매, 이메일 가입, 통화 요청 등의 목표 작업을 완료했는지 보여줍니다. 전자 상거래 판매를 기록하고 분석하기 위해 구성하기가 비교적 쉬운 Google Analytics가 있습니다. 그러나 사이트에 제출된 양식을 추적하려면 더 많은 노력이 필요합니다.

이는 양식이 서로 다른 유형으로 발생하고 데이터를 서버로 보내는 데 서로 다른 기술을 사용하기 때문입니다. 데이터가 성공적으로 전송되면 일부 양식 필드가 업데이트됩니다. 다른 사람들은 팝업 창을 보여줍니다. 세 번째 유형은 사용자를 감사 페이지로 리디렉션합니다. 양식 추적 방법은 사용되는 기술에 따라 다릅니다.

이 기사에서는 다양한 방법으로 양식 데이터를 수집하고 이를 Google 애널리틱스로 전송하는 방법을 설명합니다.

방법 1. 별도의 감사 페이지
방법 2. Google 태그 관리자에서 양식 트리거 제출
- 1단계. 양식 변수 활성화
- 2단계. 트리거 조정
- 3단계. 트리거가 작동하는지 확인
- 4단계. 태그 생성
- 5단계. Google 애널리틱스에서 타겟 설정
방법 3. Google 태그 관리자에서 요소 가용성 트리거
방법 4. AJAX를 사용하는 추적 양식
- 1단계. 양식이 어떻게 작동하는지 확인하는 태그 만들기
- 2단계. 데이터 영역 변수 생성
- 3단계. 트리거 생성
방법 5. 트리거로서의 DataLayer 이벤트
사용자가 양식을 작성하는 데 소비하는 시간

방법 1. 별도의 감사 페이지

사용자가 양식을 완료한 후 다른 URL이 있는 별도의 페이지로 리디렉션되는 경우 이 URL에 대한 방문을 추적하는 것이 양식 제출을 추적하는 가장 쉬운 방법입니다. Google 애널리틱스에서 "방문 페이지" 유형의 타겟을 만드는 것으로 충분합니다.

웨비나 등록을 추적한다고 가정해 보겠습니다. 성공적으로 등록한 후 감사 페이지는 다음과 같습니다. https://www.site.com/registration/thankyou

관리자 패널의 보기 설정 에서 대상 아래에서 대상 을 클릭한 다음 사용자 지정 을 클릭합니다. 대상 이름을 지정하고 대상 유형을 선택한 다음 감사 페이지 주소를 입력합니다.

고려해야 할 중요한 사항: 감사 페이지의 URL은 고유해야 합니다. 즉, 사이트에 이러한 주소가 있는 페이지가 하나만 있어야 하며 사용자가 양식을 작성하지 않고는 이 페이지에 액세스할 수 없어야 합니다. 그렇지 않으면 Google Analytics가 목표 달성에 대한 부정확한 데이터를 기록할 수 있습니다.

독자를 위한 보너스

최고의 OWOX BI 마케팅 사례

지금 다운로드

방법 2. Google 태그 관리자에서 양식 트리거 제출

프로그래머가 제출 버튼을 사용하여 양식에서 데이터 전송을 올바르게 구성한 경우 양식 추적 제출을 위해 내장된 Google 태그 관리자 트리거를 사용할 수 있습니다. 인터넷에 달린 댓글로 판단하면 이 상황은 드물게 발생하지만 시도해 볼 가치가 있습니다.

이 방법을 사용하면 사용자가 양식을 작성하고 보낼 때 트리거가 gtm.formSubmit 이벤트를 dataLayer 배열로 보냅니다.

참고: 설정으로 이동하기 전에 Google 태그 관리자에서 사이트의 모든 페이지에 대해 페이지 보기 태그가 활성화되어 있는지 확인하십시오.

1단계. 양식 변수 활성화

이를 위해 GTM에서 변수 메뉴를 열고 구성 을 클릭한 다음 양식 섹션에서 모든 변수를 선택합니다.

2단계. 트리거 조정

트리거를 생성하려면 양식 ID 또는 양식 클래스 속성이 필요합니다. 양식을 마우스 오른쪽 버튼으로 클릭하고 Firefox에서 항목 탐색 또는 Chrome에서 코드 보기를 클릭하여 HTML 코드에서 볼 수 있습니다.

이 예에서 양식 id는 send-request-form이며 트리거를 구성할 때 사용할 것입니다.

트리거 메뉴로 이동하여 새로 만들기를 클릭하고 트리거 설정 을 열고 양식 제출 을 선택합니다.

열리는 창에 두 개의 확인란이 표시됩니다.

태그 대기 – 이 옵션을 활성화하면 양식과 연결된 모든 태그가 활성화되거나 지정한 시간이 만료될 때까지 양식이 전송되지 않습니다.
유효성 검사 – 이 옵션을 활성화하는 것이 가장 좋습니다. 그렇지 않으면 사용자가 필수 필드를 채우지 않은 경우에도 트리거가 실행됩니다.

오류 검사를 활성화하면 추가 설정이 나타납니다. 트리거를 활성화하는 경우 양식이 포함된 페이지의 URL을 지정하십시오. 그리고 트리거를 활성화하는 경우 위에서 언급한 양식 ID를 지정합니다.

요청 제출과 같이 트리거에 대해 편리하고 이해하기 쉬운 이름을 만들고 저장합니다.

3단계. 트리거가 작동하는지 확인

컨테이너에 변경사항을 게시하기 전에 Google 태그 관리자에서 미리보기 모드를 사용하세요. 양식이 있는 페이지를 열고 작성하고 보내기를 누르십시오. 디버깅 콘솔에서 gtm.formSubmit 이벤트가 나타나야 합니다.

이 이벤트가 표시되지 않으면 이 추적 방법이 작동하지 않습니다. 이 경우 이 문서에 설명된 다른 방법 중 하나를 시도하십시오.

이벤트가 나타나면 트리거가 올바르게 작동하는지 확인하기 위해 한 번 더 테스트를 수행해야 합니다. 양식을 열고 일부 필수 필드를 비워두고 양식을 제출하십시오. gtm.formSubmit 이벤트가 디버깅 콘솔에 다시 나타나면 내장 트리거가 잘못 작동하여 도움이 되지 않습니다. 이벤트가 전송되지 않았다면 훌륭합니다! 다음 단계로 이동합니다.

4단계. 태그 생성

이제 양식이 전송되었다는 정보를 Google Analytics로 보낼 태그를 만들어야 합니다. 이렇게 하려면 태그 메뉴로 이동하여 새로 만들기를 클릭하고 태그 구성 을 열고 Google 애널리틱스 – 유니버설 애널리틱스를 선택합니다.

명확성을 위해 태그 이름을 트리거와 동일하게 지정할 수 있습니다. 다음으로 다음 필드를 채우십시오.

태그 유형 – {{Google 애널리틱스 설정}} 선택
트랙 유형 - "이벤트" 선택
카테고리 – 편의상 태그 및 트리거와 동일
액션 – 보내기
레이블 – 예: {{양식 ID}})
비 상호 작용 - "False"로 둡니다.

태그를 활성화하려면 3단계에서 생성한 트리거를 선택하고 저장 을 클릭합니다.

준비 됬다! Google 태그 관리자 미리보기 모드를 사용하거나 Google 애널리틱스의 실시간 이벤트 보고서를 사용하여 양식을 제출할 때 생성된 태그가 작동하는 방식을 확인할 수 있습니다.

5단계. Google 애널리틱스에서 타겟 설정

변경 사항이 포함된 컨테이너를 게시한 후에는 양식 제출을 전환으로 고려하도록 Google Analytics에서 대상을 설정해야 합니다. 이렇게 하려면 Google 애널리틱스 보기 설정에서 새로운 목표를 추가하세요. 이벤트 유형을 선택하고 Google 태그 관리자에서 태그를 구성할 때와 마찬가지로 카테고리, 작업 및 바로가기 필드를 입력합니다.

대상을 저장합니다. 완료. 사이트의 코드를 변경하지 않고 양식 추적을 설정했습니다!

방법 3. Google 태그 관리자에서 요소 가용성 트리거

양식을 보낸 후 감사 또는 성공적인 제출에 대한 메시지와 함께 사이트에 창이 나타나면 다른 내장 GTM 트리거를 시도할 수 있습니다. 특정 항목이 화면(이 경우 팝업 창)에 나타나면 실행되고 gtm.elementVisibility 이벤트를 dataLayer에 전달합니다.

이 트리거를 구성하려면 모니터링되는 항목의 CSS 선택기를 알아야 합니다. 이 선택기를 찾으려면 창을 마우스 오른쪽 버튼으로 클릭하고 코드 보기 를 선택합니다. 다음 줄을 찾고 있습니다.

CSS 선택기를 복사하려면 행을 마우스 오른쪽 버튼으로 클릭하고 복사 – 선택기 복사를 선택합니다.

이 예에서 선택기는 #webinar_marketing_automation > div와 같습니다.

그런 다음 요소 가시성 유형을 선택하여 새 트리거를 만듭니다.

다음 필드를 작성하십시오.

트리거 이름 – 예: "웹 세미나 녹화 가져오기"
선택 방법 – CSS 선택기
요소 선택기 – 팝업 창의 HTML 코드에서 복사한 값을 삽입합니다.
트리거 규칙 - 페이지에 하나의 양식이 있는 경우 "페이지당 한 번" 옵션을 그대로 둡니다. 여러 양식이 있고 하나의 메시지가 팝업되는 경우 "요소당 한 번"을 선택할 수 있습니다.

그런 다음 "DOM 변경 사항 등록" 상자를 선택합니다.
트리거 활성화 조건 – "일부 가시성 이벤트"를 선택하여 팝업 메시지 또는 텍스트가 표시되는 페이지를 지정할 수 있습니다.
트리거를 저장합니다.

요소 가용성 트리거를 생성한 후에는 방법 2에 자세히 설명된 대로 동일한 설정을 조정해야 합니다.

양식 제출 데이터를 Google Analytics로 보내고 생성된 트리거를 첨부할 새 태그를 GTM에 추가합니다.
양식이 제출될 때 태그가 어떻게 작동하는지 미리 봅니다.
Google Analytics에서 이벤트 타겟을 설정하여 전환을 추적합니다.

방법 4. AJAX를 사용하는 추적 양식

웹 사이트의 양식이 AJAX 기술을 사용하는 경우 데이터가 브라우저에서 백그라운드의 서버로 전송되고 페이지가 다시 로드되지 않습니다. 제출하는 AJAX 양식 추적을 구성하려면 Lunametrics에서 다음 스크립트를 사용할 수 있습니다.

    <script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>

이 코드는 양식이 실제로 AJAX를 사용하는지 확인한 다음 Google 태그 관리자에서 변수와 트리거를 생성합니다.

1단계. 양식이 어떻게 작동하는지 확인하는 태그 만들기

Google 태그 관리자에서 태그 를 열고 새로 만들기 , 태그 구성 을 차례로 클릭한 다음 맞춤 HTML 을 선택합니다. 위의 코드를 복사하여 텍스트 상자에 붙여넣습니다. 모든 페이지를 트리거로 지정:

그런 다음 GTM 미리보기를 켜고 양식 페이지를 열고 양식을 작성하고 제출하십시오.

디버깅 콘솔에 ajaxComplete 이벤트가 나타나면(위의 스크린샷과 같이) 양식이 AJAX를 사용하고 이 추적 방법이 적합합니다. 이 경우 추가로 읽으십시오.

2단계. 데이터 영역 변수 생성

미리 보기 콘솔에서 ajaxComplete 이벤트를 클릭한 다음 데이터 계층 탭을 열면 양식이 제출된 후 데이터 계층 배열에 어떤 정보가 전달되는지 확인할 수 있습니다.

우리는 이 코드의 응답 라인에 관심이 있습니다. 양식이 성공적으로 제출되었다는 텍스트가 포함되어 있습니다.

이 줄은 Google 태그 관리자에서 변수 및 트리거를 만드는 데 사용할 수 있습니다. GTM에서 변수 섹션을 열고 만들기 를 클릭한 다음 변수 구성 화면에서 데이터 계층 변수를 선택합니다. 데이터 영역 변수 이름 필드에 attributes.response를 작성하고(두 변수의 이름을 동일하게 지정할 수 있음) 설정을 저장합니다.

왜 응답 대신 attributes.response 를 입력합니까? 속성은 응답 키와 해당 값을 포함하는 개체이기 때문입니다. 그렇게 함으로써 우리는 GTM이 관심 있는 데이터의 정확한 경로를 가리킵니다.

변수를 생성한 후에는 확인이 필요합니다. 이를 위해 미리보기 모드에서 양식을 제출하십시오. ajaxComplete 이벤트를 클릭하고 Google 태그 관리자에서 변수 탭을 엽니다. attributes.response 변수와 성공적으로 양식 전송에 대한 텍스트가 표시되면 모든 것이 올바르게 구성되었음을 의미합니다.

3단계. 트리거 생성

트리거 구성 섹션에서 생성, 트리거 구성 을 차례로 클릭하고 사용자 이벤트 유형을 선택합니다. 이벤트 이름 필드에 ajaxComplete를 지정하십시오. 그런 다음 트리거를 활성화하기 위한 조건으로 Some Custom Events 를 선택하고 조건을 등록합니다. attributes.response 변수 에는 {enter your custom text about successfully sent}가 포함됩니다.

그 후 남은 것은 다음과 같습니다.

양식 제출 정보를 Google Analytics로 보내고 생성된 트리거를 첨부할 새 이벤트 추적 태그를 GTM에 추가합니다.
미리보기 모드를 사용하여 양식을 제출할 때 태그가 어떻게 작동하는지 확인합니다.
Google 애널리틱스에서 전환을 추적하도록 이벤트 타겟을 설정합니다.

위의 방법 2. Google 태그 관리자에서 양식 트리거 보내기 섹션에서 이러한 설정에 대해 자세히 설명했습니다.

방법 5. 트리거로서의 DataLayer 이벤트

dataLayer .push 방법을 사용한 추적 양식은 우리가 보기에 가장 안정적이고 다재다능한 솔루션입니다. 유일한 단점은 코드를 이해하지 못하면 개발자의 도움이 필요하다는 것입니다.

개발자를 위한 기술 사양 준비
양식이 성공적으로 제출된 후 dataLayer에서 전송하려는 설정 목록을 만드십시오. 모니터링하려는 양식이 있는 모든 페이지에 이 코드를 추가하도록 개발자에게 요청하세요.

dataLayer.push({
'이벤트': '양식',
'변수': '값'
})

어디에:

이벤트는 이벤트의 이름입니다. 편리한 이벤트로 대체할 수 있습니다.
변수는 이벤트와 함께 전송하려는 모든 변수의 집합입니다.

프로그래머가 모든 양식에 대해 dataLayer.push 메소드를 구성한 후 작동 방식을 확인할 수 있습니다. 이를 위해 Google 태그 관리자에 미리보기를 포함하고 웹사이트에서 양식을 작성하십시오. 디버깅 콘솔에는 새 이벤트가 있어야 합니다(이 예에서는 OWOX라고 함). 이벤트를 클릭하고 dataLayer 탭으로 이동하면 데이터 배열로 전송되는 모든 매개변수를 볼 수 있습니다.

위 스크린샷의 이벤트 예(블로그에서 PDF 파일 다운로드)에서 GTM으로 추적을 구성하는 방법을 고려합니다.

먼저 필요한 모든 사용자 변수(eventCategory, eventAction, eventLabel 등)를 만듭니다. 그런 다음 사용자 정의 변수 섹션에서 변수 유형을 선택하고 중괄호 안에 변수 이름을 입력합니다. {{eventCategory}}:

그런 다음 사용자 지정 이벤트 유형의 트리거를 만듭니다. 설정에서 이벤트 이름을 지정하고 모든 사용자 정의 이벤트에서 실행되도록 트리거를 설정합니다.

그런 다음 이벤트를 Google 애널리틱스로 전달할 태그를 만듭니다. 태그 유형을 Google 애널리틱스 – 유니버설 애널리틱스로 설정하고 추적 유형을 이벤트로 설정합니다.

또한 다음 필드를 채우십시오.

카테고리 – {{eventCategory}}
액션 – {{eventAction}}
라벨 – {{eventLabel}}

다음으로 {{Google Analytics settings}} 변수와 이전 단계에서 생성한 트리거를 선택합니다.

다 준비 됐어. 태그가 GTM 미리보기 모드와 실시간 Google 애널리틱스 보고서에서 작동하는지 확인하는 일만 남았습니다.

사용자가 양식을 작성하는 데 소비하는 시간

이제 얼마나 많은 사용자가 양식을 성공적으로 완료했는지 알 수 있으므로, 양식을 작성하지 않은 사람들이 겪었던 문제를 찾는 데 도움이 될 것입니다.

개발자는 양식 분석에 필요한 모든 매개변수의 이름과 값을 dataLayer에 추가해야 합니다. 다음을 추적하는 데 도움이 됩니다.

페이지 열기부터 필드 활성화까지의 시간
필드 활성화에서 필드 비활성화까지의 시간
첫 번째 필드 활성화부터 양식의 첫 번째 제출까지의 시간
첫 번째 필드가 활성화된 후 양식이 성공적으로 제출될 때까지의 시간
첫 번째 필드 활성화부터 양식 제출 실패까지의 시간
성공적으로 양식 제출에 대한 서버의 응답을 받는 시간
양식 제출 실패에 대한 서버의 응답을 받는 데 걸리는 시간
양식 활성화부터 사용자가 양식을 종료할 때까지의 시간(성공적으로 제출하지 않고)

Google Analytics에서 이 데이터 수집을 설정하면 해당 데이터를 Google BigQuery로 가져올 수 있습니다(예: OWOX BI 사용). 그런 다음 무료 OWOX BI BigQuery 보고서 추가 기능을 사용하여 Google 스프레드시트에서 모든 양식 분석 보고서를 작성할 수 있습니다.

이 보고서는 양식 사용성 문제를 찾고 수정하여 전환율을 높이는 데 도움이 됩니다.

다음은 그러한 보고서의 몇 가지 예와 그들이 대답할 수 있는 질문입니다.

1. 사용자가 어떤 양식 필드와 상호 작용할 때 가장 자주 오류가 발생합니까?

2. 사용자가 양식을 작성하는 데 얼마나 걸립니까?

3. 사용자가 양식을 작성하는 데 얼마나 많은 시간을 소비하며 무엇에 의존합니까?

추신: 양식 분석을 설정하고 비즈니스를 위한 맞춤형 메트릭 시스템을 만드는 데 도움이 필요하면 [email protected]으로 이메일을 보내거나 OWOX 웹사이트에서 문의 양식을 작성하십시오.