플로우 이메일에서 동적 블록을 만드는 방법

학습 내용

동적 표 블록을 사용해 지표 트리거 플로우에 제품 및 기타 이벤트 정보를 추가하는 방법을 알아보세요. 이 문서에서는 남겨진 제품을 보여 주는 장바구니 이탈 알림을 예로 들어 동적 블록을 만드는 방법을 알아볼 거예요.

Klaviyo의 사전 구축 전자상거래 연동(예: Shopify, BigCommerce, Magento 또는 WooCommerce) 중 하나를 사용 중이라면 이러한 블록을 수동으로 만들 필요가 없어요. 대신 플로우 라이브러리를 사용 하여 템플릿으로 사용할 수 있는 사전 구축된 완전한 기능의 플로우 이메일을 찾아보세요.

지표 트리거 플로우에서는 플로우를 트리거하는 이벤트를 기반으로 이메일 콘텐츠를 개인화할 수 있어요. 예를 들어 체크아웃을 시작하면 수신자가 장바구니로 돌아가 구매를 완료하도록 유도하기 위해 장바구니 이탈 이메일에 제품 이미지와 가격을 포함할 수 있어요. 동적 표 블록은 장바구니의 각 항목에 대해 지정한 정보로 자동으로 반복됩니다.

This content requires Functional cookies to be enabled.

Update Cookie Settings

시작하기 전에 알아야 할 것

시작하기 전에 사용할 수 있는 이벤트 데이터가 있는지 확인해 주세요. Klaviyo에 이벤트가 있는지 확인하려면 분석 > 지표로 이동해 주세요.

이메일에서 이벤트 또는 프로필 데이터를 사용하는 방법이 익숙하지 않다면, 첫 단계로 메시지 개인화 참고 자료를 확인해 보세요.

또한 Klaviyo의 데이터 유형, 특히 리스트 (즉, 배열)를 이해하면 도움이 돼요. 배열은 동일한 방식으로 구조화된 여러 데이터 조각을 저장하는 방법이에요. 예를 들어, 고객의 장바구니 항목은 Checkout Started 이벤트 내에서 배열로 저장돼요. items 배열에는 주문한 각 항목당 1개의 항목이 포함되며, 각 항목에는 해당 항목의 세부 정보(예: 항목 이름, 이미지 URL, 수량, 사이즈, 색상 등)가 포함돼요.

동적 테이블 블록을 사용할 수 있는 플로우 유형은 무엇인가요?

동적 표 블록에는 고객이 어떤 방식으로든 상호작용한(예: 구매했거나 장바구니에 담아둔) 하나 이상의 제품에 대한 정보가 포함돼요. 이 테이블 블록은 고객의 행동에 따라 포함될 수 있는 제품 수가 달라질 수 있는 이벤트에 유용해요. 동적 테이블 블록은 다음 이벤트에 의해 트리거되는 플로우에 유용해요:

• 주문 완료(주문 확인 플로우)
• 결제 시작(중단된 결제 플로우)
• 주문 처리 완료(배송 확인 플로우)
• 취소된 주문(취소 확인)
• 1개 이상의 제품 목록을 포함하는 기타 모든 이벤트

동적 테이블 블록은 이벤트에 항상 단일 제품만 포함되는 경우 유용하지 않습니다. 아래 이벤트에는 대신 정적 테이블 블록이 필요합니다.

• 장바구니에 추가됨(결제 이탈 플로우)
• 조회한 제품(탐색 이탈 플로우)

단일 제품 이벤트용 정적 표 블록을 만드는 방법을 알아보세요.

1. 플로우 만들기

플로우를 만드는 것부터 시작하세요:

1. Klaviyo에서 플로우 탭으로 이동하세요.
2. 플로우 만들기를 클릭하세요.
3. 나만의 빌드를 클릭하세요.
4. 플로우 이름을 지정하고 플로우 만들기를 클릭하세요.
5. 트리거 선택 아래에서 내 지표를 클릭하세요.
6. 트리거 지표를 전송하는 연동(예: Shopify)을 선택해 주세요.
7. 플로우를 트리거해야 하는 이벤트를 선택하세요. 이 예시에서는 Checkout Started 이벤트를 사용할게요. 이렇게 하면 장바구니 이탈 블록을 구성하는 데 필요한 이벤트 데이터에 액세스할 수 있어요.
8. 완료를 클릭합니다.
9. 플로우에 이메일 작업을 드래그 앤 드롭해 주세요.

2. 플로우 이메일에 동적 테이블을 추가하세요

다음으로 플로우 이메일에 동적 테이블을 추가하세요:

1. 지난 섹션에서 플로우에 추가한 이메일 블록을 클릭하세요.
2. 템플릿 옆에서 템플릿 선택을 클릭하세요.
3. 기본으로 사용할 템플릿을 선택해 주세요.
4. 이메일에 표 블록을 드래그해 추가하세요.
5. 스타일 > 동적을 클릭해 테이블을 동적 블록으로 변환하세요. 그러면 행 컬렉션과 행 별칭의 2개 필드가 표시되며, 3단계와 4단계에서 이를 채우게 돼요.
6. 열 유형을 조정하려면 콘텐츠 탭으로 돌아가서 클릭해 주세요.
7. 일반적으로 장바구니 이탈 메시지는 왼쪽에 이탈한 상품의 이미지가 표시되고 오른쪽에 상품에 대한 세부 정보가 표시돼요. 왼쪽 또는 오른쪽 행 선택기를 클릭한 다음 텍스트 또는 이미지를 클릭하여 셀 유형을 변경하세요.
   

3. 행 컬렉션을 식별하세요

이 단계에서는 반복하려는 배열의 이름을 행 컬렉션 필드에 추가할 거예요. 배열 이름을 찾는 방법:

1. 미리보기 및 테스트를 클릭합니다.
2. 이벤트의 미리보기 데이터를 스크롤하여 필요한 정보가 포함된 배열을 찾을 때까지 확인하세요.
3. 아직 아무도 플로우의 트리거 작업을 완료하지 않았다면 플로우에 사용할 수 있는 미리 보기 데이터가 없어요. 사이트로 이동해 작업(예: 장바구니에 상품을 추가하고 결제를 시작하기)을 수행하면 이벤트가 Klaviyo의 미리 보기 옵션에 표시돼요.
4. 이 예에서는 항목 정보를 저장하는 배열이 2개 있어요:
5. 반복 테이블 블록에 표시하는 데 필요한 자세한 정보가 포함되어 있으므로 더 자세한 배열인 line_items를 사용하는 것이 좋아요. Row collection 필드에 설정할 적절한 변수를 찾으려면 배열의 첫 번째 섹션에서 변수 두 개를 선택한 다음 복사해 주세요. 이 예에서는 variant_price와 title의 태그를 복사해 주세요. 다음은 이 예의 두 태그예요:
6. {{ event.extra.line_items.0.variant_price }}
7. {{ event.extra.line_items.0.title }}

• 항목
  각 항목 이름의 간단한 목록이 포함된 최상위 배열이에요.
• line_items,
  extra 배열 안에 중첩된 배열로, 각 항목의 제목, 가격, SKU, 이미지 URL 등 더 자세한 정보를 포함해요.
  

8. 중괄호는 무시하고 그 안의 변수를 확인하세요. 두 변수의 시작 부분이 동일하다는 점에 유의하세요: event.extra.line_items.0.
9. 변수의 이 부분 끝에 있는 점과 숫자를 제외하고, 그 전까지의 모든 내용을 행 컬렉션으로 사용하세요. 이 예시에서 행 컬렉션 필드의 적절한 설정은 event.extra.line_items입니다.

대체 콘텐츠 설정(선택 사항)

선택한 행 컬렉션에 데이터가 없는 경우 대체 콘텐츠가 표시돼요. 이는 트리거 이벤트 내에 일관되게 표시되지 않는 데이터를 기반으로 테이블을 빌드할 때만 필요해요. 대체 콘텐츠를 추가하려면 대체 콘텐츠 옵션을 켠 다음 표시되는 필드에 콘텐츠(예: 텍스트 또는 이미지)를 추가해 주세요.

4. 행 별칭을 선택하세요

행 별칭은 원하는 어떤 텍스트로도 설정할 수 있어요(특수 문자나 공백은 제외). 이 별칭은 동적 테이블 블록에서 사용하며, 위에서 선택한 배열에서 가져와야 하는 변수를 식별하는 데 사용해요. 기억하기 쉽도록 간단하면서도 설명적인 별칭을 선택하는 것이 도움이 돼요.

이 예시에서는 동적 테이블 블록이 장바구니 이탈에 있는 항목 목록을 기준으로 반복되므로, item을 별칭으로 사용하기에 적합합니다. 블록이 블로그 게시물 목록을 기준으로 반복된다면, post를 별칭으로 사용할 수 있습니다.

원하는 별칭을 어떤 것이든 사용할 수 있지만, 배열의 변수에서 해당 별칭을 일관되게 사용해야 해요(다음 단계에 설명된 대로).

Row Collection 및 Row Alias 필드를 입력했으면 테이블을 만들 준비가 된 거예요.

5. 동적 제품 세부 정보 추가

데이터 소스를 설정한 후, 태그를 사용해 이메일에 텍스트를 추가할 수 있습니다. 이 이메일은 장바구니 이탈 플로우용이므로 남겨진 제품 이름을 가격, 구매 링크 같은 기타 세부 정보와 함께 표시하는 것이 중요해요.

블록에 제품 제목을 입력하려면:

1. 표의 열 중 하나로 이동하세요. 첫 번째 열에는 이미지를, 두 번째 열에는 텍스트를 넣고 싶다면 블록의 콘텐츠 섹션 오른쪽에 있는 열 선택기를 클릭하세요.
2. 미리 보기 모달에서 전체 이벤트 변수를 붙여넣으세요(예: {{ event.extra.line_items.0.title  }}).
3. 변수 내의 행 컬렉션(즉, 행 컬렉션에 사용한 텍스트)과 다음 점과 숫자를 마지막 단계에서 선택한 별칭(예: 항목)으로 바꾸고 주변 괄호는 그대로 유지합니다. 이 예의 경우 {{ event.extra.line_items.0.title  }}은 {{ item.title }}이 됩니다.
   

4. 제목이 표시되는지 확인하려면 이메일을 미리보기로 확인해 주세요. 표시되지 않으면 텍스트의 철자, 대문자 사용, 서식뿐 아니라 스타일 탭의 설정도 다시 확인해 오류가 없는지 확인해 주세요.

같은 단계를 반복해 추가 항목 세부 정보를 더 추가해 주세요.

제품 제목에 하이퍼링크 추가

제품 제목에 하이퍼링크를 추가하려면:

1. 이벤트 세부 정보에서 제품 URL 변수를 찾으세요.
2. 위의 변수와 마찬가지로 행 컬렉션과 번호를 행 별칭으로 바꾸세요(예: {{ event.extra.line_items.url }}이(가) {{ item.url }}(으)로 바뀜).
3. 항목 제목의 전체 변수를 강조 표시하세요(예: {{ item.title }}).
4. 링크 아이콘을 클릭하고 URL 변수를 URL 필드에 붙여넣으세요.

통화 변수 관련 고려 사항

항목 가격이 이벤트 세부 정보에서 숫자(통화 기호 없음)로 전달되는 경우 currency_format 태그를 사용해 통화 형식을 적용해 주세요. 이 태그를 적용하려면 아래 코드에서 variable_name을 전체 가격 변수로 바꾸되, 원래 변수의 중괄호는 제외해 주세요:

{% currency_format variable_name %}

따라서 최종 변수는 다음과 같이 표시될 수 있어요.

{% currency_format item.price %}

6. 이미지 추가

동적 이미지를 삽입하려면 미리보기 모달에서 이미지의 이벤트 변수를 찾아보세요. 대개 이 변수는 image, img 또는 src 아래에 나열되지만, 연동에 따라 달라요. 여기서는 src 아래에 있어요: {{ event.extra.line_items.0.product.images.0.src  }}. 5단계에 설명된 대로 이 변수에도 동일한 조정을 적용하세요(event.extra.line_items.0을(를) item(으)로 바꾸기). event.extra.line_items 내의 이벤트 변수 배열로, 이 특정 항목의 이미지를 보관합니다.

1. 이 변수가 있으면 이미지가 표시될 열로 이동하세요(이 경우에는 왼쪽 열).
2. 현재 Text 로 설정되어 있다면 셀 콘텐츠 아래에서 이미지 를 클릭합니다.
3. 이미지 선택을 클릭해 주세요.
4. 동적 이미지 탭에서 이미지 변수를 동적 변수 또는 동적 URL 필드에 붙여 넣습니다.
5. 맞춤 이미지 이벤트 변수 {{ item.product.images.0.src }}을(를) 입력하세요.
6. 저장을 클릭합니다.
7. 5단계의 제품 URL 변수를 링크 주소 필드에 추가하면 이미지를 클릭할 수 있어요.
8. 이미지의 최대 너비를 설정하세요. 250~300부터 시작해 필요에 따라 조정하면 돼요.
9. 변경을 모두 마치면 완료를 클릭하고 이메일을 미리 보며 예상대로 표시되는지 확인해 주세요. 이미지가 표시되지 않으면, 미리 보기 모달의 변수와 철자가 일치하는지 확인해 주세요.

7. 이메일 미리보기

위 단계를 모두 완료한 후 미리보기에서 이메일 템플릿이 아래 예시와 비슷하게 표시될 거예요.

동적 콘텐츠에서 어떻게 보이는지 확인하고 링크가 제대로 작동하는지 확인하려면 미리보기 및 테스트를 클릭하세요. 오류가 있으면 변수의 철자와 구조, 그리고 블록의 스타일 탭을 확인해 보세요.

이와 같은 개념을 사용해 서로 다른 지표를 기반으로 트리거되는 플로우에 대한 추가 동적 블록을 만들 수도 있어요.

단일 제품 이벤트용 정적 테이블 블록을 생성합니다.

이벤트에 단일 제품만 포함될 수 있는 경우 정적 테이블 블록을 사용하세요. 이러한 이벤트의 경우 Row collection 또는 Row alias를 설정할 필요가 없으며, 이벤트 데이터의 편집되지 않은 변수를 직접 사용할 수 있어요.

1. Klaviyo에서 플로우 탭으로 이동하세요.
2. 플로우 만들기를 클릭하세요.
3. 나만의 빌드를 클릭하세요.
4. 플로우 이름을 지정하고 플로우 만들기를 클릭하세요.
5. 트리거 선택 아래에서 내 지표를 클릭하세요.
6. Viewed product 또는 Added to cart 같은 단일 제품 지표를 선택하세요.
7. 완료를 클릭합니다.
8. 플로우에 이메일 작업을 드래그 앤 드롭해 주세요.
9. 템플릿 옆에서 템플릿 선택을 클릭하세요.
10. 템플릿을 선택하여 기반으로 사용하세요.
11. 이메일에 표 블록을 드래그해 추가하세요.
12. 기본적으로 Styles 아래에서 Data 필드는 Static(으)로 설정되어 있으며, 이 설정은 변경하지 마세요.
    

13. & 테스트 미리 보기를 클릭하여 메시지에 사용할 수 있는 변수를 확인합니다. 이미지 URL 변수를 클릭하여 복사합니다.
    

14. 셀 선택기 및 셀 콘텐츠 필드를 사용해 왼쪽 셀에서 이미지 셀 유형을 사용하도록 설정하세요.
15. 이미지 선택을 클릭해 주세요.
16. 동적 이미지를 선택해 주세요.
17. 복사한 이미지 URL 변수를 동적 변수 또는 동적 URL 필드에 붙여 넣으세요.
18. 저장을 클릭합니다.
19. 오른쪽 셀에서 텍스트 셀 유형을 사용하도록 설정하세요.
20. 표시하려는 모든 변수를(예: 제품 제목, 제품 가격) 복사한 다음 텍스트 셀에 붙여넣어 주세요.
    

21. 장바구니로 돌아갈 수 있는 CTA 버튼 같은 추가 블록을 추가하고, 원하는 대로 이메일 스타일을 지정해 주세요.
22. 완료되면 종료를 클릭하세요.

추가 자료