고객 지원 문의

이메일로 답장드리며, 보통 이틀 안에 회신합니다.

Google reCAPTCHA가 이 제출을 악용 여부에 대해 확인하며, 이 과정에서 데이터가 Google로 전송됩니다. 스크립트는 이 양식을 열 때만 불러옵니다.

← 전체 글

버튼 클릭 대신 양식 성공 측정

· Lukas Wojcik

제출 버튼 클릭, 양식 제출, 처리 완료는 서로 다른 이벤트입니다. 클릭 뒤에 검증 오류, 요청 실패, 서버 거부가 발생할 수 있습니다. Stats4U는 자동 연락 범주, 표식이 있는 제출, 명시적인 양식 성공 이벤트를 제공합니다. 어떤 방식을 선택하는지가 보고서의 실제 의미를 결정합니다.

123
  1. 제출
  2. 애플리케이션 결과
  3. 성공 이벤트

필요한 측정만 활성화

  1. 내 카운터로 소유 카운터를 연 다음 대시보드와 도구와 연락 동작를 엽니다.
  2. 측정 설정에서 해당 클릭 범주에는 전화, 이메일 및 다운로드 클릭 자동 집계을, 표식이 있는 제출과 확인된 성공에는 표시된 양식 제출 및 확인된 양식 성공 집계을 활성화합니다.
  3. 저장를 선택하고 웹사이트에서 생성된 JavaScript 연동을 사용하는지 확인합니다.

자동 연락 범주는 contact-email, contact-phone, download 같은 동작 이름을 사용합니다. 이는 이메일 배달, 통화 응답, 다운로드 완료가 아니라 클릭을 나타냅니다. 이벤트는 주소, 전화번호, 양식 필드 내용을 보내지 않습니다.

양식 제출에 표식 추가

양식 요소에 안정적이며 개인 정보가 아닌 양식 이름을 추가합니다. 이름은 방문자를 식별하는 대신 용도를 설명해야 합니다. 다음 예시는 문의 양식에 표식을 추가합니다.

<form data-s4u-form="contact">
  <!-- Existing form controls and submission handling -->
</form>

브라우저가 양식을 제출하면 이 표식은 form-submitted-contact를 생성합니다. 서버가 이를 수락하거나 처리했다는 증거는 아닙니다. 기존 검증 및 처리 코드는 유지합니다. 측정 표식을 추가해도 양식 처리가 구현되지는 않습니다.

실제 성공 시점에 성공 확인

사용자 지정 양식에서는 애플리케이션이 처리를 성공적으로 완료했다고 확인한 뒤에만 성공 함수를 호출합니다. HTTP 응답의 도착, 버튼 클릭, fetch Promise의 이행만으로는 충분하지 않습니다. 애플리케이션이 자체 서버 응답과 오류 상태를 해석해야 합니다.

if (window.s4u && typeof window.s4u.formSuccess === 'function') {
  window.s4u.formSuccess('contact');
}

양식 측정이 활성화되고 추적기를 사용할 수 있으면 이 호출은 form-success-contact를 생성합니다. 요청 전이나 무조건 실행되는 완료 처리기가 아니라 기존의 확인된 성공 분기에 넣습니다. Contact Form 7은 지원되는 메일 전송 성공 이벤트 연동을 사용할 수 있습니다. 일반 양식에는 애플리케이션의 명시적 성공 신호가 필요합니다.

성공과 실패 모두 확인

  1. 소유한 테스트 설치에서 유효한 제출과 애플리케이션이 거부하는 제출을 시도합니다. 확인된 성공만 성공 이벤트를 보내야 합니다.
  2. 측정 디버거로 실제 이벤트를 집계하지 않고 예상 이벤트 범주와 이름이 수락되는지 확인합니다.
  3. 보고서의 결과 이벤트 이름을 비교합니다. 제출 수가 성공 수보다 큰 것은 유용한 신호가 될 수 있지만 특정 오류를 입증하지는 않습니다.

디버거는 수락 조건을 확인하며 실제 양식의 성공적인 전달을 확인하지 않습니다. 애플리케이션 응답과 일반 추적 요청을 따로 조사합니다. 이벤트 레이블과 진단 속성에 이름이나 양식 내용을 넣지 않습니다.

다음 단계

애플리케이션에 성공 호출을 추가하기 전에 연동 안내를 확인합니다.

설치 안내 열기
광고