많은 워드프레스 사이트에서 문의나 신청을 받는 화면을 만드는 폼(form) 빌더로 컨택트 폼 7(contact form 7) 플러그인을 사용합니다.
이 플러그인은 2015년 9월 현재 3천만 이상의 다운로드와 백만이상이 실사용중인 대단한 플러그인입니다.(후지산이 그려진 이미지를 가진 … 일본인이 만든 플러그인입니다)
이 플러그인을 이용해서 만든 웹사이트에서 구글 애널리틱스를 사용해 목표(goal) 전환 추적(tracking : 웹사이트 내의 특정한 목적을 만들어서 그 목적이 이루어지기까지의 경로를 측정하여 얼마만큼 달성되었는지를 알아냅니다. 예를 들어 내 웹사이트에 방문자가 100명이라면 이중 몇 명이 물건을 구매하고, 구매하기 전까지 어떤 경로로 내 사이트에 들어왔고, 어떤 페이지에 도착하였으며 그 이후 어떤 페이지를 통해 구매되었는지 등을 알아낼 수 있습니다)을 하려면 한가지 문제가 있습니다. 구글 애널리틱스의 목표 추적은 주로 도달한 페이지(경로 도달)로 측정되는데 반면 컨택트 폼 7 플러그인은 모든 동작이(폼 입력검증/ 폼에러/ 폼전송완료 등) AJAX로 이루어진다는 것입니다. 바꾸어 말하면 폼 전송이 완료되어도 페이지의 변경(경로의 변경)이 생기지 않고, 폼 전송이 완료 되었다는 메세지만 나옵니다. 그러므로 구글 애널리틱스로 폼전송이 완료되었는지를 추적할 수 없습니다.
이것은 누군가 나의 웹사이트에 들어와서 특정 폼을 통해 구독신청/상담신청/상품구매 등 목표완성이 이루어졌을 때 이것이 얼마만큼의 효율성을 가지고 이루어졌는지 추적할 수 없다는 결론이 나옵니다.
그렇다고 아주 방법이 없는 것이 아닙니다.
다음과 같은 방법을 사용하면 쉽게 목표를 추적할 수 있습니다.
1. 구글 애널리스트 설정
먼저 특정 폼에서 전송완료(전송 버튼을 눌러서 유효성 검증을 통과하여 완료되는 순간)가 되었을 때 목적이 달성되는 것으로 간주하는 목표(goal)를 설정합니다.
- 폼이 설치된 웹사이트의 구글 애널리틱스 계정에 로그인합니다.
- 관리화면에서 목표로 들어갑니다.
- ‘목표’를 누릅니다.
- ‘1 목표설정’에서 ‘템플릿’이 아닌 ‘맞춤설정’을 고르고 ‘계속’을 눌러 다음 단계로 넘어갑니다.
- 두 번째 단계에서 자신이 정한 임의의 목표 이름을 기입하고, ‘유형’은 ‘도착’을 선택한 후 ‘계속’을 눌러 다음 단계로 넘어갑니다.
- ‘최종목표’는 목표가 완성되는 페이지입니다.
‘같음’을 선택하고, 페이지의 경로를 입력하는 칸에 원래 내 웹사이트의 특정 페이지를 입력하여 목표가 달성되는 것을 측정하는데, 이번에는 이 안에 내 웹사이트에는 존재하지 않는 ‘가상’의 페이지 이름을 만들어 넣습니다. (이 페이지가 어떻게 사용되는지는 이후에 알게 됩니다. 일단 어떤 이름이든 존재하지 않는 경로를 만들어서 입력한 후 기억해 둡니다)
추가로 이 목표가 달성되었을 때 금전적으로 얼마의 가치가 있는지 ‘값’에서 임의로 설정할 수 있습니다.
‘유입경로’는 목표달성이 어떤 경로에서 이탈되는지 알 필요가 있을 때 설정합니다. 예를 들어 쇼핑몰 사이트면 물건을 판매할 때 특정 프로세스(프로덕트 상세페이지-장바구니-결제-결제완료)가 진행되는데 이 과정을 여기에 설정해 두면 어디에서 이탈하는 비율이 높은지 측정할 수 있습니다.
- ‘저장’을 누르면 한 개의 목표(goal)가 설정된 것입니다.
2. 컨택트 폼 7 플러그인 설정
컨택트 폼 7 플러그인 내부에는 폼 전송이 성공하였을 때를 외부에서 감지하도록 해주는 훅이 있습니다. 자바스크립트 액션 훅이고, 이름은 ‘on_sent_ok’ 입니다.
‘on_sent_ok’ 가 되는 순간 구글 애널리틱스에 특정 페이지(위에서 설정한 가상페이지)로 전환되었다는 가공된 신호를 전송할 수 있고, 이 신호를 받은 애널리틱스 는 목표가 달성되었다고 인식하게 됩니다.
이 가공된 신호를 ‘on_sent_ok’훅에 맞춰 구글 애널리틱스에 전송하는 코드는 구글 애널리틱스 추적 코드 버전에 따라서 다릅니다.
유니버설 애널리틱스 추적 코드를 사용하는 경우
현재 구글 애널리틱스에 등록한 웹사이트의 추적 코드 내부에 자바스크립트 파일 이름이 analytics.js 인 경우(코드 내부를 보면 중간쯤에 적혀있습니다.)는 ‘유니버설 애널리틱스 추적 코드’를 사용하는 경우이고 이때는 아래의 코드를 사용합니다.
on_sent_ok: "ga('send', 'pageview', '/contact-via-form-7');"
‘/contact-via-form-7’ 이라고 적어놓은 것은 각자가 1-6에서 설정한 경로로 입력하면 됩니다.
클래식 애널리틱스 추적 코드를 사용하는 경우
현재 구글 애널리틱스에 등록한 웹사이트의 추적 코드 내부에 자바스크립트 파일 이름이 ga.js 인 경우(코드 내부를 보면 중간쯤에 적혀있습니다.)는 ‘클래식 애널리틱스 추적 코드’를 사용하는 경우이고 이때는 아래의 코드를 사용합니다.
on_sent_ok: "_gaq.push(['_trackPageview', '/contact-via-form-7']);"
‘/contact-via-form-7’ 이라고 적어놓은 것은 각자가 1-6에서 설정한 경로로 입력하면 됩니다.
컨택트 폼 7 플러그인에 적용하기
위 두 가지 경우 중 자신에게 맞는 코드를 컨택트 폼플러그인의 사용 중인 폼 설정 탭 중 ‘Additional Settings’ 섹션에 입력하면 됩니다.
적용이후
웹사이트 방문자 중에서 컨택트 폼 7을 통해 전송 완료를 하게 되는 모든 신호가 구글 애널리틱스내에 데이터로 쌓이게 되고, 이 목표가 방문자 중에서 어느 정도 달성되었는지 추적할 수 있게 됩니다.
좋은 정보 감사합니다.
Contact7 폼이 아닌 다른 플러그인의 경우 어떻게 additional setting 을 할 수 있는지요?
additional setting은 컨택트 폼 7 의 고유 기능이고요.
다른 플러그인의 경우 완료시 페이지 전환이 된다면 추가기능이 필요없을 거고, 컨택트 폼 7 처럼 ajax 로 처리된다면, 플러그인 내부에서 추가기능을 제공하는 것이 있는지 개발자에게 물어봐야 할 거 같습니다.