많은 워드프레스 사이트에서 문의나 신청을 받는 화면을 만드는 폼(form) 빌더로 컨택트 폼 7(contact form 7) 플러그인을 사용합니다.
이 플러그인은 2015년 9월 현재 3천만 이상의 다운로드와 백만이상이 실사용중인 대단한 플러그인입니다.(후지산이 그려진 이미지를 가진 … 일본인이 만든 플러그인입니다)
이 플러그인을 이용해서 만든 웹사이트에서 구글 애널리틱스를 사용해 목표(goal) 전환 추적(tracking : 웹사이트 내의 특정한 목적을 만들어서 그 목적이 이루어지기까지의 경로를 측정하여 얼마만큼 달성되었는지를 알아냅니다. 예를 들어 내 웹사이트에 방문자가 100명이라면 이중 몇 명이 물건을 구매하고, 구매하기 전까지 어떤 경로로 내 사이트에 들어왔고, 어떤 페이지에 도착하였으며 그 이후 어떤 페이지를 통해 구매되었는지 등을 알아낼 수 있습니다)을 하려면 한가지 문제가 있습니다. 구글 애널리틱스의 목표 추적은 주로 도달한 페이지(경로 도달)로 측정되는데 반면 컨택트 폼 7 플러그인은 모든 동작이(폼 입력검증/ 폼에러/ 폼전송완료 등) AJAX로 이루어진다는 것입니다. 바꾸어 말하면 폼 전송이 완료되어도 페이지의 변경(경로의 변경)이 생기지 않고, 폼 전송이 완료 되었다는 메세지만 나옵니다. 그러므로 구글 애널리틱스로 폼전송이 완료되었는지를 추적할 수 없습니다.
이것은 누군가 나의 웹사이트에 들어와서 특정 폼을 통해 구독신청/상담신청/상품구매 등 목표완성이 이루어졌을 때 이것이 얼마만큼의 효율성을 가지고 이루어졌는지 추적할 수 없다는 결론이 나옵니다.
그렇다고 아주 방법이 없는 것이 아닙니다.
다음과 같은 방법을 사용하면 쉽게 목표를 추적할 수 있습니다.

1. 구글 애널리스트 설정

먼저 특정 폼에서 전송완료(전송 버튼을 눌러서 유효성 검증을 통과하여 완료되는 순간)가 되었을 때 목적이 달성되는 것으로 간주하는 목표(goal)를 설정합니다.

  1. 폼이 설치된 웹사이트의 구글 애널리틱스 계정에 로그인합니다.
  2. 관리화면에서 목표로 들어갑니다.
    google-analytics-contact-form-7_01
  3. ‘목표’를 누릅니다.
  4. ‘1 목표설정’에서 ‘템플릿’이 아닌 ‘맞춤설정’을 고르고 ‘계속’을 눌러 다음 단계로 넘어갑니다.
  5. 두 번째 단계에서 자신이 정한 임의의 목표 이름을 기입하고, ‘유형’은 ‘도착’을 선택한 후 ‘계속’을 눌러 다음 단계로 넘어갑니다.
    google-analytics-contact-form-7_02
  6. ‘최종목표’는 목표가 완성되는 페이지입니다.
    ‘같음’을 선택하고, 페이지의 경로를 입력하는 칸에 원래 내 웹사이트의 특정 페이지를 입력하여 목표가 달성되는 것을 측정하는데, 이번에는 이 안에 내 웹사이트에는 존재하지 않는 ‘가상’의 페이지 이름을 만들어 넣습니다. (이 페이지가 어떻게 사용되는지는 이후에 알게 됩니다. 일단 어떤 이름이든 존재하지 않는 경로를 만들어서 입력한 후 기억해 둡니다)
    추가로 이 목표가 달성되었을 때 금전적으로 얼마의 가치가 있는지 ‘값’에서 임의로 설정할 수 있습니다.
    ‘유입경로’는 목표달성이 어떤 경로에서 이탈되는지 알 필요가 있을 때 설정합니다. 예를 들어 쇼핑몰 사이트면 물건을 판매할 때 특정 프로세스(프로덕트 상세페이지-장바구니-결제-결제완료)가 진행되는데 이 과정을 여기에 설정해 두면 어디에서 이탈하는 비율이 높은지 측정할 수 있습니다.
    google-analytics-contact-form-7_03
  7. ‘저장’을 누르면 한 개의 목표(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’ 섹션에 입력하면 됩니다.
google-analytics-contact-form-7_04

적용이후

웹사이트 방문자 중에서 컨택트 폼 7을 통해 전송 완료를 하게 되는 모든 신호가 구글 애널리틱스내에 데이터로 쌓이게 되고, 이 목표가 방문자 중에서 어느 정도 달성되었는지 추적할 수 있게 됩니다.

글쓴이 :
WPBOX.KR 운영자
AVADA.KR 운영자
EnnioLove.com 운영자
Facebook
everygofine@gmail.com
인기글
카페24 웹호스팅 보안서버 SSL 인증서 443 포트 사용
인스타그램 Access Token 과 UserID 가져오는 방법
워드프레스가 제한하는 파일을 업로드 하는 방법
워드프레스 우커머스 쇼핑몰 플러그인 한국형 배송 설정 정리
FTP 파일질라 전송시 한글파일 누락
워드프레스 업로드파일 용량 제한 올리기
워드프레스 쇼핑몰 플러그인 우커머스 설정
워드프레스 아리따 폰트 적용 방법
워드프레스 도메인변경
Woocommerce Quick Buy – 플러그인 : 우커머스 상품목록에 바로구매 버튼 넣기

2개의 댓글이 있습니다.

  1. 좋은 정보 감사합니다.
    Contact7 폼이 아닌 다른 플러그인의 경우 어떻게 additional setting 을 할 수 있는지요?

  2. additional setting은 컨택트 폼 7 의 고유 기능이고요.
    다른 플러그인의 경우 완료시 페이지 전환이 된다면 추가기능이 필요없을 거고, 컨택트 폼 7 처럼 ajax 로 처리된다면, 플러그인 내부에서 추가기능을 제공하는 것이 있는지 개발자에게 물어봐야 할 거 같습니다.

댓글 남기기

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