랜딩 페이지 만들기
드래그 앤 드롭 에디터를 사용하여 랜딩 페이지를 만들고 맞춤 설정하는 방법을 알아보고, Braze에서 바로 잠재고객을 늘리고 선호도를 수집할 수 있습니다.
Prerequisites
랜딩 페이지 빌더에 액세스하려면 특정 권한이 필요합니다. 액세스 권한이 없는 경우 Braze 관리자에게 도움을 요청하세요.
랜딩 페이지 만들기
1단계: 새 초안 만들기
메시징 > 랜딩 페이지로 이동한 다음 랜딩 페이지 만들기를 선택합니다. 기존 랜딩 페이지의 이름을 선택하여 복제하거나 변경할 수도 있습니다.
2단계: 페이지 세부 정보를 입력합니다.
랜딩 페이지를 구성, 브랜딩 및 공유하는 데 도움이 되는 내부 및 공개 세부 정보를 추가하세요.
일반 세부 사항
랜딩 페이지의 이름과 설명을 입력합니다. 이러한 세부 정보는 내부 워크스페이스에서 페이지를 검색하는 데 사용됩니다. 고객에게 표시되지 않습니다.
사이트 세부 정보
메타태그를 설정하여 브라우저 탭에서 페이지가 나타나는 방식을 사용자 정의하고 검색 엔진 결과를 최적화하세요. 이는 고객에게 표시됩니다.
다음 모범 사례를 따를 것을 권장합니다:
필드 | 설명 | 추천 |
---|---|---|
사이트 제목 | 브라우저 탭에 표시되는 제목. | 최대 60자까지 사용하세요. |
메타 설명 | 검색 결과에 표시되는 텍스트 스니펫. | 140-160자 사이를 사용하십시오. |
파비콘 | 브라우저 탭에서 사이트 제목 옆에 나타나는 아이콘. | 종횡비 1:1을 사용하고, 지원되는 파일 형식은 PNG, JPEG 또는 ICO입니다. |
페이지 URL | 랜딩 페이지의 URL 경로입니다. 이 값은 양식을 제출할 때 자동으로 식별하기 위해 메시지에 삽입할 수 있는 랜딩 페이지 리퀴드 태그를 사용할 때에도 참조됩니다. | 이 값은 워크스페이스 전체에서 고유해야 합니다. |
3단계: 페이지 사용자 지정
아직 저장하지 않았다면 초안으로 저장을 선택합니다. 페이지 사용자 지정을 시작하려면 랜딩 페이지 편집을 선택합니다. 끌어서 놓기 편집기에는 사용 사례에 맞게 사용자 지정할 수 있는 기본 템플릿이 미리 로드됩니다.
편집기는 랜딩 페이지 구성에 기본 블록과 양식 블록이라는 두 가지 유형의 구성 요소를 사용합니다. 모든 블록은 한 줄에 배치되어야 합니다.
기본 블록
이러한 블록을 사용하여 콘텐츠를 추가하고 랜딩 페이지의 레이아웃을 사용자 지정할 수 있습니다.
블록 유형 | 설명 |
---|---|
제목 | 콘텐츠에 제목이나 제목을 추가할 수 있는 텍스트 블록입니다. 섹션을 구성하고 가독성을 높이는 데 유용합니다. |
단락 | 긴 설명이나 추가 컨텍스트를 위한 텍스트 블록입니다. 서식 있는 텍스트 서식을 지원합니다. |
버튼 | 링크 열기 또는 양식 제출과 같이 사용자를 지정된 작업으로 안내하는 클릭 가능한 요소입니다. |
라디오 버튼 | 사용자가 선택할 수 있는 옵션 목록을 추가합니다. 제출되면 사용자 프로필은 관련 사용자 지정 속성을 기록합니다. |
이미지 | 이미지를 표시하기 위한 블록입니다. 이미지를 업로드하거나 외부 소스를 참조할 수 있는 URL을 제공할 수 있습니다. |
링크 | 사용자가 클릭하여 지정된 URL로 이동할 수 있는 하이퍼링크입니다. 텍스트에 삽입하거나 독립형으로 사용할 수 있습니다. |
공백 | 요소 사이에 세로 간격을 추가하여 레이아웃과 가독성을 개선하는 보이지 않는 블록입니다. |
사용자 지정 코드 | 고급 사용자 지정을 위해 사용자 지정 HTML, CSS 또는 JavaScript를 삽입하고 실행할 수 있는 블록입니다. |
텍스트 스팬
To apply specific styling to text blocks without custom code, highlight the text you want to style and then select Wrap with span for style.
Adjust the span properties to update your text styling, which includes:
- Font family, weight, size
- Line height
- Letter spacing
- Text alignment and color
- Block padding
양식 블록
이 블록을 사용하여 사용자가 제출한 데이터를 Braze의 프로필에 연결하는 양식을 만들 수 있습니다. 양식 블록을 사용하는 경우 확인 상태에 대한 추가 랜딩 페이지도 만들어야 한다는 점을 기억하세요.
블록 유형 | 설명 |
---|---|
이메일 캡처 | 이메일 주소를 위한 양식 필드입니다. 제출된 이메일 주소는 Braze의 해당 사용자 프로필에 추가됩니다. |
전화 캡처 | 전화번호를 입력하는 양식 필드입니다. 제출하면 해당 사용자는 SMS 또는 WhatsApp 구독 그룹에 가입됩니다. |
입력 필드 | 표준 속성(예: 이름 및 성)을 지원하는 양식 필드 또는 선택한 사용자 지정 속성 문자열입니다. |
드롭다운 | 사용자는 미리 정의된 목록에서 항목을 선택할 수 있습니다. 목록에 사용자 지정 속성 문자열을 추가할 수 있습니다. |
확인란 | 사용자가 이 확인란을 선택하면 블록의 속성이 true 로 설정됩니다. 선택하지 않으면 속성이 false 로 설정됩니다. |
양식이 있는 랜딩 페이지를 만든 후에는 반드시 해당 랜딩 페이지 Liquid 태그를 메시지에 삽입하세요. 이 태그를 사용하면 Braze는 기존 사용자가 양식을 제출할 때 자동으로 기존 사용자 프로필을 식별하고 업데이트할 수 있습니다.
페이지 컨테이너 스타일
페이지 컨테이너 탭에서 랜딩 페이지의 모든 관련 컴포넌트 블록에 적용될 스타일을 설정할 수 있습니다. 이 스타일은 특정 블록으로 재정의하는 경우를 제외하고 페이지의 모든 곳에서 사용됩니다.
페이지 컨테이너 수준 스타일을 설정한 후 블록 수준에서 스타일을 커스텀하는 것이 좋습니다. 페이지 전체에 배경 이미지를 추가할 수도 있습니다.
선택 및 필수 필드
양식 필드의 필수 또는 선택 여부를 선택할 수 있습니다. 필수 필드는 반드시 입력해야 양식을 제출할 수 있습니다. 선택 필드는 사용자가 비워 두거나 선택하지 않을 수 있습니다.
예를 들어 양식 제출 전에 동의 캡처를 적용하려면 필수 필드 입력을 사용 설정하여 적절한 고지 사항 텍스트와 함께 확인란을 필수로 설정할 수 있습니다.
4단계: 확인 페이지 만들기(선택 사항)
랜딩 페이지에 양식이 포함되어 있지 않은 경우 다음 단계를 계속 진행합니다.
랜딩 페이지에 양식이 포함되어 있는 경우 확인 환경으로 사용할 두 번째 랜딩 페이지를 만듭니다. 이 페이지에서는 사용자에게 감사를 표시하거나 양식 제출 후 다음 단계를 안내해야 합니다.
확인 페이지로 연결합니다:
- 양식에서 제출 버튼을 선택합니다.
- 웹 URL 열기 작업을 사용하여 확인 페이지로 연결합니다.
확인 페이지를 포함하지 않으면 사용자가 양식이 성공적으로 제출되었는지 알지 못할 수 있습니다. 여정을 완료하려면 항상 확인 경험을 포함하세요.
5단계: 페이지 미리보기
편집기의 미리보기 탭에서 랜딩 페이지를 미리 볼 수 있습니다. 랜딩 페이지를 초안으로 저장한 후 랜딩 페이지로 이동하여 랜딩 페이지 옆에 있는 URL 복사를 선택하여 URL을 방문할 수 있습니다. 협력자와 URL을 공유할 수도 있습니다.
게시하기 전에 다음 사항을 확인하세요:
- 플랜의 게시된 랜딩 페이지 한도를 초과하지 않았습니다.
- 각 양식 기반 페이지는 웹 URL 열기 작업을 사용하여 확인 페이지로 연결됩니다.
- 모든 필수 페이지 필드(예: URL 경로 및 제목)가 완료되었습니다.
준비가 완료되면 랜딩 페이지 게시를 선택합니다.
템플릿 사용
랜딩 페이지 템플릿을 사용하여 다음 캠페인을 위한 템플릿을 만드세요. 이러한 템플릿은 랜딩 페이지 편집기와 대시보드의 템플릿 섹션(템플릿 > 랜딩 페이지 템플릿)에서 모두 액세스하고 관리할 수 있습니다. 랜딩 페이지 템플릿에는 이름이 필요하며 선택적으로 설명이 필요합니다.
템플릿 관리
랜딩 페이지 템플릿을 미리 보고, 보관하고, 편집하거나 복제할 수 있습니다. 랜딩 페이지를 편집할 때 랜딩 페이지를 템플릿으로 저장하거나 템플릿을 변경하거나 랜딩 페이지의 콘텐츠를 삭제할 수도 있습니다.
분석 보기
랜딩 페이지의 효과를 분석하려면 메시징 > 랜딩 페이지로 이동한 다음 게시한 랜딩 페이지를 선택합니다. 여기에서 페이지 조회 수, 페이지 클릭 수, 페이지 제출 수 및 랜딩 페이지의 제출 비율을 추적할 수 있습니다.
양식 제출 오류 처리
사용자가 입력이 누락되었거나 지원되지 않는 양식을 제출하려고 하면 일반적인 오류 메시지가 표시되고 제출할 수 없습니다.
일반적인 원인:
- 필수 입력란은 비워 둡니다.
- 텍스트 입력에 특수 문자 사용
- 필수 확인란이 선택되지 않았습니다.
사용자에게 표시되는 오류 메시지는 사용자 지정할 수 없습니다. 게시하기 전에 랜딩 페이지를 미리 보고 필드 동작을 확인합니다.