학습 내용
나만의 환경설정 페이지, 구독 페이지, 구독 취소 페이지를 사용자 지정 코딩할 수 있는 클라비요의 호스팅 페이지 기능을 활성화하고 사용하는 방법을 알아보세요.
이 문서는 개발자를 위한 문서로, 현재 클라비요는 사용자 지정 코드를 작성하는 데 도움이 되는 서비스를 제공하지 않으며 사용자 지정 코드 문제 해결을 위한 지원도 제공하지 않습니다. 기본 제공되는 앱 동의 페이지에 대해 자세히 알아보려면 동의 페이지 시작하기 문서를 참조하세요.
시작하기 전 안내 사항
호스팅된 페이지를 구성하기 전에 이 기능을 활성화하세요:
- 설정 > 기타로 이동합니다.
- 드롭다운에서 동의 페이지를 선택합니다.
-
사용자 정의 호스팅 페이지에서 사용자 정의 페이지 사용을 클릭합니다.
계정 인증을 통과한 유료 요금제를 사용하는 계정만 이 설정에 액세스할 수 있습니다.
사용자 지정 동의 페이지 만들기
- 설정 > 기타로 이동합니다.
- 호스팅된 페이지를 클릭합니다.
- 페이지 옆의 + 기호를 클릭하여 새 페이지를 추가합니다.
- 이 페이지의 이름을 지정합니다(예: unsubscribe.tmpl); 동의 페이지에 사용할 수 있지만 원하는 경우 1개 이상의 페이지를 만들 수 있습니다.
호스팅된 페이지 이름에 공백을 포함하면 오류가 발생하므로 공백을 포함할 수 없습니다. 공백을 피하거나 밑줄을 사용하여 제목을 구분하세요.
- 원하는 필드와 기능이 포함된 HTML 페이지를 디자인합니다. 사용자 지정 동의 페이지에 삽입할 수 있는 필드의 예는 다음과 같습니다:
- 이메일 빈도를 선택할 수 있습니다:
- 구독 취소 옵션
- 모든 이메일 수신 옵션
- 일간, 주간, 월간 등 뉴스레터 발행 빈도 옵션
- 타겟팅 및 세그먼트에 사용할 수 있는 정보입니다:
- 사용자가 세일 공지를 원하는지 여부를 나타내는 확인란입니다.
- 사용자가 제품 알림을 원하는지 여부를 나타내는 확인란입니다.
- 사용자가 블로그 업데이트를 원하는지 여부를 나타내는 확인란입니다.
- 사용자가 가입할 수 있는 기타 목록
- 이메일 빈도를 선택할 수 있습니다:
동의 페이지의 HTML 코드 예시
이메일 유형 및 빈도 기본 설정이 포함된 완전한 기능의 동의 페이지를 얻으려면 이 코드를 수신거부.tmpl에 사용하면 됩니다:
<!.DOCTYPE html>
<html lang="en">
<head>
<메타 문자셋="utf-8">
<메타 http-equiv="X-UA 호환" content="IE=edge">
<메타 이름="뷰포트" content="width=device-width, initial-scale=1">
<!-- 최신 컴파일 및 축소된 CSS --.><링크--> rel="스타일시트" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<스타일 유형="text/css">
/* 콘텐츠에 약간의 공백 */
body {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* 사용자 정의 페이지 헤더 */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
.header h1 {
margin: 10px 0;
}
.required-fields {
text-align: right;
}
.required-fields span {
color: #a94442;
font-weight: bold;
}
.list-group-item label {
font-weight: normal;
margin-top: 17px;
}
.list-group-item 레이블 입력[유형="체크박스"] {
margin-right: 4px;
}
.form-group span.required {
position: absolute;
top: 0;
right: 0;
font-size: 20px;
color: #a94442;
font-weight: bold;
user-select: none;
}
label.error {
color: #a94442;
font-weight: bold;
margin-top: 4px;
}
.form-actions {
margin: 25px 0;
}
.form-control+.form-control {
margin-top: 6px;
}
.panel-group .panel-title .closed-icon,
.panel-group .panel-title .open-icon {
margin-right: 0.5em;
top: 2px;
}
.panel-group .panel-title a:hover,
.panel-group .panel-title a:active {
text-decoration: none;
}
.panel-group .panel-title a:hover .text,
.panel-group .panel-title a:active .text {
text-decoration: underline;
}
.panel-group .panel-title .closed-icon {
display: none;
}
.panel-group.closed .panel-title .open-icon {
display: none;
}
.panel-group.closed .panel-title .closed-icon {
display: inline;
}
/* 사용자 정의 페이지 바닥글 */
.footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* 컨테이너 사용자 지정 */
@media (최소 너비: 768px) {
.container {
max-width: 730px;
}
}
</style>
<!-- HTML5 요소 및 미디어 쿼리의 IE8용 HTML5 shim 및 Respond.js 지원 -- -- 경고: 응답하지 않습니다.>
-->
<!-- 경고: file://를 통해 페이지를 보는 경우 Respond.js가 작동하지 않습니다.>
-->
<!--[if lt IE 9]>[if lt IE 9]]>
<스크립트 src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<스크립트 src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="컨테이너">
<div class="header">
<img src="http://via.placeholder.com/300x75" />
<h1>이메일 기본 설정</h1>
</div>
<form action="" id="preferences_form" method="POST" role="form" class="form-horizontal">
{% if form.non_field_errors %}
<div class="경고 경고-위험">
{% for error in form.non_field_errors %}
{{ error }}{% if not forloop.last %}<br />{% endif %}
{% endfor %}
</div>
{% endif %}
<입력 유형="hidden" name="$fields" value="EmailInterests, EmailFrequency" />
<입력 유형="hidden" name="$list_fields" value="EmailInterests" />
<!-- <입력 유형="hidden" name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <입력 유형="hidden" name="$updated_profile_url" value="/p/preferences_updated" /> -->
<!--<p class="required-fields">
<span>span>*</span> 필수 정보
</p>-->
<div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}">
<label for="이메일" class="col-sm-3 control-label"> 이메일 주소<span class="필수"> *</span></label>
<div class="col-sm-9">
<입력 유형="이메일" class="form-control" id="이메일" name="$ 이메일" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$email' }}{% else %}{{ person.email|default:'' }}{% endif %}" />
{% if form.errors|lookup:'$email' %}
<p class="help-block">{% for error in form.errors|lookup:'$email' %}{{ error }}{% endfor %}</p>
{% endif %}
</div>
</div>
<div class="form-group">
<label for="first_name" class="col-sm-3 control-label"> 이름</label>
<div class="col-sm-9">
<입력 유형="text class="form-control" id="first_name" name="$first_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$first_name' }}{% else %}{{ person.first_name|default:'' }}{% endif %}" />
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-sm-3 control-label"> 성</label>
<div class="col-sm-9">
<입력 유형="text" class="form-control" id=last_name" name="$last_name" value="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$last_name' }}{% else %}{{ person.last_name|default:'' }}{% endif %}" />
</div>
</div>
<div class="form-group">
<label for="관심분야" class="col-sm-3 control-label"> 관심분야</label>
<div class="col-sm-9">
<div class="체크박스">
<label>
<입력 유형=체크박스" 이름="이메일 관심사" 값="새 릴리스" {% if 'New Releases' in person.EmailInterests or 'New Releases' in request.POST.EmailInterests %}체크="체크됨"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
새 제품 출시
</label>
</div>
<div class="체크박스">
<label>
<입력 유형="체크박스" 이름="이메일 관심사" 값="프로모션" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}체크됨="체크됨"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
프로모션 & 판매
</label
</label>
</div>
<div class="체크박스">
<label>
<입력 유형="체크박스" 이름="이메일 관심사" value="블로그" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
블로그 최신글
</label>
</div>
<div class="체크박스">
<label>
<입력 유형="체크박스" 이름="이메일주소 value="이벤트" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Events
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="interests" class="col-sm-3 control-label"> 얼마나 자주 연락을 받고 싶으신가요?</label>
<div class="col-sm-9">
<div class="라디오">
<label>
<!-- 기본값입니다. -->
<입력 유형="라디오" 이름="이메일 빈도" id="이메일_빈도_0" 값="모두" {% if person.EmailFrequency == 'All' or request.POST.EmailFrequency == 'All' %}체크됨="확인됨"{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}체크됨="확인됨"{% endif %} />
주 2회
</label>
</div>
<div class="radio">
<label>
<입력 유형="라디오" 이름="이메일빈도" id="이메일_빈도_1" 값="주간 {% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} />
일주일에 한 번
</label>
</div>
<div class="라디오">
<label>
<입력 유형="라디오" 이름="이메일 빈도" id="이메일_주파수_2" 값="월간" {% if person.EmailFrequency == 'Monthly' or request.POST.EmailFrequency == 'Monthly' %}체크됨="체크됨"{% endif %} />
매월 1회
</label>
</div>
</div>
</div>
/div>
<div class="체크박스">
<label>
<입력 유형="체크박스" 이름="$수신거부" 값="true" />
<span class="text"> 모든 이메일에서 저를 구독 취소합니다.</span>
</label>
</div>
<div class="clearfix form-actions">
<div class="pull-right">
<버튼 유형="submit" class="btn btn-default btn-primary"> 업데이트 기본 설정</button>
</div>
</div>
</form>
<footer class="footer">
<p>
© 2017 회사명 - <a href=https://www.klaviyo.com" target="_blank"> 개인정보처리방침</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery(부트스트랩의 자바스크립트 플러그인에 필요) -- -->
<스크립트 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- -->
<스크립트 src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script>
$(function() {
$('#preferences_form').validate({
rules: {
$email: {
required: true
}
},
messages: {
$email: 'Please enter your email address.',
$first_name: 'Please enter your first name.',
$last_name: 'Please enter your last name.'
}
});
// 선택에 따라 유효성 검사를 토글합니다.
$('입력[이름="$구독 취소"]').on('변경'), function() {
$('form .form-actions button[type="submit"]').toggleClass('cancel', $(this).is(':checked'));
});
});
$('input[name="$unsubscribe"]').on('change'), function(){
$('input[type=checkbox]').not(this).prop('checked', false);
});
$('input[type=checkbox]').not('input[name="$unsubscribe"]').on('change'), function(){
$('input[name="$unsubscribe"]').prop('checked', false);
});
</script>
</body>
</html>제출 후 호스팅된 페이지의 리디렉션 설정(선택 사항)
기본적으로 호스팅된 페이지(예: 호스팅된 환경설정 페이지)가 성공적으로 제출되면 사용자는 두 곳 중 한 곳으로 리디렉션됩니다:
- 구독 취소를 요청한 경우 계정의 기본 구독 취소 확인 페이지로 전송됩니다.
- 사용자가 프로필을 업데이트했거나 수신 거부 요청이 아닌 다른 작업을 수행한 경우 계정의 기본 설정 확인(성공) 페이지로 전송됩니다.
위의 샘플 HTML을 사용한 경우 에 다음과 같이 <body> 반영됩니다:
<!-- <입력 유형="hidden"
name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <입력 유형="hidden"
name="$updated_profile_url" value="/p/preferences_updated" /> -- -->호스팅된 페이지를 제출한 후 리디렉션되는 위치를 사용자 정의하려면 HTML 내에서 값="..." 줄을 원하는 URL로 조정합니다.
호스팅된 페이지에 사용자 정의 자산 추가(선택 사항)호스팅된 페이지에 사용자 정의 자산 추가(선택 사항)
호스팅된 페이지에서 직접 만든 CSS 파일, JS 파일 또는 이미지를 사용하려면 자산 옆의 + 기호를 클릭하여 업로드하고 페이지의 소스 코드에서 참조하세요.
다음 태그를 사용하여 클라비요 계정에 업로드한 에셋을 참조하세요: {% asset_url 'style.css' %}
사용자 지정 동의 페이지 사용
계정의 각 기본 동의 페이지를 사용자 지정 코딩 페이지로 대체하여 모든 이메일이 기본적으로 이러한 사용자 지정 페이지를 사용하도록 할 수 있습니다. 또는 특정 리스트 하나만 사용자 지정 코딩된 페이지를 사용하도록 구성하여 해당 리스트로 전송되는 이메일만 사용자 지정 페이지를 사용하도록 할 수도 있습니다.
- 특정 목록에 대한 동의 페이지를 사용자 지정한 경우 해당 목록으로 전송되는 모든 이메일에는 해당 고유한 동의 페이지가 사용됩니다.
- 고유한 동의 페이지를 사용자 지정하지 않은 목록은 계정의 기본 동의 페이지를 사용합니다. 또한 메트릭 트리거 흐름 이메일, 세그먼트에 전송된 캠페인 또는 개인 이메일을 포함하여 특정 목록으로 전송되지 않은 모든 이메일도 기본 동의 페이지를 사용합니다.
기본 동의 페이지를 호스팅 페이지로 변경
계정의 기본 동의 페이지(예: 기본 설정 페이지, 구독 페이지 또는 이메일 수신 거부 페이지) 중 1개 이상을 사용자 지정 코딩된 페이지로 바꾸려면 다음 단계를 따르세요:
- 클라비요의 왼쪽 하단에서 회사 이름을 클릭합니다.
-
설정을 선택합니다.
- 상단에서 기타를 선택합니다.
- 교체하려는 동의 페이지의 드롭다운 메뉴를 클릭하고 호스팅 페이지 사용을 선택합니다.
- 대화창이 나타나면 사용자 지정 페이지 파일을 선택하고 설정 저장을 클릭합니다.
세그먼트에 전송되는 플로우 이메일이나 캠페인에 사용자 지정 페이지를 사용하려면 계정의 기본 동의 페이지를 전환하여 사용자 지정 페이지를 사용해 야 합니다. 위와 동일한 프로세스에 따라 기본 동의 페이지를 사용자 지정 코딩된 페이지로 교체합니다.
목록에 사용자 지정 동의 페이지 사용
기본 동의 페이지 대신 사용자 지정 페이지를 사용하려는 각 개별 목록을 구성해야 합니다.
- 사용자 지정 페이지에 연결하려는 목록으로 이동합니다.
- 구독 & 기본 설정 페이지 탭을 클릭하면 해당 목록의 편집 가능한 모든 동의 페이지를 볼 수 있습니다.
- 사용자 지정 페이지로 바꾸려는 동의 페이지에서 드롭다운 화살표를 클릭하고 호스팅된 페이지 사용을 선택합니다.
원하는 경우 모든 동의 페이지에 호스팅된 페이지를 사용하도록 선택할 수 있습니다.
- 대화창이 나타나면 사용자 지정 페이지 파일을 선택하고 설정 저장을 클릭합니다.
이메일에서는 여전히 표준 클라비요 수신 거부 및 환경설정 관리 태그 (예: {% unsubscribe %} 및 {% manage_preferences %} )를 사용해야 합니다. 이러한 태그는 실시간 이메일에 링크로 표시되며 수신자를 자동으로 사용자 지정 페이지로 안내합니다.
호스팅 페이지 FAQ
이 양식을 제대로 제출하려면 페이지에 JavaScript를 추가해야 하나요?
사용자 정의 양식은 호스팅된 페이지 안에 포함되므로 <양식(> )에 추가 JavaScript나 작업 URL을 추가하지 않아도 <form> 제대로 제출할 수 있습니다. 클라비요를 통해 전송된 이메일에서 호스팅된 페이지를 방문하면 자동으로 올바른 연락처로 연결됩니다.
이 페이지는 HTML로 작성해야 하나요?
이 페이지는 HTML 형식이어야 합니다. 이미지, 스타일시트 등을 링크하거나 포함된 파일의 폴더를 추가하여 추가 이미지, 스타일시트 등을 포함할 수 있습니다.
클라비요가 사용자 지정 페이지를 만드는 데 도움을 줄 수 있나요?
클라비요는 현재 사용자 지정 코드를 구축하는 데 도움이 되는 서비스를 제공하지 않으며, 사용자 지정 코드 문제 해결을 위한 지원도 제공하지 않습니다. 호스팅 페이지 기능은 개발자나 코드에 능숙한 마케터에게 백지상태를 제공하기 위한 기능입니다.
동의 페이지 시작하기에서 클라비요에 내장된 동의 페이지의 사용자 지정 기능에 대해 자세히 알아보세요.