Skip to content

랜딩 페이지 만들기

드래그 앤 드롭 에디터를 사용하여 랜딩 페이지를 만들고 맞춤 설정하는 방법을 알아보고, Braze에서 바로 잠재고객을 늘리고 선호도를 수집할 수 있습니다.

Prerequisites

랜딩 페이지 빌더에 액세스하려면 특정 권한이 필요합니다. 액세스 권한이 없는 경우 Braze 관리자에게 도움을 요청하세요.

랜딩 페이지 만들기

1단계: 새 초안 만들기

메시징 > 랜딩 페이지로 이동한 다음 랜딩 페이지 만들기를 선택합니다. 기존 랜딩 페이지의 이름을 선택하여 복제하거나 변경할 수도 있습니다.

Braze 대시보드의 랜딩 페이지 섹션입니다.

2단계: 페이지 세부 정보를 입력합니다.

랜딩 페이지를 구성, 브랜딩 및 공유하는 데 도움이 되는 내부 및 공개 세부 정보를 추가하세요.

일반 세부 사항

랜딩 페이지의 이름과 설명을 입력합니다. 이러한 세부 정보는 내부 워크스페이스에서 페이지를 검색하는 데 사용됩니다. 고객에게 표시되지 않습니다.

사이트 세부 정보

메타태그를 설정하여 브라우저 탭에서 페이지가 나타나는 방식을 사용자 정의하고 검색 엔진 결과를 최적화하세요. 이는 고객에게 표시됩니다.

다음 모범 사례를 따를 것을 권장합니다:

3단계: 페이지 사용자 지정

아직 저장하지 않았다면 초안으로 저장을 선택합니다. 페이지 사용자 지정을 시작하려면 랜딩 페이지 편집을 선택합니다. 끌어서 놓기 편집기에는 사용 사례에 맞게 사용자 지정할 수 있는 기본 템플릿이 미리 로드됩니다.

드래그 앤 드롭 편집기에서 생성 중인 랜딩 페이지 예시입니다.

편집기는 랜딩 페이지 구성에 기본 블록과 양식 블록이라는 두 가지 유형의 컴포넌트를 사용합니다. 모든 블록은 한 줄에 배치되어야 합니다.

'구축' 섹션에는 '행' 및 '양식 블록'이 포함되어 있습니다.

이러한 블록을 사용하여 콘텐츠를 추가하고 랜딩 페이지의 레이아웃을 사용자 지정할 수 있습니다.

텍스트 스팬

커스텀 코드 없이 텍스트 블록에 특정 스타일을 적용하려면 스타일을 지정하려는 텍스트를 강조 표시한 다음 스팬으로 줄 바꿈을 선택하여 스타일을 지정합니다.

다양한 글꼴 크기와 색상 등 다양한 스타일이 적용된 텍스트 섹션이 있는 텍스트 상자와 '스타일을 위해 스팬으로 줄 바꿈' 옵션이 있는 툴바를 표시하는 강조 표시된 섹션이 있습니다.

스팬 속성을 조정하여 텍스트 스타일을 업데이트합니다:

  • 글꼴 패밀리, 무게, 크기
  • Line height
  • 문자 간격
  • 텍스트 정렬 및 색상
  • 블록 패딩

다양한 옵션으로 스팬 속성 패널을 업데이트할 수 있습니다.

이 블록을 사용하여 사용자가 제출한 데이터를 Braze의 프로필에 연결하는 양식을 만들 수 있습니다. 양식 블록을 사용하는 경우 확인 상태에 대한 추가 랜딩 페이지도 만들어야 한다는 점을 기억하세요.

새 고객을 등록하고 이메일로 할인 코드를 보내는 양식 블록입니다.

페이지 컨테이너 스타일

페이지 컨테이너 탭에서 랜딩 페이지의 모든 관련 컴포넌트 블록에 적용될 스타일을 설정할 수 있습니다. 이 스타일은 특정 블록으로 재정의하는 경우를 제외하고 페이지의 모든 곳에서 사용됩니다.

페이지 컨테이너 수준 스타일을 설정한 후 블록 수준에서 스타일을 커스텀하는 것이 좋습니다. 페이지 전체에 배경 이미지를 추가할 수도 있습니다.

배경 이미지, 색상, 테두리 세부 정보 및 콘텐츠 스타일을 커스텀할 수 있는 옵션이 있는 '페이지 컨테이너' 섹션입니다.

사용자 기기에 대한 반응성

작은 화면에서 세로로 열을 쌓아 랜딩 페이지를 사용자 기기의 크기에 맞게 반응하도록 만들 수 있습니다. 이 기능을 인에이블하려면 반응형으로 만들려는 행에 열을 추가한 다음 열 커스텀 섹션에서 작은 화면에서 세로 스택을 토글합니다.

인에이블먼트가 활성화되면 열을 역으로 쌓아 작은 화면에서 여러 열 콘텐츠의 세로 순서를 제어할 수도 있습니다. 이렇게 하면 커스텀 코드 없이도 모바일에서 페이지의 모양과 느낌을 개선할 수 있습니다.

'작은 화면에 세로로 쌓기' 토글은 '열 커스텀' 섹션에 있습니다.

선택 및 필수 필드

양식 필드의 필수 또는 선택 여부를 선택할 수 있습니다. 필수 필드는 반드시 입력해야 양식을 제출할 수 있습니다. 선택 필드는 사용자가 비워 두거나 선택하지 않을 수 있습니다.

예를 들어 양식 제출 전에 동의 캡처를 적용하려면 필수 필드 입력을 사용 설정하여 적절한 고지 사항 텍스트와 함께 확인란을 필수로 설정할 수 있습니다.

'필수 입력 필드' 토글이 선택된 확인란 양식 필드입니다.

4단계: 확인 페이지 만들기(선택 사항)

랜딩 페이지에 양식이 포함되어 있지 않은 경우 다음 단계를 계속 진행합니다.

랜딩 페이지에 양식이 포함되어 있는 경우 확인 환경으로 사용할 두 번째 랜딩 페이지를 만듭니다. 이 페이지에서는 사용자에게 감사를 표시하거나 양식 제출 후 다음 단계를 안내해야 합니다.

확인 페이지로 연결합니다:

  • 양식에서 제출 버튼을 선택합니다.
  • 웹 URL 열기 작업을 사용하여 확인 페이지로 연결합니다.

확인 페이지를 포함하지 않으면 사용자가 양식이 성공적으로 제출되었는지 알지 못할 수 있습니다. 여정을 완료하려면 항상 확인 경험을 포함하세요.

5단계: 페이지 미리보기

편집기의 미리보기 탭에서 랜딩 페이지를 미리 볼 수 있습니다. 랜딩 페이지를 초안으로 저장한 후 랜딩 페이지로 이동하여 랜딩 페이지 옆에 있는 URL 복사를 선택하여 URL을 방문할 수 있습니다. 협력자와 URL을 공유할 수도 있습니다.

메뉴가 열려 있는 랜딩 페이지에 'URL 복사' 옵션이 표시됩니다.

게시하기 전에 다음 사항을 확인하세요:

  • 플랜의 게시된 랜딩 페이지 한도를 초과하지 않았습니다.
  • 각 양식 기반 페이지는 웹 URL 열기 작업을 사용하여 확인 페이지로 연결됩니다.
  • 모든 필수 페이지 필드(예: URL 경로 및 제목)가 완료되었습니다.

준비가 완료되면 랜딩 페이지 게시를 선택합니다.

템플릿 사용

랜딩 페이지 템플릿을 사용하여 다음 캠페인을 위한 템플릿을 만드세요. 이러한 템플릿은 랜딩 페이지 편집기와 대시보드의 템플릿 섹션(템플릿 > 랜딩 페이지 템플릿)에서 모두 액세스하고 관리할 수 있습니다. 랜딩 페이지 템플릿에는 이름이 필요하며 선택적으로 설명이 필요합니다.

템플릿 관리

랜딩 페이지 템플릿을 미리 보고, 보관하고, 편집하거나 복제할 수 있습니다. 랜딩 페이지를 편집할 때 랜딩 페이지를 템플릿으로 저장하거나 템플릿을 변경하거나 랜딩 페이지의 콘텐츠를 삭제할 수도 있습니다.

랜딩 페이지를 저장, 변경, 삭제할 수 있는 옵션이 있는 드롭다운입니다.

분석 보기

랜딩 페이지의 효과를 분석하려면 메시징 > 랜딩 페이지로 이동한 다음 게시한 랜딩 페이지를 선택합니다. 여기에서 페이지 조회 수, 페이지 클릭 수, 페이지 제출 수 및 랜딩 페이지의 제출 비율을 추적할 수 있습니다.

랜딩 페이지의 분석 섹션입니다.

양식 제출 오류 처리

사용자가 입력이 누락되었거나 지원되지 않는 양식을 제출하려고 하면 일반적인 오류 메시지가 표시되고 제출할 수 없습니다.

일반적인 원인:

  • 필수 입력란은 비워 둡니다.
  • 텍스트 입력에 특수 문자 사용
  • 필수 확인란이 선택되지 않았습니다.

사용자에게 표시되는 오류 메시지는 사용자 지정할 수 없습니다. 게시하기 전에 랜딩 페이지를 미리 보고 필드 동작을 확인합니다.
Github   GitHub 에서 이 페이지를 편집합니다.
New Stuff!