> For the complete documentation index, see [llms.txt](https://docs.salesmap.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.salesmap.kr/marketing/web-form/utilizing-web-form.md).

# 웹 폼 활용하기

***

## 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="/files/zOJsAcPxIG1yQEDag1ci" alt="" width="387"><figcaption><p>웹폼 생성하기</p></figcaption></figure>

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

{% step %}

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

<figure><img src="/files/0YTgQdITcs1BV8OKBniT" 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="/files/htM73dmROxg41PeYQGUt" alt=""><figcaption><p>Google Tag Manager에서 트리거 생성</p></figcaption></figure>

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

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

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

{% step %}

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

<figure><img src="/files/N9mHW9Mo5I8CnxCm5pxK" 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="/files/FM0hIQO3HYtyUhCcNLwq" alt=""><figcaption><p>Google Tag Manager에서 html 태그 생성</p></figcaption></figure>

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

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

  <figure><img src="/files/AMDDZbyIMd2aNJHKeAwQ" 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="/files/Y9zN5b0ad1VkozW8mHhI" alt=""><figcaption><p>커스텀 필드 생성</p></figcaption></figure>

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

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

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

<figure><img src="/files/NlOEB7vWhDjQu0hPxTnu" 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="/files/Pal44jNxNgQqN36cQLJ9" 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="/files/42XRL6byn90O7Ji9zWnb" 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="/files/7f65jbNLaCuDYbLi4uYo" alt=""><figcaption><p>제출 확인</p></figcaption></figure>

* 제출 내역 확인

<figure><img src="/files/sJk4xUNYNfZ9uwAgeRFZ" alt=""><figcaption><p>제출 내역 확인</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.salesmap.kr/marketing/web-form/utilizing-web-form.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.