학습 내용
동적 블록에 대해 알아보고 가입 양식에서 이를 사용하여 데스크톱 및 모바일 장치에서 쇼핑객을 위한 차별화된 보기와 경험을 생성하는 방법을 알아보세요. 양식의 모든 블록은 표시 여부 설정을 조정하여 동적으로 만들 수 있습니다.
동적 블록을 사용하면 디바이스에 따라 표시되는 블록을 제어할 수 있습니다. 장치에 따라 양식에 블록이 다르게 표시되도록 구성하거나 한 장치에는 표시되지만 다른 장치에는 표시되지 않도록 구성할 수 있습니다.
동적 블록의 사용 사례
- 다양한 디바이스 유형(예: 모바일 및 데스크톱)에 맞게 양식 표시를 사용자 지정하여 쇼핑객이 자신의 화면에 맞는 디자인을 볼 수 있도록 합니다.
- 전환을 최적화하기 위해 디바이스 유형에 따라 서로 다른 SMS 옵트인 방법을 표시하는 단일 양식을 생성합니다(예: 모바일 디바이스에는 탭하여 텍스트 옵션을 표시하고 데스크톱 디바이스에는 전화번호 입력란을 표시).
시작하기 전 안내 사항
편집기에서 양식을 열고 타겟팅 및 행동 섹션으로 이동합니다. 모든 쇼핑객이 양식을 볼 수 있도록 데스크톱과 모바일 모두에 표시되도록 양식이 설정되어 있는지 확인하세요.
이 설정을 사용하면 데스크톱과 모바일용 디스플레이를 별도로 구성할 수 있습니다.
동적 블록을 사용하여 데스크톱과 모바일 보기를 구분하여 만들기동적 블록을 사용하여 데스크톱과 모바일 보기를 구분하여 만들기
블록 추가 탭에서 기존 또는 새로 추가한 양식의 모든 블록 또는 입력란을 동적으로 만들 수 있습니다. 특정 블록을 표시할 디바이스를 조정하려면 다음 단계를 따르세요:
- 양식 미리 보기 패널에서 블록(예: 텍스트 블록)을 클릭 합니다.
- 블록의 왼쪽에 있는 설정 메뉴에서 아래로 스크롤하여 표시 여부로 이동합니다.
- 데스크톱, 모바일 또는 모든 디바이스에서 블록을 표시할지 여부를 선택합니다.
- 동적으로 만들려는 모든 블록에 대해 이 과정을 반복합니다.
각 기기에서 양식이 어떻게 표시되는지 미리 보려면 양식 편집기의 오른쪽 상단에 있는 보기 선택기를 사용하세요. 데스크톱 아이콘과 모바일 디바이스 아이콘을 토글하여 각 보기를 앞뒤로 넘길 수 있습니다.
- 데스크톱 보기는 데스크톱에서 사이트를 탐색하는 쇼핑객에게 양식이 어떻게 표시되는지 보여줍니다. 이 보기에는 데스크톱 및 모든디바이스로 구성된 블록만 표시됩니다.
- 모바일 보기에서는 쇼핑객이 모바일 장치에서 검색할 때 표시되는 내용을 미리 볼 수 있습니다. 모바일 및 모든디바이스에대해 구성된 블록을 표시합니다.
예
양식의 제목 텍스트가 데스크톱과 모바일 장치에서 다르게 표시되기를 원한다고 가정해 보겠습니다. 이를 구성하려면 다음과 같이 하세요:
- 오른쪽 상단의 보기 선택기에서 데스크톱 아이콘을 선택합니다.
- 양식 미리 보기에서 편집할 텍스트를 선택하고 변경합니다.
- 텍스트 블록의 설정 메뉴에서 표시 여부 로 스크롤하여 텍스트 블록이 데스크톱에만 표시되도록 설정합니다.
데스크톱에만 표시되도록 블록을 설정하면 모바일 사용자에게 블록을 숨기도록 선택하는 것이므로 모바일 미리보기에서는 블록이 표시되지 않습니다.
- 모바일 보기를 조정하려면 보기 선택기에서 모바일 아이콘을 선택하여 모바일 미리 보기로 전환합니다.
- 블록 추가 탭으로 이동하여 새 텍스트 요소를 모바일 미리 보기로 끌어다 놓습니다.
- 모바일 쇼핑객을 위한 기본 헤드라인 텍스트를 사용자 지정합니다. 이 텍스트는 데스크톱 버전에서 사용한 텍스트와 달라야 합니다.
- 텍스트 블록의 설정 메뉴에서 표시 여부 까지 아래로 스크롤하여 이 텍스트 블록을 모바일에 표시하도록 설정합니다.
- 선택 사항입니다: 디바이스 유형에 따라 다르게 표시하려는 다른 요소나 입력란에 대해서도 이 과정을 반복합니다(예: 데스크톱 쇼핑객에게는 이미지를 표시하지만 모 바일에서는 숨김).
- 양식의 이미지를 동적으로 만들고 싶다면 그렇게 할 수 있습니다:
- 모바일 보기와 데스크톱 보기 모두에 사이드 이미지를 추가하거나 둘 중 하나만 추가할 수 있습니다.
- 데스크톱 보기에서는 사이드 이미지를 사용하고 모바일에서는 헤드라인 텍스트 위에 이미지를 배치하거나 그 반대의 경우도 마찬가지입니다.
- 양식의 이미지를 동적으로 만들고 싶다면 그렇게 할 수 있습니다:
동적 블록을 사용하여 SMS 동의 수집 최적화하기
SMS 동의를 수집하는 가입 양식이 있는 경우 동적 블록을 사용하여 각 장치에 맞게 SMS 옵트인 방법을 최적화할 수 있습니다(예: 모바일 쇼핑객에게는 탭 투 텍스트 버튼을 표시하고 데스크톱 쇼핑객에게는 전화 번호 입력란을 표시하는 방식).
이메일과 전화번호를 모두 수집하는 양식 라이브러리의 미리 작성된 템플릿에는 각 디바이스에서 최적화된 SMS 옵트인을 위한 동적 블록이 이미 설정되어 있습니다. 이러한 템플릿 중 하나를 선택하는 경우 블록을 구성할 필요 없이 브랜드에 맞게 양식의 스타일만 사용자 지정하면 됩니다.
새로 시작하거나 SMS 구독자를 수집하기 위해 새 양식을 만들려면 스마트 옵트인을 사용하여 SMS 동의를 수집하는 방법에 대한 가이드를 참조하세요.
설정하려면 다음과 같이 하세요:
- 편집기에서 기존 양식을 열고 메뉴 모음에서 SMS 옵트인 단계로 이동합니다.
- 양식에 이 단계가 아직 없는 경우 +단계 > SMS 옵트인을 클릭하고 리스트를 선택하여 추가합니다.
- 양식에 이 단계가 아직 없는 경우 +단계 > SMS 옵트인을 클릭하고 리스트를 선택하여 추가합니다.
- 오른쪽 상단의 보기 선택기에서 데스크톱 아이콘을 선택하여 양식의 데스크톱 보기를 사용자 지정합니다.
- 미리 보기에서 전화번호 입력란을 선택하고 표시 여부 에서 데스크톱에 표시되도록 설정합니다. SMS 공개 언어와 제출 버튼에 대해서도 동일하게 수행합니다.
데스크톱 디바이스에서만 표시되도록 블록을 설정하면 모바일 보기에서는 블록이 숨겨지지 않는다는 점에 유의하세요.
- 오른쪽 상단 모서리에 있는 모바일 아이콘을 선택하여 양식의 모바일 보기로 전환합니다.
- 블록 추가 탭을 선택한 다음 새 버튼 블록을 모바일 미리 보기로 끌어다 놓습니다.
- 버튼의 동작을 SMS를 통한 구독으로 변경합니다.
- 탭 투 텍스트 클릭 유도 문안에 대한 구독 키워드 및 구독 메시지를 사용자 지정합니다.
- 전송 지역 아래에서 양식을 통해 타겟팅하려는 지역에 적합한 전화번호를 선택합니다.
- 데스크톱 보기와 모바일 보기를 오가며 블록이 각 디바이스에서 의도한 대로 표시되는지 확인합니다.
이제 동적 블록이 데스크톱과 모바일 모두에 가장 최적화된 방법으로 SMS 동의를 수집하도록 구성되었습니다.
다음 단계다음 단계
가입 양식을 게시하기 전에 스타일 탭으로 이동하여 브랜드에 맞게 레이아웃, 글꼴 및 색상을 변경합니다. 또한 SMS 공개 언어를 추가하고 사용자 지정해야 합니다.
추가 자료추가 자료
코스: 클라비요 제품 인증서