도입문의블로그가이드 영상

웹폼 제출 정보 GA에 전송하기

웹폼 제출이 완료 되었을 때의 이벤트와 제출 정보를 받을 수 있습니다.

세일즈맵 웹폼 제출 이벤트 발생 시 Google Analytics로 이벤트를 전달하여 데이터를 추적하고 분석할 수 있습니다. 이를 통해 사용자 행동 패턴을 파악하여 최적화를 진행할 수 있습니다.

제출 완료시 발생하는 이벤트

세일즈맵의 웹폼이 제출되고 제출이 성공적으로 완료되면 제출 완료 화면으로 넘어갑니다. 이때 세일즈맵 웹폼 화면에서 글로벌 이벤트를 발생시킵니다. 이 이벤트를 사용하면 제출 정보를 이용하여 커스텀한 자바스크립트 로직을 실행할 수 있습니다. 글로벌 이벤트는 window.postMessage() 를 사용합니다.

이벤트에 전달하는 정보는 다음과 같습니다. data 에는 웹폼의 라벨과 해당 라벨에 고객이 입력한 값이 전달됩니다.

{
    type: 'salesmapWebFormCallback',
    eventName: 'onFormSubmitted',
    webFormId: '웹폼 아이디',
    data: {
        '이름': 'Salesmap',
        '이메일': 'test@example.com',
        ...
      }
  }

Google Analytics로 이벤트와 데이터 전달하기

1. 웹폼 생성하기

먼저 세일즈맵 웹폼을 생성합니다. 아래 이미지는 웹폼 화면의 예시입니다:

2. Google Tag Manager에서 변수 설정하기

Google Tag Manager에서 웹폼에 입력된 정보에 맞게 변수를 생성합니다. 변수 유형은 데이터 영역 변수로 설정하고 데이터 영역 변수 이름은 웹폼 라벨에 맞게 적절하게 설정합니다.

다음과 같이 temp_email, temp_name, temp_company 라는 변수를 생성합니다. *temp와 같은 변수명은 설명을 위해 임의로 추가한 내용입니다. 회사에 맞는 변수명을 지정해 주세요!

3. Google Tag Manager에서 트리거 생성하기

Google Tag Manager에서 어떤 조건에서 Google Analytics로 이벤트를 보낼지 트리거를 설정합니다. 트리거 유형은 맞춤 이벤트로 설정하고 이벤트 이름은 웹폼에 맞게 적절할게 설정합니다.

💡이벤트 이름에 form_submit 이라는 이름은 피하는 것이 좋습니다.

4. Google Tag Manager에서 태그 생성하기

Google Tag Manager에서 태그를 생성합니다.

  • 태그 유형은 GA4 이벤트, 측정 ID 는 {{config-gtag}} 로 설정합니다.

  • 이벤트 이름은 GA4에서 보고 싶은 이름에 맞게 설정합니다.

  • 이벤트 매개변수는 2번 단계에서 정의한 변수를 사용합니다. 왼쪽은 GA4에서 보고 싶은 이름, 오른쪽은 2번 단계에서 정의한 변수입니다.

  • 트리거에는 3번 단계에서 정의한 트리거를 사용합니다.

  • 여기까지 설정하면 태그 매니저를 통해 temp_form_submit이라는 이벤트가 발생하면 GA4에 temp_form_submit이라는 이벤트가 찍히게 됩니다.

5. Google Tag Manager에서 html 태그 생성하기

Google Tag Manager에서 태그를 하나 더 생성합니다. Google Analytics가 설치된 페이지에 스크립트를 추가하는 작업입니다. 이 스크립트는 세일즈맵 웹폼에서 제출 이벤트를 받아 Google Tag Manager의 트리거를 실행시키는 역할을 합니다.

  • 태그 유형은 맞춤 HTML으로 설정하고 다음과 같이 입력합니다.

  • 아래에서 //으로 표시된 부분은 설명을 위해 추가한 내용으로, 아래의 코드를 복사해도 내용이 저장되지 않습니다.

<script type="text/javascript">
  window.addEventListener('message', function(event) {
    if(event.data.type === 'salesmapWebFormCallback' && event.data.eventName === 'onFormSubmitted' && event.data.webFormId === 'bdb7718e-c90a-4ca1-bdae-a6629ab9b5a6'){
      console.log('Form Submitted');
      dataLayer.push({
        // event 는 트리거 이벤트명입니다.
        // temp_email 은 변수명입니다.
        // ['이메일'] 로 표시된 부분은 웹폼 내 라벨명입니다.
        event: 'temp_form_submit',
        temp_email: event.data.data['이메일'],
        temp_name: event.data.data['이름'],
        temp_company: event.data.data['회사'],
      })
    }
  });
</script>

  • event.data.webFormId를 잘 설정해주세요.

    💡webFormId는 사용하는 세일즈맵 웹폼 상세 화면 url의 해당 부분을 의미합니다.

  • 트리거는 All Pages 페이지뷰를 선택합니다.

6. 테스트 및 검증

  • 태그 관리자 제출: 변경 사항을 반영하려면 태그 관리자에서 제출을 눌러야 합니다.

  • 세일즈맵 웹폼 임베드 및 이벤트 테스트: 세일즈맵 웹폼을 페이지에 임베드하고 제출 이벤트가 잘 작동하는지 확인합니다. Google Tag Manager의 미리보기 기능을 이용해 테스트를 진행할 수 있습니다.

  • 테스트 성공 확인: 미리보기에서 Form Submitted 로그가 출력되고 Google Analytics에서 temp_form_submit 이벤트가 기록되었는지 확인합니다.

자주 발생하는 문제 및 해결 방법

  • 데이터가 전달되지 않는 경우: 5번 스크립트에서 dataLayer의 변수 이름과 태그 매니저의 변수 이름이 정확히 일치하는지 확인하세요. 오타나 불일치가 있을 경우 데이터가 제대로 전달되지 않을 수 있습니다.

  • 이벤트가 발생하지 않는 경우: 웹폼 ID가 정확히 설정되었는지, 태그와 트리거가 올바르게 연결되었는지 확인합니다.

웹폼 제출 정보를 GA에 전송하는 방법 관련하여 궁금하신 사항이 있으신 경우, 세일즈맵 팀에게 문의해 주세요!

Previous웹폼 필드Next웹폼에 UTM paramter 전달

Last updated

Was this helpful?