Klaviyo 고객 허브용 맞춤 HTML 및 CSS 블록을 만드는 방법
학습 내용
자체 HTML과 CSS를 사용해 Klaviyo 고객 허브용 맞춤형 블록을 만드는 방법. 기본 콘텐츠 블록 필드만으로는 충분히 유연하지 않을 때, 로열티 진행 상황 카드, 프로모션 모듈, 비교 표 같은 브랜드 콘텐츠를 만드는 데 활용할 수 있어요.
시작하기 전에 알아야 할 것
이 가이드는 콘텐츠 블록을 기반으로 구성되어 있어요. 이전에 콘텐츠 블록을 만든 적이 없다면 Klaviyo 고객 허브용 콘텐츠 블록을 만드는 방법부터 시작해 보세요. 단일 블록이 아니라 전체 Klaviyo 고객 허브의 모양을 변경하려면 Klaviyo 고객 허브 스타일을 지정하는 방법을 참고해 주세요.
맞춤 HTML 블록으로 할 수 있는 작업
맞춤 HTML 블록은 HTML용 코드 필드 1개와 CSS용 코드 필드 1개, 총 2개의 코드 필드가 있는 고급 콘텐츠 블록이에요. HTML은 블록의 구조와 콘텐츠를 정의하고, CSS는 스타일, 레이아웃, 반응형 동작을 제어해요. 맞춤 HTML 블록을 사용해 다음을 할 수 있어요:
- Klaviyo 프로필의 포인트 또는 등급 데이터를 사용해 로열티 진행 카드나 보상 요약을 표시해 주세요.
- 예를 들어 멤버십 등급이나 요금제를 설명하기 위한 비교 표를 만들어 보세요.
- 브랜드에 어울리는 프로모션 배너 또는 모듈을 만들어 보세요.
- 표준 헤더, 단락, 이미지 필드로는 할 수 없는 방식으로 콘텐츠를 배치하세요.
- 사이트에 정의된 사용자 지정 요소를 참조해 타사 위시리스트 또는 리뷰 도구 같은 기능을 추가할 수 있어요.
맞춤 HTML 블록은 다른 콘텐츠 블록과 함께 추천 탭에 표시되며, 사이트 내 콘텐츠 블록에서도 사용할 수 있어요. 로그인 상태, 그룹 기반 표시 여부, 예약, 표시 컨텍스트 설정은 다른 콘텐츠 블록과 동일한 방식으로 작동해요.
지원되는 항목과 지원되지 않는 항목
Klaviyo는 HTML과 CSS를 정리하고, CSS 범위를 블록으로 제한해 Klaviyo 고객 허브나 웹사이트의 나머지 부분을 변경할 수 없게 해요. 다음 제한 사항을 염두에 두세요:
- 지원됨: 구조와 콘텐츠는 HTML, 스타일과 레이아웃은 CSS, 프로필 데이터는 Klaviyo 맞춤 설정 태그, 추가 기능은 사이트에서 정의한 사용자 지정 요소로 지원돼요.
- JavaScript는 블록이 아니라 사이트에 있어요: HTML 필드에 JavaScript를 직접 작성할 수 없어요. 여기에 입력한 내용은 모두 제거되며 저장되지 않아요. 서드파티 연동을 포함한 기능을 추가하려면, 자체 사이트에서 커스텀 요소를 정의한 다음 블록에서 이를 참조해 주세요. 아래에서 커스텀 요소로 타사 도구 통합을(를) 확인해 보세요.
- 지원되지 않음: 페이지 전체 스타일 지정처럼 블록 외부의 어떤 항목에든 영향을 주는 CSS 또는 Klaviyo 기본 블록의 마크업을 수정하는 작업.
- 데이터: 표시하는 모든 데이터는 맞춤 설정 태그를 통해 Klaviyo 프로필 속성에서 가져와야 해요. 이벤트 데이터는 지원되지 않습니다.
사용자 지정 HTML 블록 만들기
- 웹사이트 탭에서 Klaviyo 고객 허브로 이동해 주세요.
- Klaviyo 고객 허브 탐색에서 디자인을 선택해 주세요.
- 허브 편집을 클릭해 Klaviyo 고객 허브 편집기를 여세요.
- 콘텐츠 블록을 추가하려면 왼쪽 탐색 모음에서 “+” 를 선택해 주세요.
- 직접 만들기를 클릭한 다음, 콘텐츠 패널 상단에서 HTML을 선택해 별도의 HTML 및 CSS 필드를 사용하세요.
- 내부 이름을 입력해 주세요. Klaviyo는 이 이름을 사용해 블록에서의 클릭을 보고하며, 블록을 만든 후에는 변경할 수 없어요.
- HTML 및 CSS 필드에 코드를 입력해 주세요. 아래에서 HTML 및 CSS 작성하기를 확인해 보세요.
- 로그인 상태, 그룹 기반 표시 여부, 일정, 표시 컨텍스트를 사용해 블록을 누가 볼지 설정해 주세요.
- 라이브 미리 보기를 확인하고 유효성 검사 경고를 해결해 주세요. HTML이 선택된 상태에서 게시를 클릭해 블록을 저장해 주세요. 사이트에 표시하려면 Klaviyo 고객 허브도 라이브 상태여야 해요.
HTML과 CSS를 작성하세요
HTML을 추가하세요
HTML 필드를 사용해 제목, 문단, 목록, 링크, 이미지, 표 같은 표준 요소로 블록의 구조를 만들 수 있어요. 일반 anchor 태그를 사용해 사이트의 페이지로 연결하세요. 블록 안에는 JavaScript를 작성할 수 없으므로 버튼과 링크는 URL로 연결되어야 해요. 더 인터랙티브한 기능이 필요하면 사용자 지정 요소를 사용하세요.
CSS로 스타일 지정
CSS 필드를 사용해 여백, 색상, 타이포그래피, 반응형 레이아웃을 제어할 수 있어요. 작성한 CSS는 이 블록에만 적용돼요. 기본적으로 맞춤 HTML 블록은 다른 콘텐츠 블록과 일치하도록 스타일이 지정되므로, 변경하려는 부분에 대해서만 CSS를 작성하면 돼요.
rewards-card같은 고유 클래스 이름을 요소에 지정하고, CSS에서 해당 클래스를 대상으로 지정해 주세요.- 작은 화면에서 블록이 올바르게 표시되도록
@media개 규칙을 추가해 주세요. - 스타일 탭에서 선택한 글꼴과 텍스트가 일치하도록
font-family: inherit을(를) 사용해 주세요.
개인화 추가
HTML에서 Klaviyo 맞춤 설정 태그를 사용해 로열티 포인트 잔액과 같은 프로필 데이터를 표시하세요. 쇼핑객이 데이터를 제공하지 않았을 때 블록에 빈 공간이 보이지 않도록 항상 기본값을 포함하세요. 프로필 데이터는 로그인했거나 식별된 쇼핑객에게만 표시돼요. 그 외의 모든 사용자는 기본값을 확인해요.
예: 로열티 포인트 카드
이 예시에서는 리워드 페이지로 연결되는 버튼과 함께 쇼핑객의 등급과 포인트 잔액을 보여줘요. 속성 이름(loyalty_points 및 Membership Tier)을 로열티 연동에서 동기화하는 프로필 속성으로 바꾸고, 링크 URL을 업데이트해 주세요.
<div class="rewards-card">
<p class="rewards-eyebrow">{{ person|lookup:'Membership Tier'|default:'Member' }} status</p>
<h3 class="rewards-points">{{ person|lookup:'loyalty_points'|default:'0'|floatformat:0 }} points</h3>
<p class="rewards-copy">Redeem your points for discounts on your next order.</p>
<a class="rewards-button" href="/pages/rewards">Redeem rewards</a>
</div>.rewards-card {
padding: 20px;
border-radius: 12px;
background: #f6f1ea;
color: #232323;
font-family: inherit;
}
.rewards-eyebrow {
margin: 0 0 4px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.rewards-points {
margin: 0 0 8px;
font-size: 28px;
line-height: 1.2;
}
.rewards-copy {
margin: 0 0 16px;
font-size: 14px;
}
.rewards-button {
display: inline-block;
padding: 10px 18px;
border-radius: 999px;
background: #232323;
color: #ffffff;
font-size: 14px;
text-decoration: none;
}
@media (max-width: 480px) {
.rewards-card {
padding: 16px;
}
.rewards-points {
font-size: 24px;
}
}예: 멤버십 비교 표
이 예시에서는 두 가지 멤버십 등급을 비교해요. 이 래퍼를 사용하면 좁은 화면에서 레이아웃이 깨지지 않고 표를 가로로 스크롤할 수 있어요.
<div class="compare-wrap">
<table class="compare">
<thead>
<tr>
<th></th>
<th>Standard</th>
<th>VIP</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Free shipping</th>
<td>Orders over $75</td>
<td>Always</td>
</tr>
<tr>
<th scope="row">Early access</th>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Birthday reward</th>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>.compare-wrap {
overflow-x: auto;
}
.compare {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.compare th,
.compare td {
padding: 10px 12px;
border-bottom: 1px solid #e4e4e4;
text-align: left;
}
.compare thead th {
background: #f6f1ea;
}맞춤 요소로 타사 도구 통합
맞춤 HTML 블록에 JavaScript를 직접 작성할 수는 없지만, 사이트에서 정의한 맞춤 요소를 참조하면 JavaScript 기반 기능을 추가할 수 있어요. 맞춤 요소는 <wishlist-widget>처럼 이름에 하이픈(-)이 포함된, 재사용 가능한 HTML 태그로, 개발자가 스토어프런트에서 JavaScript로 등록해요. 블록에는 태그만 포함되고, 실제 작업은 사이트 코드가 처리해요. 위시리스트, 리뷰, 로열티 앱 같은 서드파티 도구의 콘텐츠를 표시하려면 이 방법을 사용해 주세요.
사용 방법
- 개발자 또는 타사 앱이 스토어프런트에서 사용자 지정 요소를 정의해요. 이는 보통 테마 또는 앱 자체 스크립트를 통해 수행돼요.
- HTML 필드에서 요소가 표시되길 원하는 위치에 태그를 추가해 주세요. 하이픈(-)이 포함된 모든 태그 이름을 사용할 수 있어요.
- 선택적으로 맞춤 설정 태그를 사용해 프로필 데이터를 속성으로 요소에 전달할 수 있어요.
- 블록을 게시해 주세요. 사이트에서 해당 요소를 정의한 페이지에서 Klaviyo 고객 허브가 로드되면, 사이트 코드가 블록 안에 이를 렌더링해요.
이 예시에서는 위시리스트 요소를 블록에 배치하고, 쇼핑객의 이메일 주소를 전달해요. 태그 안의 링크는 페이지에 요소가 정의되어 있지 않을 때 표시되는 대체 콘텐츠예요. 태그 이름과 속성은 서드파티 도구에서 사용하는 것으로 바꿔 주세요.
<div class="wishlist-block">
<h3>Your wishlist</h3>
<wishlist-widget customer-email="{{ person.email }}" max-items="4">
<a href="/pages/wishlist">View your wishlist</a>
</wishlist-widget>
</div>알아야 할 정보
- 요소는 사이트에 정의되어 있어야 해요. 정의하는 스크립트가 사이트에서 로드된 페이지에서만 작동해요. Klaviyo는 타사 스크립트를 대신 로드해 주지 않아요. 요소를 사용할 수 없는 경우에도 쇼핑객이 유용한 내용을 볼 수 있도록 태그 안에 대체 콘텐츠를 추가해 주세요.
- 개인화는 속성에서 작동해요. 블록의 다른 곳과 동일한 규칙이 적용돼요. 프로필 데이터는 로그인했거나 식별된 쇼핑객에게만 표시되므로, 그 외 모든 사람을 위해 기본값을 포함해 주세요.
- 사용자 지정 요소는 사이트의 스타일을 상속받아요. Klaviyo 고객 허브는 iframe이나 shadow DOM 내부에서 렌더링되지 않으므로, 사용자 지정 요소가 사이트의 CSS를 적용받고 그 영향을 받을 수 있어요. 블록의 CSS에서 요소의 태그에도 스타일을 지정할 수 있어요.
- JavaScript는 블록이 아니라 사이트에서 작성해 주세요. HTML 필드에 입력한 모든 JavaScript는 삭제되며 저장되지 않아요. 사이트에서 커스텀 요소로 기능을 정의한 다음, 블록에서 해당 요소를 참조해 주세요.
- 타사 코드와 데이터에 대한 책임은 사용자에게 있어요. 프로필 데이터를 타사 도구에 전달하기 전에, 그렇게 해도 개인정보 보호 관련 의무를 충족하는지 확인해 주세요. Klaviyo Support에서는 맞춤 요소나 그 뒤에서 작동하는 타사 도구의 문제를 해결해 드릴 수 없어요.
온사이트 블록에서 맞춤 HTML 사용하기
맞춤 HTML은 For you 탭에서와 동일한 방식으로 온사이트 콘텐츠 블록에서 작동해요. HTML 및 CSS 필드를 사용해 동일한 콘텐츠 블록 편집기에서 블록을 만들며, 이 문서의 내용(맞춤 설정 태그, 사용자 지정 요소, 클릭 트래킹 포함)이 모두 적용돼요.
스토어프런트에서 블록이 표시될 때는 다음 사항을 염두에 두세요:
- 사이트의 CSS가 블록에 영향을 줄 수 있어요. 온사이트 블록은 페이지에 직접 렌더링되므로, 사이트의 스타일이 표시 방식에 영향을 줄 수 있어요. 게시한 후 라이브 페이지에서 블록을 확인해 보세요.
- 미리보기는 실제 페이지와 다를 수 있어요. 편집기 미리보기에서는 사이트의 모든 스타일을 재현할 수 없어요.
- 맞춤 요소는 블록이 표시되는 모든 페이지에서 로드되어야 해요. 블록이 표시되는 각 페이지에서 맞춤 요소를 정의하는 스크립트가 로드되도록 확인해 주세요.
온사이트 콘텐츠 블록에서 맞춤 HTML을 사용하세요
커스텀 HTML은 사이트 내 콘텐츠 블록에서도 작동하며, Klaviyo 고객 허브 서랍 안이 아니라 스토어프런트 페이지에 직접 표시돼요. 동일한 콘텐츠 블록 편집기에서 생성하며, 동일한 규칙이 적용돼요: HTML을 선택해 HTML 및 CSS 필드를 분리해서 사용하고, 프로필 데이터에는 맞춤 설정 태그를 사용하며, 추가된 기능이 있다면 커스텀 요소를 참조하세요. 사이트 내에서는 몇 가지가 다르게 작동해요:
- 사이트의 CSS가 더 큰 영향을 미쳐요. 이 블록은 페이지에 직접 렌더링되므로, Klaviyo 고객 허브 서랍 안에 있을 때보다 사이트의 스타일이 더 크게 영향을 줄 수 있어요. 라이브 페이지에서 CSS를 테스트해 보세요.
- 미리보기는 페이지와 정확히 일치하지 않을 수 있어요. 온사이트 미리보기를 사용해 블록을 확인한 다음, 게시된 블록이 스토어프런트에서 어떻게 보이는지 확인해 보세요.
- 맞춤 요소는 블록이 표시되는 모든 페이지에서 로드되어야 해요. 사용자 지정 요소를 참조하는 경우, 온사이트 블록이 표시되는 각 페이지에서 해당 요소를 정의하는 스크립트가 로드되었는지 확인해 주세요.
블록 미리보기 및 테스트
HTML과 CSS를 편집하면 미리보기가 업데이트돼요. 코드에 오류가 있으면, 편집기에서 유효성 검사 메시지를 표시해 게시하기 전에 수정할 수 있어요. 게시하기 전:
- 다른 사용자로 미리보기를 사용해 프로필을 선택하고 로그인 상태와 로그아웃 상태의 보기를 비교해 보세요.
- 기본값이 올바르게 표시되는지 확인하려면, 맞춤 설정 태그에서 사용하는 데이터가 누락된 프로필로 테스트해 보세요.
- 모바일 및 데스크톱 너비에서 블록을 확인해 보세요.
사이트 자체 CSS가 Klaviyo 고객 허브 표시 방식에 영향을 줄 수 있으므로, 편집기 미리보기는 라이브 사이트와 정확히 일치하지 않을 수 있어요. 게시한 후 사이트에서 해당 블록을 확인해 주세요.
블록 성과 추적
Klaviyo는 맞춤 HTML 블록에서 발생한 각 클릭을 블록의 내부 이름을 사용해 Klaviyo 고객 허브 콘텐츠 블록 클릭됨 이벤트로 추적하고, 다른 콘텐츠 블록과 동일한 방식으로 보고해요. Klaviyo는 블록이 클릭되었는지는 기록하지만, 그 안의 개별 링크나 버튼 중 무엇이 클릭되었는지는 기록하지 않아요.
모범 사례
- 간단하게 유지하세요. 기본 스타일링에서 시작하고 필요한 부분만 재정의하세요.
- 개인 데이터를 보호하세요. 블록이 로그인했거나 인식된 쇼핑객에게 표시되는 경우 민감한 개인 정보를 포함하지 마세요. 사용자 지정 블록에 추가하는 데이터의 개인정보 보호는 사용자의 책임이에요.
- 항상 기본값을 설정하세요. 익명 방문자와 데이터가 누락된 프로필도 완전한 블록을 볼 수 있어야 해요.
- 모바일 우선으로 디자인하세요. Klaviyo 고객 허브 방문의 대부분은 작은 화면에서 발생하므로, 먼저 폭이 좁은 레이아웃을 테스트해 보세요.
- 블록 이름을 명확하게 지정해 주세요. 내부 이름은 보고에 사용되며 나중에 변경할 수 없어요.
문제 해결
블록이 게시되지 않아요
HTML 및 CSS 필드에서 유효성 검사 메시지를 확인하고 오류를 수정한 다음, 다시 게시해 주세요. 블록이 JavaScript에 의존하는 경우, HTML 필드에 입력한 JavaScript는 삭제되며 저장되지 않는다는 점에 유의해 주세요. 해당 기능을 사이트의 커스텀 요소로 옮기고 블록에서 이를 참조해 주세요.
스타일이 적용되지 않아요
CSS는 블록에 범위가 지정되므로 선택자가 내 HTML 안의 요소와 일치해야 해요. 클래스 이름에 오타가 없는지 확인해 주세요. CSS로는 블록 밖의 어떤 것도 스타일을 지정할 수 없어요.
맞춤 설정에 빈 텍스트 또는 기본 텍스트가 표시됨
프로필 데이터는 로그인했거나 식별된 쇼핑객에게만 표시돼요. 태그에 있는 속성 이름이 대문자/소문자까지 포함해 프로필 속성과 정확히 일치하는지 확인하고, 기본값을 추가해 주세요.
블록이 미리보기와 다르게 사이트에 표시돼요
사이트의 CSS는 특히 페이지에 직접 표시되는 온사이트 블록에서 Klaviyo 고객 허브가 렌더링되는 방식에 영향을 줄 수 있어요. 라이브 사이트에서 게시된 블록을 확인하고, 필요에 따라 CSS를 조정해 주세요.
사용자 지정 요소가 비어 있거나 표시되지 않아요
요소는 이를 정의하는 스크립트가 사이트에서 로드된 페이지에서만 렌더링돼요. 블록이 표시되는 모든 페이지에서 스크립트가 로드되는지 확인하고, HTML의 태그 이름이 개발자가 등록한 이름과 일치하는지도 확인해 주세요. 대신 대체 콘텐츠가 표시된다면, 해당 페이지에 요소가 정의되어 있지 않은 거예요.
코드 작성에 도움이 필요해요.
Klaviyo 지원팀에서는 맞춤 HTML과 CSS를 대신 작성하거나 디버깅해 드릴 수 없어요. 도움이 필요하시면 개발자 또는 Klaviyo 파트너와 함께 진행해 주세요.