Objetivos del artículo
Descubre cómo habilitar y usar la función de páginas alojadas de Klaviyo, que te permite programar código personalizado para crear tus propias páginas de preferencias, páginas para suscribirse y páginas para cancelar la suscripción.
Este artículo es para desarrolladores; actualmente, Klaviyo no ofrece servicios para ayudar a crear código personalizado ni brinda soporte para la solución de problemas de código personalizado. Para obtener más información sobre nuestras páginas de consentimiento integradas de la app, ve a nuestro artículo sobre los primeros pasos con las páginas de consentimiento.
Antes de empezar
Antes de configurar una página alojada, habilita esta funciones:
- Ve a Configuración > Otros.
- Elige Páginas de consentimiento en el menú desplegable.
- En Páginas alojadas personalizadas, activa el interruptor Usar dominio dedicado personalizado para páginas alojadas.
Ten en cuenta que solo las cuentas con un plan de pago que hayan completado la verificación de cuenta tienen acceso a esta configuración.
Crea una página de consentimiento personalizada
- Ve a Configuración > Otros.
- Haz clic en Páginas alojadas.
- Junto a Páginas, haz clic en el símbolo + para agregar una página nueva.
- Asigna un nombre a esta página (por ejemplo, cancelar la suscripción.tmpl); podrás usarla para cualquiera de tus páginas de consentimiento, pero puedes crear más de 1 página si quieres.
Los nombres de las páginas alojadas no pueden contener espacios, ya que provocará un error. Evita los espacios o usa guiones bajos para separar los títulos.
- Diseña una página HTML que incluya los campos y las funciones que quieras. Algunos ejemplos de campos que se pueden insertar en una página de consentimiento personalizada incluyen:
- Opciones de frecuencia de correo electrónico:
- Una opción para cancelar la suscripción
- Una opción para recibir todos los correos electrónicos
- Opciones de frecuencia para boletines diarios, semanales, mensuales, etc.
- Información que se puede usar para orientar y segmentar:
- Una casilla para indicar si el usuario quiere anuncios de ofertas
- Una casilla para indicar si el usuario quiere anuncios de productos o no
- Una casilla para indicar si el usuario quiere recibir actualizaciones del blog
- Otras listas a las que el usuario quizá quiera unirse
Puedes usar este código en tu cancelar la suscripción.tmpl para obtener una página de consentimiento totalmente funcional con preferencias de tipo de correo electrónico y frecuencia:
<!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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Space out content a bit */
body {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* Custom page header */
.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 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;
}
.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;
}
/* Custom page footer */
.footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
.container {
max-width: 730px;
}
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page 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]-->
</head>
<body>
<div class="container">
<div class="header">
<img src="http://via.placeholder.com/300x75" />
<h1>Email Preferences</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> Required Information
</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 %} />
New Product Releases
</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 %} />
Promotions & Sales
</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 %} />
Latest from the 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 %} />
Events
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="interests" class="col-sm-3 control-label">How often would you like to hear from us?</label>
<div class="col-sm-9">
<div class="radio">
<label>
<!-- Default value. -->
<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 %} />
Twice per Week
</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 %} />
Once per Week
</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 %} />
Once per Month
</label>
</div>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="$unsubscribe" value="true" />
<span class="text">Unsubscribe me from all emails.</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>
<footer class="footer">
<p>
© 2017 Company Name — <a href="https://www.klaviyo.com" target="_blank">Privacy Policy</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<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.'
}
});
// Toggle validation based on selection.
$('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>Configurar la redirección de una página alojada después del envío (Opcional)
De forma predeterminada, después de que una página alojada (p. ej., una página de preferencias alojada) se envíe correctamente, el usuario será redirigido a 1 de 2 lugares:
- Si solicitaron cancelar la suscripción, se les enviará a la página predeterminada de confirmación de cancelación de suscripción de la cuenta.
- Si actualizó el perfil (o hizo cualquier cosa que no sea una solicitud de cancelar la suscripción), se enviará al usuario a la página de confirmación de preferencias (correcta) predeterminada de la cuenta.
Si usaste el HTML de muestra anterior, esto se refleja en el <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 a dónde se redirige a alguien después de enviar tu página alojada, ajusta las líneas value="..." a las URL que prefieras dentro del HTML.
Agrega recursos personalizados a páginas alojadas (opcional)
Si quieres usar tu propio archivo CSS, archivo JS o imágenes en tu página alojada, súbelos haciendo clic en el símbolo + junto a Recursos y haz referencia a ellos en el código fuente de la página.
Usa la siguiente etiqueta para hacer referencia a un recurso que subiste a tu cuenta de Klaviyo: {% asset_url 'style.css' %}
Uso de páginas de consentimiento personalizadas
Puedes reemplazar cada una de las páginas de consentimiento predeterminadas de tu cuenta por páginas con código personalizado para que todos los correos electrónicos usen estas páginas personalizadas de forma predeterminada. Como alternativa, puedes configurar solo 1 lista en particular para que use páginas con código personalizado, de modo que solo los correos electrónicos enviados a esa lista usarían las páginas personalizadas.
- Si tienes páginas de consentimiento personalizadas para una lista específica, todos los correos electrónicos que se envíen a esa lista usarán esas páginas de consentimiento únicas.
- Las listas para las que no hayas personalizado páginas de consentimiento únicas usarán las páginas de consentimiento predeterminadas de la cuenta. Además, cualquier correo electrónico que NO se envíe a una lista específica, incluidos los correos electrónicos de flujo activados por métricas, las campañas enviadas a un segmento o los correos electrónicos personales, también usará las páginas de consentimiento predeterminadas.
Cambia las páginas de consentimiento predeterminadas a páginas alojadas
Si quieres reemplazar 1 o más de las páginas de consentimiento predeterminadas de la cuenta (p. ej., página de preferencias, página de suscripción o página para cancelar la suscripción de email) por páginas con código personalizado, sigue estos pasos:
- Haz clic en el nombre de la empresa en la esquina inferior izquierda de Klaviyo.
- Selecciona Configuración.
- Selecciona Otro en la parte superior.
- Haz clic en el menú desplegable de 3 puntos en la página de consentimiento que planeas reemplazar y selecciona Usar página alojada.
- En la ventana de diálogo que aparece, selecciona el archivo de tu página personalizada y haz clic en Guardar.
Si quieres usar una página personalizada para correos del flujo o campañas enviadas a un segmento, tendrás que cambiar las páginas de consentimiento predeterminadas de la cuenta para usar tus páginas personalizadas. Sigue el mismo proceso anterior para reemplazar tus páginas de consentimiento predeterminadas por páginas con código personalizado.
Usa páginas de consentimiento personalizadas para una lista
Tendrás que configurar cada lista individual que quieras usar con una página personalizada, en lugar de las páginas de consentimiento predeterminadas.
- Ve a la lista que quieras conectar a una página personalizada.
- Haz clic en la pestaña Páginas de suscripción y preferencias para ver todas las páginas de consentimiento editables de esa lista.
- En la página de consentimiento que quieres reemplazar por una página personalizada, haz clic en el menú desplegable de 3 puntos y selecciona Usar página alojada.
Ten en cuenta que, si lo deseas, puedes elegir usar una página alojada para todas las páginas de consentimiento.
- En la ventana de diálogo que aparece, selecciona el archivo de tu página personalizada y haz clic en Guardar.
En los correos electrónicos, todavía debes usar las etiquetas estándar de Klaviyo para cancelar la suscripción y administrar preferencias (es decir, {% unsubscribe %} y {% manage_preferences %}). Estas etiquetas se completarán como enlaces en los correos electrónicos en vivo y llevarán automáticamente a los destinatarios a las páginas personalizadas.
Preguntas frecuentes sobre páginas alojadas
¿Necesito agregar algún JavaScript a mi página para que este formulario se envíe correctamente? Como los formularios personalizados estarán dentro de una página alojada, no tienes que agregar ningún JavaScript adicional ni una URL de acción al <form> para que se envíe correctamente. Siempre que se visite una página alojada desde un correo electrónico enviado a través de Klaviyo, se vinculará automáticamente con el contacto correcto.
¿Esta página tiene que estar en HTML? Esta página debe estar en HTML. Puedes incluir imágenes adicionales, hojas de estilos, etc., ya sea vinculándolas o agregando una carpeta de archivos incluidos.
¿Klaviyo puede ayudarme a crear una página personalizada? Actualmente, Klaviyo no ofrece servicios para ayudar a crear código personalizado ni proporcionamos soporte para la solución de problemas de código personalizado. La función de Páginas alojadas está pensada para proporcionar un lienzo en blanco a desarrolladores o profesionales de marketing con conocimientos de código.
Obtén más información sobre las capacidades de personalización con las páginas de consentimiento integradas de Klaviyo en primeros pasos con las páginas de consentimiento.