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

# DB 수집용 랜딩페이지 만들기

{% hint style="info" %}
사전에 DB를 수집할 클래스가 생성되어 있어야 합니다.
{% endhint %}

## 개요

로워드 브릿지 강의 호스팅에서 무료 강의 등 마케팅 용도로 회원가입이 아닌, 사용자 정보만 폼을 통해 입력 받는 DB 랜딩을 위한 랜딩페이지를 구성할 수 있습니다. [예시 페이지 확인하기](https://presslearn.co.kr/landing)

아래 사진과 같이 DB 수집용 랜딩페이지는 미리 수집용 클래스가 생성되어 있어야하며, 해당 클래스의 수강관리에서 수강생 정보를 다운로드 받거나 사용할 수 있습니다.

<figure><img src="/files/iZnuXUkZVUMzJYrQVLmW" alt=""><figcaption></figcaption></figure>

### 설정 방법

<figure><img src="/files/DOlhbKEPa5Jm9xfSGBnL" alt=""><figcaption></figcaption></figure>

**강의 호스팅 관리자 페이지 > 랜딩 페이지 리스트 > 등록하기 버튼**을 클릭하여 주세요.\
[랜딩 페이지 리스트](/design/landing.md)에 대한 설명은 여기를 클릭하여 확인해 주세요.

<figure><img src="/files/JfLHgclFB6BbuikLfJpV" alt=""><figcaption></figcaption></figure>

각 필수 항목들을 입력하시고, 랜딩 페이지 유형을 원페이지 유형으로 선택 후 저장 먼저 진행해 주세요.\
랜딩 페이지 유형은 설정 시 헤더 등이 노출되지 않는 하나의 랜딩 페이지 제작용으로 사용 가능합니다.

{% hint style="info" %}
원페이지 유형의 경우 Inner Container의 가로 값을 조절할 수 있습니다.
{% endhint %}

#### ledu STUDIO를 통해 페이지 꾸미기

<figure><img src="/files/UfdLZHFZldcLPR4IR7gB" alt=""><figcaption></figcaption></figure>

랜딩 페이지 내 ledu STUDIO 사용하기 버튼을 클릭하여 노코드 빌더 도구를 열어 주세요.\
일반적인 랜딩 페이지를 생성하고 디자인할 때와 동일한 구조로 만들 수 있어요.

로워드팀에서 운영하는 프레스런은 원페이지 너비를 850px를 사용하고 있어서 원페이지 너비 850px를 권장해요.\
원페이지 너비 설정은 아래 사진을 참고해주세요.

<figure><img src="/files/QiPqB6wXKOYaMHLQmypL" alt=""><figcaption></figcaption></figure>

원페이지 너비를 설정하였으면 ledu STUDIO를 이용해서 페이지를 꾸며주시면 되요.\
다만 입력 폼을 받기 위해서는 **배너형 컴포넌트를 클릭해서 DB 수집 배너 컴포넌트를 생성**해 주셔야해요.

좌측 하단 배너형 컴포넌트를 찾아 클릭하면 컴포넌트 생성기 모달 팝업에서 DB 수집 배너 컴포넌트를 선택하실 수 있어요.

<figure><img src="/files/gnpGmdkBxw2HJKMuWcVq" alt=""><figcaption></figcaption></figure>

여기서 해당 폼을 입력하면 수집된 DB가 연결될 클래스를 딱 1개만 단수 지정할 수 있으며, 광고성 정보를 보낼 예정이라면 에디터 입력하기를 클릭하여 광고 동의 약관을 기재해 주세요.

링크의 경우 폼 입력하고 나면 보내질 링크 주소를 입력하는 영역으로, 보통 카카오톡 오픈 채팅방 URL 링크를 많이 삽입하고 있습니다.

<table><thead><tr><th width="212.34765625">요소</th><th>설명</th></tr></thead><tbody><tr><td>클래스 선택</td><td>사용자 DB를 저장할 클래스를 지정할 수 있는 요소</td></tr><tr><td>링크</td><td>입력 폼에 데이터가 입력된 후 넘어갈 링크</td></tr><tr><td>광고성 정보 수신 동의 약관</td><td>광고성 정보 수신 동의 약관을 입력할 수 있는 요소</td></tr></tbody></table>

#### 타이머 배너 버튼 클릭 시 입력 폼으로 이동시키는 방법

<figure><img src="/files/6dkQsIHTDaPsBuyjhqOX" alt=""><figcaption></figcaption></figure>

위 사진과 같은 하단 타이머 배너의 버튼을 클릭하면 바로 입력폼으로 화면을 이동시키기 위해서는 컴포넌트를 먼저 생성해야합니다. ledu STUDIO 좌측 하단 배너형 컴포넌트를 클릭하여 주세요.

<figure><img src="/files/9YL4VOANTeY23VqXRpTa" alt=""><figcaption></figcaption></figure>

다양한 요소는 기호에 맞게 설정하시면 되며 우리가 주의깊게 봐야할 지점은 아래와 같습니다.\
링크 영역에 아래와 같은 주소를 입력해 주세요.

<figure><img src="/files/zhipB17OhyprsoQw0I8n" alt=""><figcaption></figcaption></figure>

랜딩 페이지 URL에 입력했던 정보를 그대로 도메인과 함께 입력 후 #submit을 입력해 주세요.

프레스런의 경우 아래와 같이 입력합니다.\
`https://presslearn.co.kr/landing#submit`

입력 후 저장해서 해당 랜딩 페이지를 접근하면 버튼 클릭 시 입력폼으로 바로 이동됩니다.

#### 폼이 제출될 경우 어떤 태그 이벤트가 발생하나요?

{% hint style="info" %}
미리 설정되지 않은 경우 태그 이벤트가 발생하지 않습니다.
{% endhint %}

폼이 제출되면 태그 매니저에 purchase\_livefree 라는 이벤트가 발생됩니다. 해당 태그는 [**구글 태그 매니저 설정**](/gtm/init.md) 페이지를 통해 확인하여 주세요.<br>

확인해야할 페이지

[**구글 태그 매니저 설정**](/gtm/init.md)\
[**이벤트 변수 설정하기**](/gtm/variable.md)\
[**트리거 및 태그 설정하기**](/gtm/trigger.md)

### 수집된 DB 확인하기

입력폼을 통해 신청된 회원의 DB는 클래스 관리 > 수강 관리에서 아래 사진과 같이 수집이되며, 수집된 DB를 통해 연락처로 SMS 마케팅이나 이메일 등을 발송하실 수 있습니다.

<figure><img src="/files/uOpxRp2HhVL8HtISJ3Iu" alt=""><figcaption></figcaption></figure>