이메일에서 테이블 블록을 사용하는 방법

학습 내용

이메일에서 테이블 블록을 사용하는 방법을 알아보세요. 이 블록은 이미지와 텍스트를 나란히 표시할 수 있어요. 테이블 블록은 동적으로도 작동할 수 있으며, 데이터를 반복 처리해 각 수신자에 맞게 이메일을 맞춤 설정할 수 있어요.

테이블 블록 이해하기

표 블록에는 2가지 유형이 있어요:

• 정적
  이 유형의 표 블록은 선택한 정확한 행과 열 수를 표시해요. 각 수신자는 동일한 표 레이아웃을 보지만, 개인화, 이벤트, 카탈로그 또는 기타 태그를 사용하면 콘텐츠는 달라질 수 있어요.
• 동적
  이러한 테이블 블록을 사용하면 데이터 목록(예: 장바구니 이탈 또는 주문 확인 플로우의 항목 목록)을 반복할 수 있어요. 행 수는 목록 항목 수에 따라 결정돼요. 누군가 항목 1개를 주문했다면 1행이 되고, 항목 5개를 주문했다면 5행이 돼요.

동적 테이블 블록의 가장 일반적인 사용 사례는 장바구니 이탈 메시지에서 제품을 강조 표시하는 것이에요. 이 기능은 동적 블록을 사용해 이미지, 제품명, 가격이 포함된 여러 행을 표시하여 이탈된 각 항목을 보여줘요.

테이블 블록을 사용해야 하는 경우

표 블록은 2개 이상의 콘텐츠를 나란히 배치하는 여러 방법 중 하나예요. 대안으로는 분할 블록과 열이 있어요.

아래 표에서 콘텐츠를 나란히 배치하는 다양한 옵션을 자세히 알아보세요.

정적 테이블 블록

여기서 “static”이라는 단어는 표의 콘텐츠와 행 수가 모든 수신자에게 동일하게 유지된다는 의미예요. 콘텐츠가 바뀌는 유일한 경우는 고정 표 블록 안에 개인화, 날짜, 카탈로그 태그 같은 동적 콘텐츠를 추가할 때예요.

고정 테이블 블록 사용 사례

고정 테이블 블록을 사용해 다음을 수행하세요:

• 플래시 세일이나 제품 출시와 같이 특정 항목을 표시하세요.
• 항상 동일한 개수의 항목을 포함해 주세요(예: 탐색 이탈 메시지에 가장 최근에 조회한 항목을 표시하세요).
• 이벤트 데이터에 다음을 포함하는 항목 1개만 들어 있는 플로우 메시지를 생성해 주세요.
  • 장바구니 이탈 플로우('장바구니에 추가' 트리거)
  • 탐색 이탈 플로우
  • 재입고 및 가격 인하 플로우
• 정적 텍스트와 이미지를 나란히 배치하고 싶어요

정적 테이블 블록을 만드는 방법

1. 이메일(예: 캠페인 이메일, 템플릿 또는 플로우 이메일)로 이동하세요.
2. 블록 메뉴에서 표 블록을 캔버스로 드래그하세요.
   

3. 블록의 스타일 메뉴를 여세요. 테이블 블록의 기본 설정이므로 정적이 이미 선택되어 있어요.
   

4. 열 아래에서 열 추가를 클릭해 추가 열을 추가하세요.
   

5. 행에서 행 추가를 클릭해 추가 행을 더하세요.
   

6. 블록의 콘텐츠 탭으로 돌아가세요.
7. 셀 선택기 영역을 사용해 편집할 셀을 선택하세요.
   

8. 셀 콘텐츠 메뉴를 사용해 해당 셀이 텍스트인지 이미지인지 선택하세요. 각 셀에 대해 반복하세요.
9. Cell content 메뉴 아래에 콘텐츠(예: 텍스트 또는 이미지)를 추가하세요.
10. 모든 셀에 콘텐츠를 추가한 후 뒤로 화살표를 클릭해 기본 콘텐츠 메뉴로 돌아가 이메일 빌드를 계속하세요.
    

동적 테이블 블록

동적 테이블 블록은 데이터 세트를 반복하여, 항목 수에 따라 콘텐츠를 반복해요. 블록은 목록 끝에 도달할 때까지 반복돼요. 예를 들어, 누군가의 장바구니에 있는 정확한 제품 수를 표시할 수 있어요. 

동적 블록을 사용하려면 각 목록 항목이 동일한 형식을 따르는 중첩 목록으로 형식화된 데이터를 참조해야 해요. 가장 일반적인 사용 사례는 플로우의 트리거 이벤트(예: 결제 시작, 주문 완료)에서 찾을 수 있는 제품 정보이지만, 웹 피드를 사용해 블로그 게시물을 나열하거나 목록으로 형식화된 프로필 데이터를 참조할 수도 있어요.

동적 테이블 블록의 요소

동적 콘텐츠 블록을 만들려면 3가지 요소가 필요해요:

• 행 컬렉션
  반복할 데이터의 위치입니다. 소스 데이터(예: 결제 시작 이벤트의 메타데이터에 있는 항목)를 볼 때, 관련 템플릿 태그 중 모든 태그에서 동일한 부분을 의미합니다.
• Row alias
  테이블이 데이터 세트를 반복 처리할 때 행 컬렉션을 참조하기 위한 약칭이에요. 행 별칭은 일반적으로 item이지만, 어떤 텍스트든 사용할 수 있어요.
• 동적 콘텐츠
  모든 행에 표시될 콘텐츠입니다. 예를 들어, 장바구니에 남겨둔 각 항목에 대해 이미지, 제품명, 가격, 같은 이메일의 다른 버전 정보를 표시할 수 있어요.

동적 테이블 블록 사용 사례

데이터 목록을 동적으로 참조하고 목록의 모든 항목이 동일한 방식으로 형식화되어 있다면 동적 테이블 블록을 사용해 주세요. 여기에는 다음이 포함됩니다.

• 장바구니 이탈 플로우(결제 시작 트리거)
• 주문 확인 플로우
• 상향 판매 또는 교차 판매 플로우

동적 테이블 블록을 만드는 방법

이 섹션에서는 동적 테이블 블록을 높은 수준에서 다뤄요. 이 프로세스에 대한 더 자세한 안내는 플로우 이메일에서 동적 블록을 만드는 방법을 참고해 주세요.

1. 이메일의 편집기로 이동하세요. 이벤트 데이터(예: 장바구니 이탈 세부 정보)를 사용하는 경우, 해당 이벤트에 의해 트리거되는 플로우 내 이메일로 이동하세요. 
2. 블록 메뉴에서 표 블록을 캔버스로 드래그하세요.
   

3. 블록의 스타일 메뉴를 열고 동적을 선택해 주세요.
   

4. Row collection을 설정하세요. 표시하려는 각 항목에서 일관되게 동일한 맞춤 설정 태그 부분을 사용하세요.
   • 예를 들어 첫 번째 항목의 이미지 태그가 {{ event.products.0.imageURL }} 이고 두 번째 항목의 이름 태그가 {{ event.products.1.name }} 라면, 행 컬렉션은 event.products여야 해요.
   • 행 컬렉션은 거의 항상 첫 번째 숫자 앞에 오는 태그 부분입니다(예: event.extra.line_items 전체 태그가 {{ event.extra.line_items.0.product.name }}인 경우).
5. 행 별칭을 item으로 설정하세요.
6. 블록의 콘텐츠 탭으로 돌아가세요.
   • 표의 각 셀에 콘텐츠를 추가해 주세요. 일반적으로 왼쪽 셀은 이미지이고, 오른쪽 셀은 제품 정보가 포함된 동적 태그가 들어 있는 텍스트예요.
7. 테이블의 각 태그에서 첫 번째 숫자 앞에 오는 모든 내용을 행 별칭(예: “item”)으로 바꾸세요. 예를 들어:
   • {{ event.extra.line_items.0.imageURL }}은(는) {{ item.imageURL }}(으)로 바뀝니다.
   • {{ event.items.0.product.name }}이(가) {{ item.product.name }}이(가) 돼요.
8. 이메일을 미리 보려면 미리보기 및 테스트를 클릭하세요.
   • 올바른 데이터로 미리 보고 있는지 확인하세요(예: 장바구니 이탈 메시지라면 체크아웃 시작 이벤트로 미리 보기). 그렇지 않으면 테이블에 아무것도 표시되지 않아요.

이 프로세스를 통해 개발자와 코딩에 익숙한 마케터는 고도로 맞춤화된 콘텐츠를 만들 수 있어요. 팀에 개발자가 없고 이 블록을 직접 만드는 데 익숙하지 않다면, 도움을 받기 위해 Klaviyo 파트너에게 문의해 보세요.

장바구니 이탈 플로우를 만드는 방법 또는 이벤트 데이터를 사용하여 이메일 및 SMS 플로우를 개인화하는 방법에 대해 자세히 알아보세요.

동적 테이블 블록 작동 방식

동적 테이블 블록은 대부분의 프로그래밍 언어에서 for 루프가 작동하는 방식과 정확히 같아요.

• 행 컬렉션은 반복 처리할 데이터의 부분을 식별해요.
• 행 별칭은 동적 콘텐츠가 표시되는 위치를 식별하기 위한 별칭이에요.
• 행 별칭을 사용하는 모든 태그는, 표시되는 행을 기준으로 이벤트 데이터 내의 올바른 라인을 참조해요.

이메일이 렌더링되면 Klaviyo가 데이터 세트의 각 항목을 순회해요. 첫 번째로, 행 별칭이 [row collection].0.(으)로 대체되며 데이터 세트의 첫 번째 항목을 참조해요. 두 번째로, 행 별칭이 [row collection].1.(으)로 대체되며, 데이터 세트의 두 번째 항목을 나타내요. 그런 다음 이 프로세스는 항목이 더 이상 남지 않을 때까지 계속되며, 데이터 세트의 각 항목마다 행이 하나씩 생성돼요.

추가 자료