Qué aprenderás
Aprenda a activar y utilizar la función de páginas alojadas de Klaviyo, que le permite codificar de forma personalizada sus propias páginas de preferencias, de suscripción y de cancelación de suscripción.
Este artículo es para desarrolladores; Klaviyo no ofrece actualmente servicios para ayudar a construir código personalizado, ni proporcionamos soporte para la solución de problemas de código personalizado. Para conocer nuestras páginas de consentimiento integradas en las aplicaciones, consulte nuestro artículo sobre cómo empezar con las páginas de consentimiento.
Antes de empezar
Antes de configurar una página alojada, active esta función:
- Vaya a Ajustes > Otros.
- Elija Páginas de consentimiento en el desplegable.
- En Páginas alojadas personalizadas, haga clic en Activar páginas personalizadas.
Tenga en cuenta que sólo las cuentas con un plan de pago que hayan superado la verificación de cuenta tienen acceso a este ajuste.
Crear una página de consentimiento personalizada
- Vaya a Ajustes > Otros.
- Haga clic en Páginas alojadas.
- Junto a Páginas, pulse el símbolo + para añadir una nueva página.
- Asigna un nombre a esta página (por ejemplo, unsubscribe.tmpl); podrás utilizarlo para cualquiera de tus páginas de consentimiento, pero, si quieres, puedes crear más de una página.
Los nombres de las páginas alojadas no pueden contener espacios, ya que generarían un error. Evita los espacios o utiliza guiones bajos para separar los títulos.
- Diseñe una página HTML que incluya los campos y características de su elección. Algunos ejemplos de campos que pueden insertarse para una página de consentimiento personalizada son:
- Opciones para la frecuencia del correo electrónico:
- Una opción para darse de baja
- Una opción para recibir todos los correos electrónicos
- Opciones de frecuencia para boletines diarios, semanales, mensuales, etc.
- Información que puede utilizarse para orientar y segmentar:
- Una casilla de verificación para saber si el usuario desea o no anuncios de venta
- Una casilla de verificación para saber si el usuario desea o no anuncios de productos
- Una casilla de verificación para saber si el usuario desea o no actualizaciones del blog
- Otras listas a las que el usuario puede querer unirse
- Opciones para la frecuencia del correo electrónico:
Ejemplo de código HTML para una página de consentimiento
Puede utilizar este código en su unsubscribe.tmpl para obtener unas páginas de consentimiento totalmente funcionales con preferencias de tipo y frecuencia de correo electrónico:
<!DOCTYPE html>
<html lang="es">
<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 compilado y minificado más reciente -->
<link rel="hoja de estilo" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Espacie un poco el contenido */
cuerpo {
padding-top: 20px;
padding-bottom: 20px;
}
form {
margin-bottom: 18px;
}
/* Encabezado de página personalizado */
.header {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 10px;
}
.cabecera h1 {
margin: 10px 0;
}
.campos obligatorios {
text-align: right;
}
.campos obligatorios 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-grupo .panel-title .icono-cerrado
.panel-grupo .panel-title .open-icon {
margin-right: 0.5em;
top: 2px;
}
.panel-grupo .panel-title a:hover,
.panel-grupo .panel-title a:active {
text-decoration: none;
}
.panel-grupo .panel-title a:hover .text,
.panel-grupo .panel-title a:active .text {
text-decoration: underline;
}
.panel-grupo .panel-title .icono-cerrado {
display: none;
}
.panel-group.closed .panel-title .open-icon {
display: none;
}
.panel-group.closed .panel-title .icono-cerrado {
display: inline;
}
/* Pie de página personalizado */
.footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Personalizar el contenedor */
@media (min-width: 768px) {
.contenedor {
max-width: 730px;
}
}
</style>
<!-- HTML5 shim y Respond.js para IE8 soporte de elementos HTML5 y media queries -->
<!-- ADVERTENCIA: Respond.js no funciona si ve la página a través de file:// -->
<!--[if lt IE 9]>[si 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>
<div class="contenedor">
<div class="cabecera">
<img src="http://via.placeholder.com/300x75"</head> />
<h1>Preferencias de correo electrónico</h1>
</div>
<form action="" id="preferences_form" method="POST" role="form" class="form-horizontal">
{% if form.non_field_errors %}
<div class="alerta-alerta-peligro">
{% 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> Información requerida
</p>-->
<div class="form-group{% if form.errors|lookup:'$email' %} has-error{% endif %}">
<label for="email" class="col-sm-3 control-label"> Dirección de correo electrónico<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="formulario-grupo">
<label for="primer_nombre" class="col-sm-3 control-label"> primer_nombre</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="formulario-grupo">
<label for="apellido" class="col-sm-3 control-label"> apellido</label>
<div class="col-sm-9">
<input type="text" class="form-control" id=apellido" nombre="$apellido" valor="{% if request.POST|lookup:'$email' %}{{ request.POST|lookup:'$last_name' }}{% else %}{{ person.last_name|default:'' }}{% endif %}" />
</div>
</div>
<div class="formulario-grupo">
<label for="intereses" class="col-sm-3 control-label"> Intereses</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 %} />
Nuevos lanzamientos
</label>
</div>
<div class="casilla de verificación">
<label>
<input type="checkbox" name="EmailIntereses" value="Promociones" {% if 'Promotions' in person.EmailInterests or 'Promotions' in request.POST.EmailInterests %}checked="checked"{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Promociones & Ventas
</label
<div class="casilla de verificación">
<input type="checkbox" name="EmailIntereses" value="Blog" {% if 'Blog' in person.EmailInterests or 'Blog' in request.POST.EmailInterests %}{% elif not person.EmailInterests and not request.POST.EmailInterests %}{% endif %} />
Lo último del Blog
</label>
</div>
<div class="casilla de verificación">
<label>
<input type="checkbox" name="EmailIntereses
</label>
</div>
<label>
value="Eventos" {% 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"> ¿Con qué frecuencia desea recibir noticias nuestras?</label>
<div class="col-sm-9">
<div class="radio">
<label>
<!-- < Valor por defecto. -->
<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 %} />
Dos veces por semana
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="EmailFrequency" id="email_frequency_1" value="Semanal {% if person.EmailFrequency == 'Weekly' or request.POST.EmailFrequency == 'Weekly' %}checked="checked"{% endif %} />
Una vez por semana
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="EmailFrequency" id="email_frequency_2" value="Mensual" {% if person.EmailFrequency == 'Monthly' or request.POST.EmailFrequency == 'Monthly' %}checked="checked"{% endif %} />
Una vez al mes
</label>
</div>
</div>
</div>
/div>
<div class="checkbox">
<label>
<input type="checkbox" name="$unsubscribe" value="true" />
<span class="text"> Darme de baja de todos los correos electrónicos.</span>
</label>
</div>
<div class="clearfix formulario-acciones">
<div class="pull-right">
<button type="submit" class="btn btn-default btn-primary"> Actualizar preferencias</button>
</div>
</div>
</form>
<pie de página class="pie de página">
<p>
© 2017 Nombre de la empresa - <a href=https://www.klaviyo.com" target="_blank"> Política de privacidad</a>
</p>
</footer>
</div>
<!-- /container -->
<!-- jQuery (necesario para los plugins JavaScript de Bootstrap) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Último JavaScript compilado y minificado -->
<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() {
$('#formulario_preferencias').validate({
reglas: {
$correo electrónico {
required: true
}
},
mensajes: {
$email: 'Please enter your email address.',
$first_name: 'Please enter your first name.',
$last_name: 'Please enter your last name.'
}
});
// Alternar la validación basada en la selección.
$('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>Establecer la redirección de una página alojada tras el envío (Opcional)
Por defecto, después de que una página alojada (por ejemplo, la página de preferencias alojada) se envíe correctamente, el usuario será redirigido a 1 de 2 lugares:
- Si han solicitado darse de baja, se les enviará a la página de confirmación de baja predeterminada de su cuenta.
- Si han actualizado su perfil (o han hecho algo que no sea una solicitud de baja), el usuario será enviado a la página de confirmación (éxito) de las preferencias predeterminadas de su cuenta.
Si ha utilizado el ejemplo HTML anterior, esto se refleja en el <body> cuerpo de <> 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 su página alojada, ajuste las líneas value="..." a su(s) URL(s) preferida(s) dentro del HTML.
Añadir activos personalizados a las páginas alojadas (Opcional)Añadir activos personalizados a las páginas alojadas (Opcional)
Si desea utilizar su propio archivo CSS, archivo JS o imágenes en su página alojada, cárguelos haciendo clic en el símbolo + junto a Activos y haga referencia a ellos en el código fuente de la página.
Utilice la siguiente etiqueta para hacer referencia a un activo que haya subido a su cuenta de Klaviyo: {% asset_url 'style.css' %}
Uso de las páginas de consentimiento personalizadas
Puede sustituir cada una de las páginas de consentimiento predeterminadas de su cuenta por páginas con código personalizado para que todos los correos electrónicos utilicen estas páginas personalizadas por defecto. Como alternativa, puede configurar una sola lista en particular para que utilice páginas con código personalizado, de forma que sólo el correo electrónico enviado a esa lista utilice las páginas personalizadas.
- Si ha personalizado páginas de consentimiento para una lista específica, cualquier correo electrónico enviado a esa lista utilizará esas páginas de consentimiento únicas.
- Las listas para las que no haya personalizado páginas de consentimiento únicas utilizarán las páginas de consentimiento predeterminadas de su 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 utilizarán sus páginas de consentimiento predeterminadas.
Cambiar las páginas de consentimiento por defecto por páginas alojadas
Si desea sustituir una o varias de las páginas de consentimiento predeterminadas de su cuenta (por ejemplo, la página de preferencias, la página de suscripción o la página de cancelación de suscripción por correo electrónico) por páginas codificadas a medida, siga estos pasos:
- Haga clic en el nombre de su empresa en la esquina inferior izquierda de Klaviyo.
- Seleccione Ajustes.
- Seleccione Otros en la parte superior.
- Haga clic en el menú desplegable de la página de consentimiento que desea sustituir y seleccione Utilizar página alojada.
- En la ventana de diálogo que aparece, seleccione su archivo de página personalizada y haga clic en Guardar configuración.
Si desea utilizar una página personalizada para los correos electrónicos de flujo o las campañas enviadas a un segmento, tendrá que cambiar las páginas de consentimiento predeterminadas de su cuenta para utilizar sus páginas personalizadas. Siga el mismo proceso anterior para sustituir sus páginas de consentimiento predeterminadas por páginas codificadas a medida.
Utilizar páginas de consentimiento personalizadas para una lista
Tendrá que configurar cada lista individual para la que desee utilizar una página personalizada en lugar de las páginas de consentimiento predeterminadas.
- Navegue hasta la lista que desea conectar a una página personalizada.
- Haga clic en la pestaña Suscribirse & Páginas de preferencias para ver todas las páginas de consentimiento editables para esa lista.
- Debajo de la página de consentimiento que desea sustituir por una página personalizada, haga clic en la flecha desplegable y seleccione Utilizar página alojada.
Tenga en cuenta que, si lo desea, puede optar por utilizar una página alojada para todas las páginas de consentimiento.
- En la ventana de diálogo que aparece, seleccione su archivo de página personalizada y haga clic en Guardar configuración.
En sus correos electrónicos, debe seguir utilizando las etiquetas estándar de Klaviyo para cancelar la suscripción y gestionar las preferencias (es decir, {% unsubscribe %} y {% manage_preferences %}). Estas etiquetas aparecerán como enlaces en sus correos electrónicos y llevarán automáticamente a los destinatarios a sus páginas personalizadas.
Páginas alojadas FAQ
¿Necesito añadir algún JavaScript a mi página para que este formulario se envíe correctamente?
Dado que sus formularios personalizados estarán contenidos dentro de una página alojada, no tendrá que añadir ningún JavaScript adicional ni una URL de acción al formulario <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 al contacto correcto.
¿Es necesario que esta página esté en HTML?
Esta página debe estar en HTML. Puede incluir imágenes adicionales, hojas de estilo, etc., bien enlazándolas o añadiendo una carpeta de archivos incluidos.
¿Puede Klaviyo ayudarme a construir una página personalizada?
Klaviyo no ofrece actualmente servicios para ayudar a construir un código personalizado, ni proporcionamos apoyo para la solución de problemas de código personalizado. La función de páginas alojadas está pensada para ofrecer una pizarra en blanco a los desarrolladores o a los vendedores expertos en código.
Obtenga más información sobre las posibilidades de personalización con las páginas de consentimiento incorporadas de Klaviyo en Introducción a las páginas de consentimiento.