랜딩 페이지 만들기 및 게시

마케터는 계정 및 개인 여정에 통합할 페이지를 정의하고 게시할 수 있습니다. 새 랜딩 페이지를 추가할 때 기본 페이지와 하위 페이지를 구성하고, 콘텐츠를 디자인하고, 테스트하고, 게시합니다.

랜딩 페이지 워크플로 다이어그램

랜딩 페이지 사전 요구 사항 landing-page-prerequisites

마케터가 랜딩 페이지를 만들어 여정 및 캠페인을 지원하려면 먼저 다음 구성 및 자산을 사용해야 합니다.

  • 랜딩 페이지 하위 도메인 - 랜딩 페이지 호스팅 전용 하위 도메인을 설정합니다.
  • 랜딩 페이지 사전 설정 - 사전 설정은 랜딩 페이지에 적용되는 하위 도메인 및 기타 설정을 정의합니다.
  • 양식(데이터 캡처 사용 사례의 경우) - 양식을 랜딩 페이지에 포함하고 데이터를 Experience Platform에 제출하려는 경우 필요합니다.

랜딩 페이지 만들기 create-landing-page

  1. 왼쪽 탐색으로 이동하여 콘텐츠 관리 > 랜딩 페이지​를 선택합니다.

  2. 오른쪽 상단의 랜딩 페이지 만들기​를 클릭합니다.

  3. 페이지에서 유용한 제목(필수)과 설명(선택 사항)을 입력하십시오.

    제목 및 설명 기준:

    • 제목 - 최대 100자이며, 고유해야 하며 대소문자를 구분하지 않습니다.

    • 설명 - 최대 300자

    • Alpha, 숫자 및 특수 문자가 허용됩니다.

    • 예약된 문자가 허용되지 않음: \ / : * ? " < > |

    랜딩 페이지 만들기 {width="600"}

  4. 사전 설정​을 선택하세요.

    제품 관리자 은(는) 랜딩 페이지에 사용되는 하위 도메인 및 기타 설정을 정의하기 위해 사전 설정을 구성합니다. 사전 설정을 선택한 다음 사전 설정 보기​를 클릭하여 사전 설정 세부 정보를 열고 설정을 확인하여 랜딩 페이지 요구 사항과 일치하는지 확인할 수 있습니다.

  5. 만들기​를 클릭합니다.

    기본 페이지와 해당 속성이 표시됩니다.

    새 랜딩 페이지 - 기본 페이지 속성 {width="700" modal="regular"}

기본 페이지 구성 configure-primary-page

  1. 필요에 따라 페이지 이름​을 변경합니다. 기본적으로 기본 페이지​입니다.

  2. 페이지 URL의 끝 부분을 정의합니다.

    선택한 사전 설정에 따라 URL의 첫 번째 부분이 결정됩니다.

    note caution
    CAUTION
    랜딩 페이지 URL은 고유해야 합니다.
    이 URL을 게시한 경우에도 웹 브라우저에 복사하여 붙여넣으면 랜딩 페이지에 액세스할 수 없습니다. 미리보기 기능을 사용하여 테스트합니다.
  3. 익명 랜딩 페이지를 원하는 경우 식별된 사용자 필요 옵션을 비활성화하십시오.

  4. 달력( 달력 아이콘 ) 아이콘을 클릭하여 페이지 만료​를 설정합니다.

    만료 날짜를 선택한 후 페이지 만료 시 작업을 선택합니다.

    • 리디렉션 URL - 리디렉션으로 사용할 페이지의 URL을 입력합니다.

      랜딩 페이지 만료 - 리디렉션 URL {width="400"}

    • 브라우저 오류 - 페이지 대신 표시할 오류 텍스트를 입력하십시오.

      랜딩 페이지 만료 - 브라우저 오류 {width="400"}

콘텐츠 디자인 유형 선택 choose-design-type

페이지에 대한 컨텐츠​를 추가하려면 Designer 열기​를 클릭합니다. 기본 랜딩 페이지 만들기 홈 페이지가 로드되고 디자인 프로세스는 디자인을 시작할 방법을 선택하는 것으로 시작됩니다.

랜딩 페이지 디자인을 시작할 방법을 선택하세요 {width="800" modal="regular"}

랜딩 페이지 디자인을 시작하기 위한 기본 방법을 선택한 후 시각적 디자인 도구를 사용하여 페이지 콘텐츠를 완료합니다.

처음부터 디자인 design-from-scratch

시각적 콘텐츠 편집기를 사용하여 랜딩 페이지 콘텐츠의 구조를 정의합니다. 간단한 드래그 앤 드롭 작업으로 구조 구성 요소를 추가 및 이동하여 페이지 콘텐츠의 형태를 몇 초 이내에 디자인할 수 있습니다.

  1. 기본 랜딩 페이지 만들기 홈 페이지에서 처음부터 디자인 옵션을 선택합니다.

  2. 페이지 콘텐츠에 대한 스타일을 관리하는 방법을 선택하십시오.

    • 테마 사용 - 테마 모드​에서 페이지 콘텐츠를 만들려면 이 옵션을 선택하십시오. 이 모드에서는 정의된 브랜드 테마를 사용하여 콘텐츠 작성 프로세스를 간소화하고 디자인이 정의된 표준에 부합하는지 확인할 수 있습니다.

    • 수동 스타일 지정 - 수동 모드​에서 페이지 콘텐츠를 만들려면 이 옵션을 선택하십시오. 이 모드에서는 빈 캔버스에 추가하는 모든 구조 및 콘텐츠 구성 요소의 스타일을 수동으로 설정합니다.

  3. 확인​을 클릭합니다.

  4. 페이지에 구조 및 콘텐츠 추가.

나만의 코드 작성 code-your-own

직접 코드 작성​을 통해 원시 HTML을 작성하거나 붙여 넣어 디자인 공간에서 직접 페이지 콘텐츠를 작성할 수 있습니다. 마크업을 완전히 제어해야 할 때 이 모드를 사용합니다. 이 모드를 사용하려면 HTML 기술이 있어야 합니다.

이 모드를 선택하면 코드 편집기에 계속 남아 있으므로 비주얼 편집기로 전환할 수 없습니다.

  1. 기본 랜딩 페이지 만들기 홈 페이지에서 직접 코드 작성 옵션을 선택합니다.

  2. 원시 HTML 코드를 입력하거나 붙여넣습니다.

페이지 콘텐츠를 지우고 새 디자인에서 시작하려면 옵션 메뉴에서 디자인 변경​을 선택하세요.

HTML 가져오기 import-html

Adobe Journey Optimizer B2B edition을 사용하면 기존 HTML 콘텐츠를 가져와서 랜딩 페이지를 디자인할 수 있습니다.

가져온 콘텐츠는 다음과 같을 수 있습니다.

  • 통합 스타일시트가 있는 HTML 파일

  • HTML 파일, 스타일 시트(.css) 및 이미지가 포함된 .zip 파일

    note
    NOTE
    .zip 파일 구조에는 제한 사항이 없습니다. 그러나 참조는 상대적이어야 하며 .zip 폴더의 트리 구조와 일치해야 합니다. 이미지는 항상 연결된 Marketo Engage 에셋 저장소에 업로드됩니다. Experience Manager Assets에서 이미지 파일을 관리하려면 해당 앱 인터페이스에서 별도로 업로드한 다음 이메일 디자인 공간에서 이미지 링크를 변경합니다.

HTML 콘텐츠가 포함된 파일을 가져오려면(T):

  1. 템플릿 디자인 홈 페이지에서 HTML 가져오기 옵션을 선택합니다.

  2. HTML 콘텐츠가 포함된 HTML 또는 .zip 파일을 드래그 앤 드롭하고 가져오기​를 클릭합니다.

zip 파일에서 html 콘텐츠 가져오기 {width="500"}

NOTE
<table> 태그를 HTML 파일의 첫 번째 레이어로 사용하면 맨 위 레이어 태그의 배경 및 너비 설정을 포함하여 스타일이 손실될 수 있습니다.

필요에 따라 시각적 디자인 공간을 사용하여 가져온 콘텐츠를 개인화할 수 있습니다.

템플릿 선택 select-template

[Beta]{class="badge informative" title="Beta 기능"}

랜딩 페이지 템플릿을 사용하려면 다음 중 하나를 선택할 수 있습니다.

  • 샘플 템플릿. Journey Optimizer B2B edition 인터페이스는 랜딩 페이지 디자인의 시작점으로 사용할 수 있는 기본 랜딩 페이지 템플릿 컬렉션을 제공합니다.

  • 저장된 템플릿. 템플릿 메뉴 을(를) 사용하여 조직의 멤버가 만든 저장된 사용자 지정 템플릿을 사용하십시오.

디자인 템플릿 선택 섹션을 사용하여 템플릿에서 콘텐츠 작성을 시작하십시오. Journey Optimizer B2B edition 인스턴스에서 샘플 템플릿 또는 저장된 사용자 지정 랜딩 페이지 템플릿을 사용할 수 있습니다.

저장된 템플릿

기본 랜딩 페이지 만들기 홈 페이지에는 기본적으로 샘플 템플릿 탭이 표시됩니다. 사용자 지정 템플릿을 사용하려면 저장된 템플릿 탭을 선택하십시오.

저장된 모든 랜딩 페이지 템플릿 목록이 표시됩니다. 이름, 마지막 수정 날짜마지막 생성 날짜​별로 정렬할 수 있습니다.

저장된 템플릿 선택 {width="700" modal="regular"}

미리 보기를 표시할 템플릿 썸네일을 선택합니다. 미리보기 모드에서 오른쪽 및 왼쪽 화살표를 사용하여 한 범주(선택에 따라 샘플 또는 저장됨)의 모든 템플릿 사이를 이동할 수 있습니다.

저장된 템플릿 미리 보기 {width="800" modal="regular"}

표시와 사용할 항목이 일치하면 미리 보기 창의 오른쪽 상단에 있는 이 서식 파일 사용​을 클릭합니다.

이 작업은 콘텐츠를 필요에 따라 편집할 수 있는 시각적 디자인 공간으로 복사합니다.

샘플 템플릿

Adobe Journey Optimizer B2B edition은 고유한 랜딩 페이지 및 랜딩 페이지 템플릿을 만드는 데 사용할 수 있는 즉시 사용 가능한 랜딩 페이지 템플릿을 제공합니다.

경고 확인 check-alerts

랜딩 페이지 콘텐츠를 디자인할 때 주요 설정이 누락된 경우 오른쪽 상단에 경고가 표시됩니다.

페이지 콘텐츠 문제에 대한 알림 {width="250"}

이 단추가 표시되지 않으면 발견된 문제가 없습니다.

경고에는 두 가지 유형이 있습니다.

  • 권장 사항 및 모범 사례를 참조하는 경고:

    • Placeholder links are present in the landing page body: 자리 표시자를 올바른 링크로 바꾸는 것을 잊지 마십시오.

    • Text version of HTML is empty: 페이지 본문의 텍스트 버전을 정의해야 합니다. 텍스트 버전은 HTML 콘텐츠를 표시할 수 없을 때 사용됩니다.

    • Empty link is present in page body: 페이지의 모든 링크가 올바른지 확인하십시오.

  • 여정/캠페인을 테스트하거나 활성화하지 못하는 오류(예:

    • The landing page content is empty: 페이지 컨텐츠는 필수입니다.

랜딩 페이지 테스트 test-landing-page

랜딩 페이지 설정 및 콘텐츠가 정의되면 테스트 프로필을 사용하여 페이지를 미리 볼 수 있습니다. 개인 맞춤화된 콘텐츠를 삽입한 경우 테스트 프로필 데이터를 사용하여 이 콘텐츠가 랜딩 페이지에 표시되는 방식을 확인할 수 있습니다.

PREREQUISITES
랜딩 페이지를 미리 보고 테스트하려면 메시지 게시 권한과 테스트 프로필을 포함하는 정의된 데이터 세트가 있어야 합니다.
  1. 테스트 프로필 선택을 열려면 미리 보기 및 테스트​를 클릭하십시오.

    note
    NOTE
    시각적 디자인 영역에 있는 경우 콘텐츠 시뮬레이션​을 사용할 수도 있습니다.
  2. 시뮬레이션 화면에서 테스트 프로필을 선택합니다.

    선택한 프로필에 대한 랜딩 페이지 콘텐츠 시뮬레이션 {width="700" modal="regular"}

    필요한 프로필이 목록에 없으면 테스트 프로필 관리​를 클릭하여 알려진 테스트 프로필 전자 메일 주소를 사용하고 목록에 추가하십시오.

    accordion
    테스트 프로필 추가

    ID 네임스페이스​의 경우 Select( Select 아이콘 ) 아이콘을 클릭하고 프로필을 테스트하는 데 사용할 Email 네임스페이스를 선택하십시오.

    테스트 프로필 설정 전자 메일 ID 네임스페이스 관리 {width="700" modal="regular"}

    ID 값 필드에 테스트 프로필을 식별할 전자 메일 주소를 입력하고 프로필 추가​를 클릭합니다. 이 작업을 반복하여 여러 프로필을 추가할 수 있습니다.

    테스트 프로필 관리 프로필 추가 {width="700" modal="regular"}

    왼쪽 상단의 뒤로 화살표를 클릭하여 시뮬레이션 페이지로 돌아갑니다.

  3. 미리 보기 열기​를 선택하여 랜딩 페이지를 테스트합니다.

    랜딩 페이지 미리보기가 새 탭에서 열립니다. 선택한 테스트 프로필 데이터가 개인화된 요소를 대체합니다.

    프로필 데이터가 있는 랜딩 페이지 미리 보기 {width="600"}

  4. 다른 테스트 프로필을 선택하여 랜딩 페이지의 각 변형에 대한 렌더링을 미리 봅니다.

페이지 게시 publish-landing-page

PREREQUISITES
랜딩 페이지를 게시하려면 메시지 게시 권한이 있어야 합니다. 게시하기 전에 모든 경고를 확인 및 해결하세요.

초안 페이지가 조건을 충족하고 여정 메시지에서 페이지를 연결할 수 있도록 하려면 오른쪽 상단의 게시​를 클릭하십시오. 확인 대화 상자에서 게시​를 클릭합니다.

게시용 확인 대화 상자 {width="250"}

랜딩 페이지가 게시되면 랜딩 페이지 목록에 게시됨 상태로 표시됩니다. 즉, 라이브가 되어 여정을 통해 전송된 이메일, SMS 또는 WhatsApp 메시지에 사용할 준비가 되었습니다.

URL을 웹 브라우저에 복사하여 붙여 넣으면 게시된 랜딩 페이지에 액세스할 수 없습니다. 미리 보기 함수를 사용하여 언제든지 테스트할 수 있습니다.

특정 보고서를 통해 랜딩 페이지 영향을 모니터링할 수 있습니다.

recommendation-more-help
journey-optimizer-b2b-help-user