웹 양식의 정적 요소

사용자가 양식 페이지에 상호 작용이 없는 요소를 포함할 수 있습니다.이미지, HTML 콘텐츠, 가로 막대 또는 하이퍼텍스트 링크와 같은 정적 요소입니다. 이러한 요소는 Static elements 을 선택하여 도구 모음의 첫 번째 버튼을 통해 만들어집니다.

다음 유형의 필드를 사용할 수 있습니다.

  • 이전에 제공된 답변(양식 컨텍스트) 또는 데이터베이스를 기반으로 하는 값입니다.

  • 하이퍼텍스트 링크, HTML, 가로 막대형 HTML 콘텐츠 삽입을 참조하십시오.

  • 리소스 라이브러리 또는 사용자가 액세스할 수 있는 서버에 저장된 이미지입니다. 이미지 삽입을 참조하십시오.

  • 클라이언트 측 및/또는 서버 측에서 실행된 스크립트. JavaScript로 작성해야 하며 클라이언트측에서 올바른 실행을 위해 대부분의 브라우저와 호환되어야 합니다.

    노트

    서버 측에서 스크립트는 Campaign JSAPI 설명서에 정의된 함수를 사용할 수 있습니다.

HTML 컨텐츠 삽입

양식 페이지에 HTML 컨텐츠를 포함할 수 있습니다.하이퍼텍스트 링크, 이미지, 형식이 지정된 단락, 비디오 등

HTML 편집기를 사용하면 양식 페이지에 삽입할 컨텐츠를 입력할 수 있습니다. 편집기를 열려면 Static elements > HTML 를 클릭합니다.

컨텐츠를 직접 입력 및 포맷하거나 소스 코드 창을 표시하여 일부 외부 컨텐츠에 붙여넣을 수 있습니다. "소스 코드" 모드로 전환하려면 도구 모음에서 첫 번째 아이콘을 클릭합니다.

데이터베이스 필드를 삽입하려면 개인화 단추를 사용합니다.

노트

HTML 편집기에 입력한 문자열은 Texts 하위 탭에 정의된 경우에만 번역됩니다. 그렇지 않으면 수집되지 않습니다. 자세한 내용은 웹 양식 번역을 참조하십시오.

다음 예와 같이 편집 창의 필드를 채웁니다.

하이퍼텍스트 링크를 추가하려면 Static elements > Link​로 이동합니다.

  • Label 은 양식 페이지에 표시될 하이퍼텍스트 링크의 컨텐츠입니다.

  • URL 은 원하는 주소입니다(예: ).웹 사이트의 경우 https://www.adobe.com 또는 info@adobe.com 를 사용하여 메시지를 보냅니다.

  • Window 필드를 사용하면 사이트의 경우 링크에 대한 표시 모드를 선택할 수 있습니다. 새 창, 현재 창 또는 다른 창에서 링크를 열도록 결정할 수 있습니다.

  • 다음과 같이 도구 설명을 추가할 수 있습니다.

  • 링크를 단추 또는 이미지로 표시하도록 선택할 수 있습니다. 이렇게 하려면 Type 필드에서 표시 유형을 선택합니다.

기본적으로 링크는 URL 유형 작업과 연결되어 있으므로 링크 대상 주소를 URL 필드에 입력할 수 있습니다.

링크에 대한 다른 작업을 정의할 수 있으므로 사용자가 링크를 클릭하여 다음을 수행할 수 있습니다.

  • 페이지 새로 고침

    이렇게 하려면 Action 필드의 드롭다운 상자에서 Refresh page 옵션을 선택합니다.

  • 다음/이전 페이지를 표시합니다.

    이렇게 하려면 Action 필드의 드롭다운 상자에서 Next page 또는 Previous page 옵션을 선택합니다.

    Next 및/또는 Back 단추가 링크로 대체되는 경우 숨길 수 있습니다. 이 page을 참조하십시오.

    링크는 기본적으로 사용되는 Next 단추를 대체합니다.

  • 다른 페이지 표시

    Enable a transition 옵션을 사용하면 Transition 필드에서 선택한 아웃바운드 전환과 연결된 특정 페이지를 표시할 수 있습니다.

    기본적으로 페이지에는 출력 전환이 하나만 있습니다. 새 전환을 만들려면 페이지를 선택한 다음 아래 표시된 대로 Output transitions 섹션에서 Add 단추를 클릭하십시오.

    다이어그램에서 이 추가는 다음과 같습니다.

    노트

    웹 양식의 페이지 시퀀싱에 대한 자세한 내용은 웹 양식 페이지 순서 정의를 참조하십시오.

  • facebook 프로필에서 가져온 데이터로 양식 필드를 미리 로드합니다

    주의

    이 함수는 Social Marketing 응용 프로그램을 설치한 경우에만 사용할 수 있습니다. 이 옵션을 사용하려면 Facebook Connect 유형 외부 계정과 함께 Facebook 애플리케이션을 만들어야 합니다. 자세한 정보는 이 페이지를 참조하십시오.

    Preload with Facebook 옵션을 사용하면 Facebook 프로필 정보를 사용하여 필드를 미리 로드하기 위해 양식에 단추를 삽입할 수 있습니다.

    사용자가 Fill in automatically 버튼을 클릭하면 Facebook 권한 요청 창이 열립니다.

    노트

    외부 계정을 구성할 때 확장 권한 목록을 변경할 수 있습니다. 확장 권한을 입력하지 않으면 Facebook은 기본적으로 기본 프로필 정보를 전달합니다.
    확장 권한 목록 및 해당 구문을 보려면 여기를 클릭하십시오.https://developers.facebook.com/docs/reference/api/permissions/

    사용자가 정보를 공유하기로 동의하면 양식의 필드가 미리 로드됩니다.

이 사용 사례에서는 다음 요소로 구성된 웹 애플리케이션을 만들었습니다.

  • 양식이 포함된 페이지
  • Record 활동
  • End 활동

미리 로드 단추를 추가하려면 다음 단계를 수행합니다.

  1. 양식을 만듭니다.

  2. 양식의 필드와 동일한 수준으로 이동하여 링크를 추가합니다.

  3. 레이블을 입력하고 Button 유형을 선택합니다.

  4. Action 필드로 이동하고 Preload with Facebook 을 선택합니다.

  5. Application 필드로 이동하고 이전에 만든 Facebook Connect 유형 외부 계정을 선택합니다. 자세한 정보는 이 페이지를 참조하십시오.

HTML 콘텐츠 개인화

이전 페이지에 기록된 데이터로 양식 페이지의 HTML 콘텐츠를 개인화할 수 있습니다. 예를 들어, 자동차 보험 웹 양식을 만들 수 있는데, 이 웹 양식에서는 자동차 회사 첫 페이지에 연락처 정보와 자동차 브랜드를 제공할 수 있습니다.

개인화 필드를 사용하여 사용자 이름과 선택한 브랜드를 다음 페이지에 다시 삽입할 수 있습니다. 사용할 구문은 정보 저장 모드에 따라 다릅니다. 자세한 내용은 수집된 정보 사용을 참조하십시오.

노트

보안상의 이유로 <%= 수식에 입력한 값은 이스케이프 처리된 문자로 바뀝니다.

이 예제에서 수신자의 이름과 성은 데이터베이스의 필드에 저장되고 차량 브랜드는 변수에 저장됩니다. 2페이지에서 개인화된 메시지의 구문은 다음과 같습니다.

<P>Welcome <%= ctx.recipient.@firstName %> <%= ctx.recipient.@lastName %>,</P>
<P>To start your customized study, please select your car <%=ctx.vars.marque%> and its year of purchase.</P>

이렇게 하면 다음 결과가 생성됩니다.

텍스트 변수 사용

Text 탭에서는 다음 구문을 사용하여 <%= 및 %> 문자 사이에 HTML에서 사용할 수 있는 변수 필드를 만들 수 있습니다.$(IDENTIFIER)

이 메서드를 사용하여 문자열을 쉽게 현지화할 수 있습니다. 웹 양식 번역을 참조하십시오

예를 들어 HTML 콘텐츠에 "마지막 연락처의 날짜:" 문자열을 표시할 수 있는 Contact 필드를 만들 수 있습니다. 이렇게 하려면 아래 단계를 수행합니다:

  1. HTML 텍스트의 Text 탭을 클릭합니다.

  2. Add 아이콘을 클릭합니다.

  3. Identifier 열에서 변수 이름을 입력합니다

  4. Text 열에 기본값을 입력합니다.

  5. HTML 콘텐츠에서 <%= $(Contact) %> 구문을 통해 이 텍스트 변수를 삽입합니다.

    주의

    HTML 편집기에 이러한 문자를 입력하면 <​필드가 이스케이프 처리된 문자로 바뀝니다. 이 경우 HTML 텍스트 편집기의 Display source code 아이콘을 클릭하여 소스 코드를 수정해야 합니다.

  6. 양식의 Preview 레이블을 열어 HTML에 입력한 값을 확인합니다.

이 운영 모드에서는 웹 양식의 텍스트를 한 번만 정의하고 통합 번역 도구를 사용하여 번역을 관리할 수 있습니다. 자세한 내용은 웹 양식 번역을 참조하십시오.

이미지 삽입

양식에 포함할 이미지를 외부에서 액세스할 수 있는 서버에 저장해야 합니다.

Static elements > Image 메뉴를 선택합니다.

삽입할 이미지의 소스를 선택합니다.공용 리소스 라이브러리에서 가져오거나 외부에서 액세스할 수 있는 외부 서버에 저장할 수 있습니다.

라이브러리의 이미지인 경우 필드의 콤보 상자에서 선택합니다.외부 파일에 있는 경우 액세스 경로를 입력합니다. 이미지 위에 커서를 전달하거나(HTML의 ALT 필드와 일치함) 이미지가 표시되지 않을 때 레이블이 표시됩니다.

이미지는 편집기의 중앙 섹션에서 볼 수 있습니다.

이 페이지에서는