O que você vai aprender
Saiba como ativar e usar o recurso de páginas hospedadas do Klaviyo, que permite que você codifique de forma personalizada suas próprias páginas de preferências, páginas de inscrição e páginas de cancelamento de inscrição.
Este artigo é para desenvolvedores; atualmente, a Klaviyo não oferece serviços para ajudar a criar códigos personalizados, nem oferece suporte para a solução de problemas de códigos personalizados. Para saber mais sobre nossas páginas de consentimento de aplicativos incorporadas, consulte nosso artigo sobre como começar a usar as páginas de consentimento.
Antes de começar
Antes de configurar uma página hospedada, ative esse recurso:
- Navegue até Settings (Configurações) > Other (Outros).
- Selecione Páginas de consentimento no menu suspenso.
- Em Custom hosted pages (Páginas hospedadas personalizadas), clique em Enable custom pages (Ativar páginas personalizadas).
Observe que somente as contas com um plano pago que passaram pela verificação da conta têm acesso a essa configuração.
Criar uma página de consentimento personalizada
- Acesse Settings (Configurações) > Other (Outros).
- Clique em Hosted pages (Páginas hospedadas).
- Ao lado de Pages, clique no símbolo + para adicionar uma nova página.
- Dê um nome a essa página (por exemplo, unsubscribe.tmpl); O senhor poderá usar isso para qualquer uma de suas páginas de consentimento, mas pode criar mais de uma página, se desejar.
Os nomes das páginas hospedadas não podem conter espaços, pois isso levará a um erro. Evite espaços ou use sublinhados para separar os títulos.
- Crie uma página HTML que inclua os campos e recursos de sua escolha. Os campos de exemplo que podem ser inseridos em uma página de consentimento personalizada incluem:
- Opções de frequência de e-mail:
- Uma opção para cancelar a assinatura
- Uma opção para receber todos os e-mails
- Opções de frequência para boletins diários, semanais, mensais, etc.
- Informações que podem ser usadas para direcionar e segmentar:
- Uma caixa de seleção que indica se o usuário deseja ou não anúncios de venda
- Uma caixa de seleção que indica se o usuário deseja ou não receber anúncios de produtos
- Uma caixa de seleção para saber se o usuário deseja ou não receber atualizações do blog
- Outras listas das quais o usuário pode querer participar
- Opções de frequência de e-mail:
Exemplo de código HTML para uma página de consentimento
O senhor pode usar esse código em seu unsubscribe.tmpl para obter páginas de consentimento totalmente funcionais com preferências de tipo de e-mail e frequência:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS mais recente compilado e reduzido -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Espaçar um pouco o conteúdo */
body {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* Cabeçalho de página personalizado */
.cabeçalho {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
.cabeçalho 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 label input[type="checkbox"] {
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;
}
.painel-grupo .título do painel .ícone fechado,
.painel-grupo .título do painel .open-icon {
margin-right: 0.5em;
top: 2px;
}
.painel-grupo .título do painel a:hover,
.panel-group .título do painel a:active {
text-decoration: none;
}
.panel-group .título do painel a:hover .text,
.painel-grupo .título do painel a:active .text {
text-decoration: underline;
}
.painel-grupo .título do painel .ícone fechado {
display: none;
}
.panel-group.closed .panel-title .open-icon {
display: none;
}
.panel-group.closed .panel-title .ícone fechado {
display: inline;
}
/* Custom page footer */
.rodapé {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Personalizar o contêiner */
@media (min-width: 768px) {
.contêiner {
max-width: 730px;
}
}
</style>
<!-- Suporte do HTML5 shim e do Respond.js para IE8 de elementos HTML5 e consultas de mídia -->
<!-- AVISO: O Respond.js não funciona se o senhor visualizar a página via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
<![endif]-- O senhor pode ter certeza de que o que está acontecendo é o seguinte> <div class="container">
<div class="header">
<img src="http://via.placeholder.com/300x75"</head> />
<h1>Preferências de e-mail</h1>
</div>
<form action="" id="preferences_form" method="POST" role="form" class="form-horizontal">
{% if form.non_field_errors %}
<div class="alert alert-danger">
{% for error in form.non_field_errors %}
{{ error }}{% if not forloop.last %}<br />{% endif %}
{% endfor %}
</div>
{% endif %}
<input type="hidden" name="$fields" value="EmailInterests, EmailFrequency" />
<input type="hidden" name="$list_fields" value="EmailInterests" />
<!-- <input type="hidden" name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden" name="$updated_profile_url" value="/p/preferences_updated" /> -->
<!--<p class="required-fields">
<span>span>*</span> Informações obrigatórias
</p>-->
<div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}">
<label for="email" class="col-sm-3 control-label"> Email Address<span class="required"> *</span></label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" name="$ email" 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"> First Name</label>
<div class="col-sm-9">
<input type="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"> Last Name</label>
<div class="col-sm-9">
<input type="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="interests" class="col-sm-3 control-label"> Interests</label>
<div class="col-sm-9">
<div class="checkbox">
<label>
<input type=checkbox" name="EmailInterests" value="New Releases" {% if 'New Releases' in person.EmailInterests or 'New Releases' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Novos lançamentos de produtos
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInterests" value="Promotions" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Promoções & Vendas
</label
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInterests" value="Blog" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Últimas do blog
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="EmailInterests value="Events" {% if 'Events' in person.EmailInterests or 'Events' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Eventos
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="interests" class="col-sm-3 control-label"> Com que frequência o(a) senhor(a) gostaria de receber notícias nossas?</label>
<div class="col-sm-9">
<div class="radio">
<label>
<!-- Valor padrão. -->
<input type="radio" name="EmailFrequency" id="email_frequency_0" value="All" {% if person.EmailFrequency == 'All' or request.POST.EmailFrequency == 'All' %}checked="checked"{% elif not person.EmailFrequency and not request.POST.EmailFrequency %}checked="checked"{% endif %} />
Duas vezes por semana
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="EmailFrequency" id="email_frequency_1" value="Weekly {% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} />
Uma vez por semana
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="EmailFrequency" id="email_frequency_2" value="Monthly" {% if person.EmailFrequency == 'Monthly' or request.POST.EmailFrequency == 'Monthly' %}checked="checked"{% endif %} />
Uma vez por mês
</label>
</div>
</div>
</div>
/div>
<div class="checkbox">
<label>
<input type="checkbox" name="$unsubscribe" value="true" />
<span class="text"> Desinscreva-me de todos os e-mails.</span>
</label>
</div>
<div class="clearfix form-actions">
<div class="pull-right">
<button type="submit" class="btn btn-default btn-primary"> Update Preferences</button>
</div>
</div>
</form>
</formulário>
<footer class="footer">
<p>
© Nome da empresa em 2017 - <a href=https://www.klaviyo.com" target="_blank"> Política de Privacidade</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery (necessário para os plug-ins JavaScript do Bootstrap) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- JavaScript mais recente compilado e reduzido -->
<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>
$(função() {
$('#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.'
}
});
// Alternar a validação com base na seleção.
$('input[name="$unsubscribe"]').on('change', 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>Definir o redirecionamento de uma página hospedada após o envio (opcional)
Por padrão, depois que uma página hospedada (por exemplo, página de preferências hospedada) for enviada com êxito, o usuário será redirecionado para um de dois lugares:
- Se eles tiverem solicitado o cancelamento da assinatura, serão enviados para a página de confirmação de cancelamento de assinatura padrão da sua conta.
- Se ele tiver atualizado seu perfil (ou feito algo que não seja uma solicitação de cancelamento de assinatura), o usuário será enviado para a página de confirmação (sucesso) das preferências padrão da sua conta.
Se o senhor usou o exemplo de HTML acima, isso será refletido no corpo do <body> <> como:
<!-- <input type="hidden"
name="$unsubscribed_url" value="/p/preferences_updated" /> -->
<!-- <input type="hidden"
name="$updated_profile_url" value="/p/preferences_updated" /> -->Para personalizar para onde alguém será redirecionado depois de enviar sua página hospedada, ajuste as linhas value="..." para o(s) URL(s) de sua preferência no HTML.
Adicionar ativos personalizados a páginas hospedadas (opcional)Adicionar ativos personalizados a páginas hospedadas (opcional)
Se quiser usar seu próprio arquivo CSS, arquivo JS ou imagens em sua página hospedada, carregue-os clicando no símbolo + ao lado de Assets e faça referência a eles no código-fonte da página.
Use a seguinte tag para fazer referência a um ativo que o senhor carregou na sua conta da Klaviyo: {% asset_url 'style.css' %}
Usando as páginas de consentimento personalizadas
O senhor pode substituir cada uma das páginas de consentimento padrão da sua conta por páginas com código personalizado, de modo que todos os e-mails usem essas páginas personalizadas por padrão. Como alternativa, o senhor pode configurar apenas uma lista específica para usar páginas codificadas personalizadas, de modo que somente os e-mails enviados para essa lista usem as páginas personalizadas.
- Se o senhor tiver páginas de consentimento personalizadas para uma lista específica, todos os e-mails enviados a essa lista usarão essas páginas de consentimento exclusivas.
- Todas as listas para as quais o senhor não personalizou páginas de consentimento exclusivas usarão as páginas de consentimento padrão da sua conta. Além disso, qualquer e-mail que NÃO seja enviado a uma lista específica, inclusive e-mails de fluxo acionados por métricas, campanhas enviadas a um segmento ou e-mails pessoais, também usará suas páginas de consentimento padrão.
Alterar as páginas de consentimento padrão para páginas hospedadas
Se o senhor quiser substituir uma ou mais páginas de consentimento padrão da sua conta (por exemplo, página de preferências, página de assinatura ou página de cancelamento de assinatura de e-mail) por páginas com código personalizado, siga estas etapas:
- Clique no nome de sua empresa no canto inferior esquerdo do Klaviyo.
- Selecione Settings.
- Selecione Other (Outros ) na parte superior.
- Clique no menu suspenso da página de consentimento que pretende substituir e selecione Use Hosted Page (Usar página hospedada).
- Na janela de diálogo exibida, selecione o arquivo da página personalizada e clique em Save Settings (Salvar configurações).
Se quiser usar uma página personalizada para e-mails de fluxo ou campanhas enviadas a um segmento, o senhor terá que mudar as páginas de consentimento padrão da sua conta para usar suas páginas personalizadas. Siga o mesmo processo descrito acima para substituir suas páginas de consentimento padrão por páginas personalizadas.
Usar páginas de consentimento personalizadas para uma lista
O senhor terá de configurar cada lista individual para a qual deseja usar uma página personalizada em vez das páginas de consentimento padrão.
- Navegue até a lista que o senhor gostaria de conectar a uma página personalizada.
- Clique na guia Subscribe & Preference Pages para ver todas as páginas de consentimento editáveis para essa lista.
- Na página de consentimento que o senhor deseja substituir por uma página personalizada, clique na seta do menu suspenso e selecione Use Hosted Page (Usar página hospedada).
Observe que o senhor pode optar por usar uma página hospedada para todas as páginas de consentimento, se desejar.
- Na janela de diálogo exibida, selecione o arquivo da página personalizada e clique em Save Settings (Salvar configurações).
Em seus e-mails, o senhor ainda deve usar as tags padrão de cancelamento de inscrição e gerenciamento de preferências do Klaviyo (ou seja, {% unsubscribe %} e {% manage_preferences %}). Essas tags serão preenchidas como links em seus e-mails ao vivo e levarão automaticamente os destinatários às suas páginas personalizadas.
Perguntas frequentes sobre páginas hospedadas
Preciso adicionar algum JavaScript à minha página para que esse formulário seja enviado corretamente?
Como seus formulários personalizados estarão contidos em uma página hospedada, o senhor não precisa adicionar nenhum JavaScript extra ou um URL de ação ao formulário <form> <> para que ele seja enviado corretamente. Desde que uma página hospedada seja visitada a partir de um e-mail enviado via Klaviyo, ela será automaticamente vinculada ao contato correto.
Essa página precisa estar em HTML?
Essa página deve estar em HTML. O senhor pode incluir imagens adicionais, folhas de estilo, etc., criando um link para eles ou adicionando uma pasta de arquivos incluídos.
A Klaviyo pode me ajudar a criar uma página personalizada?
Atualmente, a Klaviyo não oferece serviços para ajudar a criar códigos personalizados, nem oferece suporte para a solução de problemas de códigos personalizados. O recurso Hosted Pages tem o objetivo de fornecer um quadro em branco para desenvolvedores ou profissionais de marketing com conhecimento de código.
Saiba mais sobre os recursos de personalização com as páginas de consentimento incorporadas do Klaviyo em Introdução às páginas de consentimento.