# 웹 폼 활용하기

***

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

### 1-1. GA란?

**Google Analytics**(GA)는 웹사이트 및 앱의 트래픽과 사용자 행동을 추적하고 분석하는 구글의 **무료 웹 분석 도구**입니다. \
GA를 활용하면 방문자의 활동 데이터를 실시간으로 수집하고, 이를 다양한 측정 지표를 통해 분석할 수 있습니다. 

세일즈맵 웹 폼과 GA를 연동하면, 웹 폼에서의 전환율을 추적하고, 어떤 채널로 유입된 고객이 더 많이 전환되는지 분석할 수 있습니다. 이번 챕터에서는 웹 폼과 GA를 활용해 고객 행동 패턴을 분석하고 마케팅 전략을 최적화하는 방법을 알아봅니다.

### 1-2. 웹 폼 제출 완료 시 발생 이벤트

세일즈맵 웹 폼은 제출이 성공적으로 완료되면, 제출 완료 화면으로 이동합니다.

이때 세일즈맵 웹 폼 화면에서 글로벌 이벤트가 발생하는데, 이 이벤트를 통해 자바스크립트 로직을 실행할 수 있습니다. 

글로벌 이벤트는 **`window.postMessage()`**  함수를 사용하며, 이벤트에 전달되는 정보 중 data에는 웹 폼의 질문과, 해당 질문에 고객이 응답한 내용이 전달됩니다.

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

{% hint style="danger" %}
세일즈맵 웹 폼의 '제출 완료 유형'이 '제출 완료 페이지로 이동'이 아닌 '외부 링크로 이동'이거나 '문서 열람'일 경우, **onFormSubmitted 이벤트 수신이 정상적으로 되지 않을 수 있습니다.**\
\
만약 GA 연동도 해야하고, 리다이렉트도 해야한다면 아래 방법을 권장드립니다.

* 세일즈맵 redirect 기능 비활성화
* 자체적으로 세일즈맵에서 이벤트를 전달받으면 GA 전송하고 리다이렉트하도록 코드 작성
  {% endhint %}

### 1-3. GA에 웹 폼 제출 정보 전달하기

{% stepper %}
{% step %}

#### 웹 폼 생성하기

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2F4SNRhwWEyFxfZXOXelat%2Fimage.png?alt=media&#x26;token=37e4a147-1011-44ea-a89c-8f62db4453c8" alt="" width="387"><figcaption><p>웹폼 생성하기</p></figcaption></figure>

먼저 위와 같이 세일즈맵에서 웹 폼을 생성합니다.&#x20;
{% endstep %}

{% step %}

#### Google Tag Manager에서 변수 설정하기

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FYTHHJcfyzmPbuIZ04huP%2F%E1%84%8B%E1%85%B0%E1%86%B8%E1%84%91%E1%85%A9%E1%86%B7%20GA%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC1.png?alt=media&#x26;token=cf6bc0ae-9231-4a06-8589-0e9a78d8d239" alt=""><figcaption><p>Google Tag Manager에서 변수 설정1</p></figcaption></figure>

Google Tag Manager에서 웹 폼에 입력된 정보에 맞게 `변수`를 생성합니다. \
변수 유형은 `데이터 영역 변수`로 설정하고 `데이터 영역 변수 이름`은 temp\_email, temp\_name, temp\_company와 같이 웹 폼의 질문에 맞게 적절히 설정합니다.

\
\&#xNAN;*\*예시에서 변수 이름의 temp는 설명을 위해 임의로 추가한 내용입니다. 회사에 맞는 변수명을 지정해 주세요!*
{% endstep %}

{% step %}

#### Google Tag Manager에서 트리거 설정하기

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FH7CyP0wc75ZxgosLwR5w%2F%E1%84%8B%E1%85%B0%E1%86%B8%E1%84%91%E1%85%A9%E1%86%B7%20GA%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC3.png?alt=media&#x26;token=34b0cda7-5dec-4548-acbe-0f1279714cc4" alt=""><figcaption><p>Google Tag Manager에서 트리거 생성</p></figcaption></figure>

**트리거**는 **이벤트가 발생하는 조건**을 설정하는 단계로, 이벤트가 언제 발생할지 정의합니다.

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

*\*form\_submit과 같이 일반적이고 모든 폼에 적용할 수 있는 이름은 피하는 것이 좋습니다.*
{% endstep %}

{% step %}

#### Google Tag Manager에서 태그 설정하기

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FWJHu5G6Y0UCMgsbfyiJy%2F%E1%84%8B%E1%85%B0%E1%86%B8%E1%84%91%E1%85%A9%E1%86%B7%20GA%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC4.png?alt=media&#x26;token=cdd22322-1b9f-4ef4-a36a-9d2771a60caa" alt=""><figcaption><p>Google Tag Manager에서 태그 생성</p></figcaption></figure>

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

* `태그 유형`은 `GA4 이벤트`, `측정 ID` 는 `{{config-gtag}}` 로 설정합니다.
* `이벤트 이름`은 GA4에서 보고 싶은 이름에 맞게 설정합니다.
* `이벤트 매개변수`는 2번 단계에서 정의한 변수를 사용합니다. 왼쪽은 GA4에서 보고 싶은 이름, 오른쪽은 2번 단계에서 정의한 변수입니다.
* `트리거에`는 3번 단계에서 정의한 트리거를 사용합니다.
* 여기까지 설정하면 태그 매니저를 통해 temp\_form\_submit이라는 이벤트가 발생하면 GA4에 temp\_form\_submit이라는 이벤트가 찍히게 됩니다.
  {% endstep %}

{% step %}

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

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

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FXTxcXQqyWytxe9LzbLjT%2F%E1%84%8B%E1%85%B0%E1%86%B8%E1%84%91%E1%85%A9%E1%86%B7%20GA%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC5.png?alt=media&#x26;token=0b808078-0e30-4f7c-9b03-ab4a10ba92a9" alt=""><figcaption><p>Google Tag Manager에서 html 태그 생성</p></figcaption></figure>

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

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

  <figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FtA6v4v70FjpxziBEBPIW%2F%E1%84%8B%E1%85%B0%E1%86%B8%E1%84%91%E1%85%A9%E1%86%B7%20GA%20%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC6.png?alt=media&#x26;token=1566baef-d6ab-479a-a1a0-11f06204bd27" alt=""><figcaption></figcaption></figure>
* `트리거`는 `All Pages 페이지뷰`를 선택합니다.

{% hint style="info" %}

#### 화면에 작성된 예시 코드입니다. 복사 후 붙여넣기해 사용하세요.&#x20;

`<script type="text/javascript">`\
&#x20; `window.addEventListener('message', function(event) {`\
&#x20;   `if(event.data.type === 'salesmapWebFormCallback' && event.data.eventName === 'onFormSubmitted' && event.data.webFormId === 'f7d3a892-6b41-4e2c-9a58-3c7f5d8e9b21') {`\
&#x20;     `console.log('Form Submitted');`\
&#x20;     `dataLayer.push({`\
&#x20;       `event: 'sales_form_submit',`\
&#x20;       `name: event.data.data['이름'],`\
&#x20;       `email: event.data.data['이메일'],`\
&#x20;       `company_name: event.data.data['회사 이름'],`\
&#x20;       `employee_count: event.data.data['직원 수'],`\
&#x20;       `position: event.data.data['포지션'],`\
&#x20;     `})`\
&#x20;   `}`\
&#x20; `});`\
`</script>`
{% endhint %}
{% endstep %}

{% step %}

#### 테스트 및 검증

* 태그 관리자 제출: 변경 사항을 반영하려면 태그 관리자에서 제출을 눌러야 합니다.
* 세일즈맵 웹폼 임베드 및 이벤트 테스트: 세일즈맵 웹폼을 페이지에 임베드하고 제출 이벤트가 잘 작동하는지 확인합니다. Google Tag Manager의 미리보기 기능을 이용해 테스트를 진행할 수 있습니다.
* 테스트 성공 확인: 미리보기에서 `Form Submitted` 로그가 출력되고 Google Analytics에서 `temp_form_submit` 이벤트가 기록되었는지 확인합니다.
  {% endstep %}
  {% endstepper %}

### 1-4. FAQ

{% hint style="success" %}
Q: 웹 폼에 제출된 데이터가 Google Analytics로 전달되지 않는 것 같아요.\
A: 5번 스크립트에서 dataLayer의 변수 이름과 태그 매니저의 변수 이름이 정확히 일치하는지 확인해 보세요. 오타나 이름이 불일치하는 경우 데이터가 전달되지 않습니다.
{% endhint %}

{% hint style="success" %}
Q: 웹 폼이 제출되었을 때 이벤트가 발생하지 않아요\
A: 웹 폼 ID가 정확히 설정되었는지, 태그와 트리거가 올바르게 연결되었는지 확인해 보세요.
{% endhint %}

웹 폼 제출 정보를 GA에 전송하는 법에 대해 궁금하신 사항은, 언제든 세일즈맵 채널톡으로 문의해 주세요!

***

## 2. 세일즈맵 웹 폼에 UTM 파라미터 전달

### 2-1.  UTM 파라미터란?

**UTM 파라미터**는 **웹사이트 방문자**의 출처나 **캠페인 성과**를 추적하기 위해 URL에 추가하는 **매개변수**입니다. 주로 **디지털 마케팅 캠페인**에서, 트래픽이 어디로부터 유입되었는지, 어떤 광고나 링크가 효과적이었는지 파악하는 데 사용합니다.

| Parameter         | 설명                          | 예시                                  |
| ----------------- | --------------------------- | ----------------------------------- |
| **utm\_source**   | 트래픽이 유입된 채널                 | Google, Facebook, naver, linkedin 등 |
| **utm\_medium**   | 트래픽이 유입된 방법                 | cpc(클릭광고), email, social, display 등 |
| **utm\_campaign** | 특정 캠페인 또는 프로모션의 이름          | webinar\_sep, ebook\_launch 등       |
| **utm\_content**  | 트래픽이 유입된 세부 버튼·배너·문구        | banner\_a, banner\_b 등              |
| **utm\_term**     | 검색 키워드 (주로 검색 광고 성과 확인에 사용) | crm\_tool, b2b\_marketing 등         |

UTM 파라미터는 방문자의 출처, 캠페인 등 다양한 정보를 분석하는 데 유용합니다.

세일즈맵 웹 폼에 UTM 파라미터를 추가하면 방문자가 웹 폼을 제출할 때 마케팅 성과를 추적할 수 있습니다.

### 2-2. 웹 폼에 UTM 파라미터 전달하기

#### 1. UTM paramter 를 저장할 커스텀 필드 정의

먼저, 필요한 UTM 파라미터(예: utm\_source, utm\_campaign)를 저장할. **커스텀 필드**를 생성합니다.\
이 필드는 고객이나 리드의 커스텀 필드로 정의합니다.

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FCxOcyAsaIUJG98Z1zXcd%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20UTM%20paramter1.png?alt=media&#x26;token=23681a1a-65d3-4227-adbe-a86208fdbd7f" alt=""><figcaption><p>커스텀 필드 생성</p></figcaption></figure>

#### 2. UTM paramater 를 웹 폼에 정의

생성한 커스텀 필드를 웹폼에 정의합니다. 이때 유저가 직접 입력하는 정보가 아니므로 숨기기 처리합니다.

{% hint style="danger" %}
UTM parameter의 웹폼의 ***라벨 명은 1. 에서 생성한 커스텀 필드 이름과 동일***&#xD574;야 합니다. \
라벨 명이 커스텀 필드 이름과 다를 경우 웹폼이 제출되지 않거나 빈 값으로 저장될 수 있습니다.
{% endhint %}

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2Fmwmjd3GPEEbGbZUResvm%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20UTM%20paramter2.png?alt=media&#x26;token=15d0faf5-45aa-4d59-984e-9b8750bdc898" alt=""><figcaption><p>커스텀 필드 웹폼에 정의</p></figcaption></figure>

#### 3. 웹 폼에 UTM parameter 전달

웹폼에 UTM 파라미터를 전달하는 방법은 두 가지입니다.

1. **세일즈맵 웹폼 링크 직접 전달**
2. **우리 홈페이지에 웹폼 임베드 후 링크 전달**

#### 3-1. 쿼리 파라미터로 전달

세일즈맵 웹폼 링크나 우리 홈페이지 링크 뒤에 `utm_source`, `utm_campaign` 등의 정보를 **쿼리 파라미터** 형태로 추가합니다. 예를 들어 아래와 같이 여러 개의 UTM 파라미터를 연결할 때는 `&`로 구분합니다.

```
https://salesmap.kr/web-form/test?utm_source=fb&utm_campaign=C0001
```

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2F21QcLiFnLIfDTkWmML7P%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20UTM%20paramter3.png?alt=media&#x26;token=4c36792b-9e37-414a-9af2-26a840bd5815" alt=""><figcaption><p>웹폼에 UTM 파라미터 전달</p></figcaption></figure>

#### 3-2. 임베드 코드를 이용해 전달

웹폼을 홈페이지에 직접 임베드할 경우, 해당 웹페이지 URL 뒤에 UTM 파라미터를 추가하면 됩니다.\
예를 들어, 웹페이지 주소가 `https://salesmap.kr/demo` 이라면:

```
https://salesmap.kr/demo?utm_source=fb&utm_campaign=C0001
```

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FRTSfRKe3T5QrsdZEmoXR%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20UTM%20paramter4.png?alt=media&#x26;token=70610c27-a994-48c7-b9fb-52b28e1d12d7" alt=""><figcaption><p>웹폼을 홈페이지 직접 임베드</p></figcaption></figure>

#### **4. 제출 확인**

방문자가 웹폼을 제출했을 때, 설정한 UTM 파라미터가 잘 전달되고 저장되었는지 확인합니다.

예시:

* 전달된 UTM 파라미터: `utm_source=fb, utm_campaign=C0001`
* 웹폼 링크: `https://salesmap.kr/demo?utm_source=apption&utm_campaign=C0001`
* 예시 웹폼

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FRlJ86uRTNjATqN5x2Oix%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20UTM%20paramter5.png?alt=media&#x26;token=fb0b67da-1cd6-4768-802d-de8cf59933a0" alt=""><figcaption><p>제출 확인</p></figcaption></figure>

* 제출 내역 확인

<figure><img src="https://266453150-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMQWZWEhmSM7VgdI2ju3B%2Fuploads%2FrHBwNPXQSeeniVRIQLut%2F%E1%84%8B%E1%85%B0%E1%86%B8%20%E1%84%91%E1%85%A9%E1%86%B7%20UTM%20paramter6.png?alt=media&#x26;token=569a82a2-e052-4532-abf8-026c2878158a" alt=""><figcaption><p>제출 내역 확인</p></figcaption></figure>