For AI agents: a documentation index is available at /docs/llms.txt. Append .md to any page URL for markdown, or send Accept: text/markdown.
가이드 폼 팩터 및 속성 안내
가이드와 설문조사에는 다양한 폼 팩터가 포함되어 있습니다. 각 폼 팩터에는 최종 사용자에게 어떻게 동작하는지를 제어하는 일련의 속성이 있습니다.
폼 팩터
각 폼 팩터는 유사한 속성 세트를 공유합니다.
모달
모달은 화면 중앙에서 시선을 집중시키는 완전한 몰입형 경험입니다. 모달을 사용하여 중요한 메시지를 전달하거나 여러 단계 흐름을 통해 사용자를 안내하십시오.
다음을 사용하여 모달을 사용자 정의하십시오.
- 클래식, 가로 분할, 세로 분할 또는 쇼케이스 중에서 레이아웃을 선택하십시오.
- 버튼을 추가하고 사용자가 이를 클릭하거나 누를 때 발생하는 동작을 사용자 지정하세요.
- 이미지 또는 비디오를 추가하세요. Amplitude는 선택한 레이아웃에 따라 미디어 요소를 배치합니다.
- 텍스트에 애니메이션을 적용합니다. 텍스트 애니메이션을 사용하면 가이드가 나타날 때 텍스트에 애니메이션 효과가 적용됩니다.
세 점 메뉴를 클릭하여 형식 설정에 액세스합니다.
| 설정 | 설명 |
|---|---|
| 콘텐츠 레이아웃 | 가이드 콘텐츠의 시각적 순서를 업데이트합니다. |
| 제목 및 콘텐츠 정렬 | 제목과 본문 텍스트의 정렬을 변경합니다. |
| 동작 표시줄 Web only | 안내서의 버튼의 배치 및 레이아웃을 업데이트합니다. |
| 닫으려면 외부를 클릭/누르십시오 | 사용자가 모달 외부를 클릭하거나 탭하여 해당 모달을 해제할 수 있도록 합니다. |
| 텍스트 애니메이션 | 모달의 텍스트를 타이프라이터 효과로 애니메이션화할 수 있도록 합니다. |
팝오버
상황에 맞는 요소 근처에 나타나는 미묘한 넛지입니다. 빠른 팁을 제공하거나 사용자의 흐름을 방해하지 않고 사용자의 관심을 끌기 위해 팝오버를 사용하십시오.
팝오버는 모달과 동일한 사용자 지정 옵션을 많이 제공합니다.
세 점 메뉴를 클릭하여 형식 설정에 액세스합니다.
| 설정 | 설명 |
|---|---|
| 콘텐츠 레이아웃 | 가이드 콘텐츠의 시각적 순서를 업데이트합니다. |
| 제목 및 콘텐츠 정렬 | 제목과 본문 텍스트의 정렬을 변경합니다. |
| 동작 표시줄 Web only | 안내서의 버튼의 배치 및 레이아웃을 업데이트합니다. |
| Z-인덱스 Web only | 팝오버에 대한 사용자 정의 Z-인덱스 값을 지정합니다. |
| 텍스트 애니메이션 | 팝오버의 텍스트가 타이프라이터 효과로 애니메이션화될 수 있도록 합니다. |
핀
핀은 사용자가 상호 작용할 때까지 화면에 남아 있는 영구적인 마커입니다. 핀을 사용하여 주요 기능을 강조하거나 사용자가 참조할 수 있는 상황별 도움말을 제공합니다.
핀은 CTA 클릭 없이 진행될 수 있습니다.
기본적으로 사용자가 핀의 대상 요소를 클릭하면 투어는 다음 단계로 진행됩니다. 대상 클릭 시 자동 진행 비활성화 설정을 사용하여 이 동작을 비활성화할 수 있습니다(웹 전용). 핀 형식 설정의 Advance 트리거 설정을 사용하면 사용자가 클릭할 때 투어를 진행시키는 추가 요소를 지정할 수 있습니다.
기본적으로 열리도록 설정되지 않은 핀에 대한 분석 영향
기본적으로 열리도록 설정되지 않은 핀 가이드의 경우, 대상 요소를 클릭하면 기본적으로 열림으로 설정되지 않은 가이드 보기됨 이벤트를 생성하지 않고 가이드를 완료된 것으로 표시합니다. 이로 인해 사용자가 먼저 핀 비콘을 열지 않고 대상 요소와 상호 작용할 때 가이드 완료 이벤트가 가이드 조회 이벤트보다 더 많이 발생할 수 있습니다.
핀은 모달 또는 팝오버와는 다른 사용자 지정 옵션을 제공합니다. 기본적으로 열려 있는 상태와 닫혀 있는 상태 대상 구간을 전환하여 시작할 수 있습니다. 마스크 표시를 사용하여 고정된 요소를 강조표시하고 화면의 나머지 부분을 어둡게 하는 반투명 오버레이를 표시합니다.
핀은 다음과 같은 위치 설정을 사용할 수 있습니다.
- 자동
- 대상 상단
- 대상의 맨 아래
- 대상에서 왼쪽
- 대상 오른쪽
위치 설정은 핀 메시지가 해당 대상을 기준으로 렌더링되는 위치를 지정합니다. 대상 요소의 위치가 지정된 위치와 호환되지 않는 경우 Amplitude는 다른 위치를 시도합니다. 예를 들어 대상이 페이지의 맨 왼쪽에 있는 경우 핀은 왼쪽으로 렌더링될 수 없습니다. 그런 다음 Amplitude는 핀을 대상의 위, 아래 또는 오른쪽으로 렌더링하려고 시도합니다. 핀이 네 위치 중 어느 곳에도 표시될 수 없는 경우 Amplitude는 핀을 렌더링하지 않습니다.
핀의 세 점 메뉴를 클릭하여 형식 설정에 액세스합니다.
| 설정 | 설명 |
|---|---|
| 기본적으로 열려 있음 | 사용자 개입 없이 핀을 열 수 있도록 합니다. 비활성화된 경우 사용자가 핀을 클릭하거나 탭해야 핀을 열 수 있습니다. |
| 마우스를 올릴 때 열기 | 사용자가 핫스팟 위에 마우스를 올릴 때 핀을 엽니다. 이 설정을 사용하려면 기본적으로 열기를 비활성화하십시오. 기본적으로 열기가 비활성화되어 있고 마우스를 올릴 때 열기 설정도 비활성화되어 있는 경우 사용자는 핀을 열려면 핫스팟을 클릭해야 합니다. |
| 마스크 표시 | 핀이 열려 있을 때 배경 마스크를 활성화하여 사용자의 초점을 맞출 수 있도록 합니다. |
| 콘텐츠 레이아웃 | 가이드 콘텐츠의 시각적 순서를 업데이트합니다. |
| 제목 및 콘텐츠 정렬 | 제목과 본문 텍스트의 정렬을 변경합니다. |
| 동작 표시줄 Web only | 안내서의 버튼의 배치 및 레이아웃을 업데이트합니다. |
| Z-인덱스 Web only | 팝오버에 대한 사용자 정의 Z-인덱스 값을 지정합니다. |
| 텍스트 애니메이션 | 핀의 텍스트를 타이프라이터 효과로 애니메이션화할 수 있도록 합니다. |
| 타겟 클릭 시 자동 진행 비활성화 | 이 옵션을 활성화한 경우 대상 요소를 클릭해도 안내서는 다음 단계로 진행되지 않습니다. |
| 대상을 찾을 수 없는 경우 건너뛰기 | 이 옵션을 활성화하면 단계가 활성화된 후 지정된 시간 250ms내에 대상 요소를 찾을 수 없는 경우 가이드가 다음 단계로 건너뜁니다. 이 단계가 마지막 단계이고 가이드가 이 단계를 건너뛰면 가이드는 완료됩니다. |
| 다음 단계 트리거 Web only | 사용자가 지정한 요소와 상호 작용할 때 안내를 다른 단계로 진행할 수 있습니다. |
툴팁
툴팁은 툴팁 템플릿에서 사용할 수 있으며 한 단계를 포함합니다.
툴팁은 핀과 비슷하지만 사용자가 툴팁을 클릭하거나 누르거나 마우스 커서를 올릴 때만 표시됩니다. 툴팁을 사용하여 기능에 대한 세부 정보를 인라인 형식으로 제공하면서 UI 공간을 절약할 수 있습니다.
| 설정 | 설명 |
|---|---|
| 콘텐츠 레이아웃 | 가이드 콘텐츠의 시각적 순서를 업데이트합니다. |
| 제목 및 콘텐츠 정렬 | 제목과 본문 텍스트의 정렬을 변경합니다. |
| 동작 표시줄 Web only | 안내서의 버튼의 배치 및 레이아웃을 업데이트합니다. |
| Z-인덱스 Web only | 팝오버에 대한 사용자 정의 Z-인덱스 값을 지정합니다. |
| 포인터 | 대화상자와 마커를 연결하는 스타일을 선택합니다. |
| 마커 | 툴팁 메시지를 표시하는 마커의 모양을 선택합니다. |
| 요소가 마커임 Web only | 대상화된 요소가 툴팁 트리거가 됩니다. 사용자가 요소를 클릭하거나 마우스 커서를 올릴 때 툴팁이 표시되며 별도의 마커 아이콘은 없습니다. 페이지 요소에 버튼, 링크 또는 아이콘과 같은 명백한 어포디언스가 이미 있고, 두 번째 표시자가 해당 요소에 겹쳐지는 것을 원하지 않을 때 이 옵션을 사용하십시오. |
| 마커 너비 Web only | 툴팁의 마커(아이콘/이미지)의 폭을 픽셀 단위로 정의합니다. |
| 텍스트 애니메이션 | 툴팁의 텍스트가 타이프라이터 효과로 애니메이션화될 수 있도록 합니다. |
| 마우스 오버/클릭 시 표시 Web only | 툴팁 메시지를 표시하도록 하는 트리거를 선택합니다. |
툴팁은 재사용 대기시간을 무시하며 사용자가 툴팁을 완료한 후에도 계속 표시됩니다. 툴팁 설문조사의 경우 사용자는 설문조사를 새 제출물로 다시 작성할 수 있습니다.
배너
배너는 배너 템플릿에서 사용할 수 있으며 한 단계로 구성됩니다.
배너는 페이지의 맨 위 또는 맨 아래에 표시되는 전체 너비 블록입니다. 장기적인 발표, 상태 업데이트 또는 시간에 민감한 프로모션에 배너를 사용하십시오.
배너 표시 제한 사항
배너는 인라인 표시 스타일을 사용하는 경우에도 웹사이트의 기존 콘텐츠와 겹칠 수 있습니다. 중복은 사이트의 요소나 다른 페이지 요소에 충돌하는 CSS 스타일이 있을 때 발생합니다. body디스플레이 스타일을 오버레이에서 인라인으로 변경해도 콘텐츠 중복이 해결되지 않을 경우 응용 프로그램의 CSS가 충돌하여 배너가 의도한 위치에 렌더링되지 못하게 할 수 있습니다.
해결 방법으로 카드 포함을 사용하십시오.
배너가 예상대로 렌더링되지 않는 경우 카드 포함을 시도해 보십시오. 카드 포함은 콘텐츠를 페이지의 DOM에 네이티브 요소로 직접 렌더링하므로 CSS 충돌 가능성이 줄어듭니다. 예를 들어, 카드 포함을 자식의 맨 앞에 추가(첫 번째 자식)하도록 구성할 수 <body>있으며, 이는 일반적으로 카드를 페이지의 맨 위 요소로 렌더링합니다.
| 설정 | 설명 |
|---|---|
| 고정 Web only | 사용자가 스크롤하는 동안 배너가 계속 표시됩니다. |
| 디스플레이 스타일 Web only | 배너가 페이지의 콘텐츠와 상호 작용하는 방식을 제어합니다. 모바일 배너는 오버레이만 지원합니다. |
| Z-인덱스 Web only | 팝오버에 대한 사용자 정의 Z-인덱스 값을 지정합니다. |
| 텍스트 애니메이션 | 배너의 텍스트가 타이프라이터 효과로 애니메이션화될 수 있도록 합니다. |
체크리스트 Web only
체크리스트는 사용자가 목표를 향한 진행 상황을 추적하는 데 도움이 되는 양식을 제공합니다. 여기에는 하나의 헤더와 하나 이상의 체크리스트 항목이 포함됩니다. 체크리스트 항목을 사용하여 작업을 트리거하십시오.
| 설정 | 설명 |
|---|---|
| Z-인덱스 | 체크리스트에 대한 사용자 정의 z-인덱스 값을 지정합니다. |
체크리스트 항목 Web only
체크리스트 항목은 체크리스트를 구성합니다.
| 설정 | 설명 |
|---|---|
| 건너뛰기 가능 | 이 옵션을 사용하면 사용자는 "건너뛰기" 버튼을 통해 체크리스트 항목을 완료할 수 있습니다. |
캐러셀 Mobile only
캐러셀은 사용자가 버튼 탭에 의존하지 않고 왼쪽 또는 오른쪽으로 쓸어넘겨 탐색할 수 있는 단일 카드로 다단계 안내서를 제공합니다. 사용자가 자신의 속도에 맞게 탐색할 수 있도록 온보딩 흐름이나 기능 투어에는 캐러셀을 사용하세요.
캐러셀은 휴대폰에서는 전체 화면으로 렌더링되고 태블릿에서는 고정 너비 카드 형태로 렌더링됩니다. 캐러셀의 각 단계는 클래식 레이아웃을 사용하며 다른 폼 팩터와 동일한 블록과 속성을 지원합니다.
| 설정 | 설명 |
|---|---|
| 단계 카운터 표시 | 사용자가 단계 대상 구간을 스와이프할 때 안내서의 진행 상황을 표시합니다. |
| 단계 카운터 형식 | 숫자(예: 1/3), 상세(예: 1 of 3) 또는 점을 선택하여 진행 상황을 표시합니다. |
카드 삽입
카드 임베드는 가이드 및 설문조사를 UI 내의 기본 요소로 렌더링합니다. 오버레이가 아닌 애플리케이션의 일부처럼 느껴져야 하는 영구 콘텐츠에 이 옵션을 사용하십시오.
고유 식별자 필요
각 카드 임베디드에는 고유한 대상 식별자가 필요합니다(모바일에만 해당). 대부분의 플랫폼(예: SwiftUI)에서 핀 및 툴팁과 동일한 요소 태그를 사용하십시오. .amplitudeViewJetpack Compose에서는 .amplitudeView 수정자 대신 AmplitudeView 컴포저블로 타겟을 감싸십시오. 여러 카드 삽입은 동일한 화면에서 식별자를 공유할 수 없습니다. 식별자를 공유하면 카드가 렌더링되지 않거나 잘못 배치될 수 있습니다.
카드 삽입에는 카드를 배치할 위치를 지정하는 대상 요소 선택기가 필요합니다. 플랫폼별 타겟팅 설정을 위해 요소 선택기로 이동하십시오. 다음 위치 옵션 중에서 선택하여 카드가 대상 요소와 어떻게 관련되는지 제어하십시오.
| 위치 | 설명 |
|---|---|
| 자식에게 추가(마지막 자식) Web only | 카드를 대상 첫 사용 후의 마지막 하위 요소로 삽입합니다. |
| 자식 요소 앞에 추가(첫 번째 자식) Web only | 카드를 대상 첫 사용 후의 첫 번째 하위 요소로 삽입합니다. |
| 요소 이전 | 대상 요소 바로 앞에 카드를 놓습니다. |
| 요소 뒤 | 대상 요소 바로 뒤에 카드를 배치합니다. |
| 요소 교체 | 대상 요소를 카드로 교체합니다. |
| 너비 | 카드 크기를 콘텐츠에 맞게 설정하려면 자동을 선택하고, 픽셀 폭을 지정하려면 고정을 선택하고, 컨테이너 폭을 채우려면 전체를 선택합니다. |
| 정렬 | 너비가 전체가 아닐 경우 카드를 컨테이너의 왼쪽, 가운데 또는 오른쪽에 맞춰 정렬하십시오. |
| 높이 | 카드 크기를 콘텐츠에 맞게 설정하려면 자동을 선택하고, 픽셀 높이를 지정하려면 고정을 선택하고, 컨테이너 높이를 채우려면 전체를 선택합니다. |
| 마진 | 위쪽, 오른쪽, 아래쪽 및 왼쪽 여백(픽셀 단위)을 설정하여 카드와 주변 UI 요소 대상 구간 간격을 제어합니다. 여백은 패딩과 다릅니다. 여백은 카드 주위의 외부 간격을 제어하는 반면 패딩은 카드 첫 사용 후 간격을 제어합니다. |
세 점 메뉴를 클릭하여 형식 설정에 액세스합니다.
| 설정 | 설명 |
|---|---|
| 콘텐츠 레이아웃 Web only | 가이드 콘텐츠의 시각적 순서를 업데이트합니다. |
| 동작 표시줄 Web only | 안내서의 버튼의 배치 및 레이아웃을 업데이트합니다. |
| Z-인덱스 Web only | 카드에 대한 사용자 정의 z-인덱스 값을 지정합니다. |
| 텍스트 애니메이션 | 카드의 텍스트를 타자기 효과로 애니메이션화할 수 있습니다. |
요소 선택기 Web only
핀, 툴팁, 카드 포함 또는 요소 기반 트리거를 사용하여 가이드 또는 설문조사를 구성할 때는 대상으로 할 요소를 지정해야 합니다. 대상을 지정하는 방법은 플랫폼에 따라 다릅니다.
웹 Web only
요소 선택기는 CSS 선택기를 사용하여 특정 페이지 요소를 식별하고 대상으로 지정하는 데 도움을 줍니다.
요소 선택기의 작동 방식
Amplitude의 시각적 요소 선택기는 사용자가 선택한 요소에 대해 가장 안정적인 CSS 선택기를 자동으로 식별하므로, 페이지가 사소하게 변경되더라도 가이드는 계속 작동합니다.
시각적 선택기를 사용하려면 다음을 수행하십시오.
- 가이드 빌더에서 테스트 및 미리보기 를 클릭합니다.
- 대상 요소가 포함된 페이지로 이동합니다.
- 대상으로 지정하려는 요소를 클릭합니다.
- Amplitude는 해당 요소에 대한 CSS 선택기를 자동으로 생성합니다.
중첩된 요소 선택하기
중첩된 요소(다른 요소 내부의 요소)를 선택하려면 요소 위에 마우스를 올려 놓은 상태에서 Alt 키(Mac의 경우 Option 키)를 사용합니다.
- 테스트 및 미리보기 를 클릭합니다.
- 상위 요소 위에 마우스를 올립니다.
- Alt/Option 키를 누른 상태로 유지합니다.
- 계속 마우스를 이동하여 중첩된 하위 요소를 드릴 다운합니다.
- 원하는 중첩된 요소를 클릭하여 선택합니다.
이 방법을 사용하면 카드 첫 사용 후 단추나 메뉴 첫 사용 후 아이콘과 같은 복잡한 페이지 구조 첫 사용 후 특정 요소를 대상으로 지정할 수 있습니다.
선택기를 재정의하거나 고유한 선택기를 제공하십시오
사용자 고유의 선택기를 지정하거나 더 많은 제어권을 얻으려면 CSS 또는 XPath 선택기를 수동으로 입력하십시오.
- 요소 선택기 필드에 CSS 선택기 또는 XPath 표현식을 붙여넣습니다.
- 선택 전략을 선택하십시오.
- CSS 선택기: 표준 CSS 선택기 구문(예:
#submit-button,.primary-cta). - XPath: 보다 복잡한 타겟팅을 위한 XPath 표현식(예:
//button[@id='submit']).
- CSS 선택기: 표준 CSS 선택기 구문(예:
- 선택기가 일치하는 항목을 찾지 못할 경우 Amplitude가 사용할 폴백 텍스트를 추가할 수도 있습니다(선택적).
- 테스트 및 미리보기로 선택기를 테스트하여 올바른 요소를 대상으로 하는지 확인합니다.
사용자 지정 선택기에 대한 모범 사례
- 변경될 가능성이 적은 ID 또는 데이터 속성과 같은 안정적인 속성을 사용하십시오.
- 필요하지 않은 경우 특정 위치에 의존하는 선택기(예:
:nth-child)는 사용하지 마십시오. - 다양한 페이지와 화면 크기에서 선택기를 테스트하십시오.
- 안정성을 보장하기 위해 가이드 타겟팅을 위한 특별한 데이터 속성을 추가하세요.
:is()여러 유사한 요소에서 작동하는 유연한 선택기를 만드는 데 사용합니다.
사용자 지정 선택기의 예:
- CSS 선택기:
.header-navigation > .menu-item:first-child - XPath:
//div[@class='container']//button[contains(text(), 'Submit')] - 여러 요소를 포함하는 CSS:
:is([my-class="foo"],[my-class="bar"])
Amplitude는 :is(), :not(), :nth-of-type(), :where()와 같은 기능적 유사 클래스를 포함한 대부분의 최신 CSS 선택기 기능을 지원하므로 보다 표현력이 뛰어나고 유연한 선택기를 만들 수 있습니다.
섀도우 DOM 내의 대상 요소
시각적 요소 선택기는 열린 섀도우 DOM 내부의 요소를 직접 대상으로 지정할 수 있습니다. 일반 페이지 요소와 동일한 방법으로 섀도우 DOM 요소를 선택하십시오. 테스트 및 미리 보기 중에 요소를 클릭하십시오.
다음 제한 사항을 염두에 두십시오.
- 오픈 섀도우 DOM만: 섀도우 DOM은 오픈 모드여야 합니다. 요소 선택기는 닫힌 섀도우 DOM에 액세스할 수 없습니다.
- 카드 임베딩은 지원되지 않습니다: 카드 임베딩 폼 팩터는 섀도우 DOM 내에서 작동하지 않습니다. 섀도우 DOM 요소 근처의 콘텐츠에 대해서는 팝오버나 핀과 같은 다른 폼 팩터를 사용하십시오.
단계가 렌더링될 때 대상 요소가 DOM에 존재하지 않는 경우 고정된 단계는 표시되지 않습니다. 가이드 및 설문조사는 누락된 앵커 요소에 대한 가상 타겟팅 또는 자동 건너뛰기를 지원하지 않습니다.
모바일 Mobile only
핀, 툴팁 또는 카드 삽입을 사용하는 가이드 및 설문조사는 화면의 특정 뷰를 타겟팅하기 위해 SDK를 필요로 합니다. 앱에서 각 대상 뷰에 고유 식별자를 지정한 다음 해당 문자열을 가이드 또는 설문조사 빌더의 요소 선택기 필드에 사용하십시오.
Jetpack Compose에서는 카드 삽입 대상을 AmplitudeView컴포저블로 감싸세요. 핀과 툴팁에서는 .amplitudeViewModifier를 사용할 수 있습니다.
귀하의 플랫폼에 맞는 요소 타겟팅 섹션으로 이동하세요:
속성
이러한 속성은 폼 팩터 전체에 적용되므로 안내선 구성요소를 사용자 정의할 수 있습니다. 각 속성에 사용할 수 있는 옵션은 폼 팩터에 따라 다를 수 있습니다.
위치
화면에 가이드가 나타나는 위치를 제어합니다.
| 폼 팩터 | 옵션 |
|---|---|
| 모달 | 오른쪽 위, 위쪽 가운데, 왼쪽 위, 오른쪽 가운데, 오른쪽 아래, 아래쪽 가운데, 왼쪽 아래, 왼쪽 가운데, 가운데. |
| 팝오버 | 오른쪽 위, 위쪽 가운데, 왼쪽 위, 오른쪽 가운데, 오른쪽 아래, 아래쪽 가운데, 왼쪽 아래, 왼쪽 가운데, 가운데. |
| 핀 | 대상 요소를 기준으로 핀의 위치를 제어합니다. 안내선의 위치와 정렬을 선택합니다. 예를 들어 위치: Bottom of target 및 정렬: Left은 안내선을 대상 요소 아래에 배치하고 안내선의 왼쪽을 대상의 왼쪽에 정렬합니다. |
| 툴팁 | 대상 요소의 정보 마커가 나타나는 측면을 지정합니다. 필요에 따라 수직 또는 수평 간격띄우기를 추가합니다. |
| 배너 | 페이지의 맨 위 또는 맨 아래에 위치합니다. 사용자가 스크롤하는 동안 배너가 계속 표시되도록 하려면 [고정] 옵션을 설정하십시오. 표시 스타일을 선택합니다. 페이지 첫 사용 후 배너를 표시하려면 인라인을 사용하고, 페이지 내용 위에 배너를 표시하려면 오버레이를 사용합니다. |
| 카드 삽입 Web only | 대상 요소를 기준으로 위치를 제어합니다. 추가, 앞추가, 이전, 이후 또는 바꾸기 중에서 선택합니다. 너비(자동, 고정 또는 전체), 너비가 전체가 아닐 경우 정렬(왼쪽, 가운데 또는 오른쪽), 높이(자동, 고정 또는 전체) 및 여백(픽셀 단위의 위쪽, 오른쪽, 아래쪽 및 왼쪽)을 구성하여 카드 주위의 간격을 제어합니다. |
| 체크리스트 헤더 Web only | 페이지와 관련하여 왼쪽 아래 또는 오른쪽 아래. |
단계
단계를 사용하여 다단계 가이드를 작성하십시오. 프로세스를 더 작고 실행 가능한 단계로 분할하여 사용자를 처음부터 끝까지 안내합니다.
툴팁과 배너에는 하나의 단계가 포함되어 있습니다.
블록
블록을 사용하면 가이드를 더욱 매력적으로 만들 수 있습니다. 버튼 CTA, 이미지 또는 비디오를 추가하세요. 블록은 사용자가 설정한 폼 팩터 및 정렬에 따라 자동으로 정렬됩니다.
버튼
버튼을 추가할 때 사용자가 클릭하거나 누를 때 수행되는 작업을 선택할 수 있습니다. 기본 버튼과 보조 버튼 모두 조건부 논리를 포함한 모든 작업을 지원합니다.
| 동작 | 설명 |
|---|---|
| 링크 방문 | 지정된 웹사이트를 엽니다. 웹 가이드 및 설문조사의 경우 동일 탭(현재 탭/화면에서 열림), 새 탭(새 브라우저 탭에서 열림) 또는 라우터 사용을 선택합니다. 라우터 사용은 구성된 라우터를 사용하며 라우터 구성이 필요합니다. 모바일 가이드 및 설문조사의 경우 앱 내 브라우저에서 열기(앱 첫 사용 후 링크를 엽니다), 기기 브라우저에서 열기(기기의 기본 브라우저에서 열림) 또는 라우터 사용을 선택합니다. |
| 클릭/탭 요소 | 사용자가 안내서의 버튼을 클릭할 때 클릭 이벤트를 수신하는 페이지의 요소를 지정합니다. |
| 쇼 가이드 | 다른 가이드를 시작하십시오. |
| 설문조사 보이기 | 설문조사를 시작하세요. |
| 돌아가기 | 가이드의 이전 단계로 이동하십시오. |
| 앞으로 이동하십시오 | 가이드의 다음 단계로 진행하십시오. |
| 단계로 이동 | 가이드에 지정된 단계로 이동하십시오. |
| 조건부 논리 평가 | 사용자 속성 또는 설문조사 응답에 따라 다양한 작업을 수행하세요. 조건을 생성하여 다양한 사용자에 맞게 버튼의 동작을 개인화합니다. 자세한 내용은 조건부 논리로 이동하십시오. |
| 콜백 실행 | 가이드 및 설문조사 인스트루멘테이션에 정의된 콜백 함수를 트리거하십시오. 자세한 내용은 콜백 등록을 참조하십시오. |
| 앱 스토어 평가 요청 제출 Mobile only | 네이티브 앱 내 흐름(iOS의 경우 App Store, Android의 경우 Google Play)을 사용하여 앱을 평가하도록 사용자에게 요청하세요. SDK는 네이티브 평가 API(iOS용 StoreKit, Android용 Play In-App Review)를 호출합니다. 네이티브 API 호출 자체가 오류를 반환하는 경우(예: 유효한 장면 또는 액티비티가 없음), 설문조사 구성에 앱 식별자를 제공하면 요청은 플랫폼의 앱 스토어 페이지로 되돌아갑니다. 호출은 성공했지만 플랫폼이 평가 대화상자를 표시하지 않기로 선택한 경우(속도 제한, 사용자 옵트아웃 또는 기타 플랫폼 제한 사항 때문), 설문조사는 스토어 페이지를 열지 않고 조용히 종료됩니다. |
| Open AI Assistant | AI Assistant 인터페이스를 엽니다. |
| 리소스 센터 열기 | 리소스 센터를 엽니다. |
| 문서 열기 | 지정된 문서를 엽니다. |
다음의 경우 단계를 완료로 표시하십시오: Web only
체크리스트에만 단계를 완료로 표시 옵션이 있습니다. Amplitude는 다음 작업 중 하나가 발생할 때 체크리스트 단계를 완료한 것으로 표시합니다.
Button is clickedPage is visitedElement is clickedEvent is tracked
각 옵션에 대해 체크리스트 단계는 체크리스트가 표시된 상태에서 클라이언트에서 작업이 발생한 경우에만 "미완료"에서 "완료"로 업데이트됩니다. 예를 들어, Amplitude가 이벤트를 서버 측에서 추적하거나 체크리스트가 표시되기 전에 이벤트가 발생한 경우 해당 단계는 완료로 표시되지 않습니다.
이미지
경험에 포함시킬 이미지를 업로드하세요. 경험의 레이아웃에 따라 이미지의 위치가 결정됩니다.
비디오
동영상의 URL을 붙여넣으십시오(YouTube, Vimeo, Loom, Vidyard 또는 ). MP4 파일). 이미지와 마찬가지로 레이아웃도 비디오의 위치를 결정합니다.
이 내용이 도움이 되었나요?