Cómo personalizar las páginas de consentimiento
Objetivos del artículo
Aprende a activar y utilizar las funciones/características de las páginas alojadas de Klaviyo, que te permiten personalizar tus propias páginas de preferencias, páginas para suscribirse y páginas para cancelar la suscripción.
Este artículo es para desarrolladores; Klaviyo no ofrece actualmente servicios para ayudar a crear código personalizado, ni proporcionamos equipo de asistencia para la resolución de problemas de código personalizado. Para obtener más información sobre nuestras páginas de consentimiento integradas en las aplicaciones, consulta nuestro artículo sobre los primeros pasos con las páginas de consentimiento.
Antes de empezar
Antes de configurar una página alojada, activa estas funciones/características:
- Navega hasta Ajustes > Otros.
- Elige Páginas de consentimiento en el desplegable.
- En Páginas alojadas personalizadas, activa la opción Utilizar dominio dedicado personalizado para las páginas alojadas.
Ten en cuenta que sólo las cuentas con un plan de pago que hayan superado la verificación de cuenta tienen acceso a esta configuración.
Crear una página de consentimiento personalizada
- Dirígete a Ajustes > Otros.
- Haz clic en Páginas alojadas.
- Junto a Páginas, haz clic en el símbolo + para añadir una nueva página.
- Ponle un nombre a esta página (por ejemplo, cancelar la suscripción.tmpl); podrás utilizarlo para cualquiera de tus páginas de consentimiento, pero puedes crear más de 1 página si lo deseas.
Los nombres de las páginas alojadas no pueden contener espacios, ya que provocarán un error. Evita los espacios o utiliza guiones bajos para separar los títulos.
- Diseña una página HTML que incluya los campos y funciones/características que elijas. Algunos ejemplos de campos que se pueden insertar para una página de consentimiento personalizada son:
- Opciones para la frecuencia del correo electrónico:
- Una opción para cancelar la suscripción
- Una opción para recibir todo el correo electrónico
- Opciones de frecuencia para el boletín diario, semanal, mensual, etc.
- Información que puede utilizarse para dirigir 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 para saber si el usuario quiere o no actualizar el blog
- Otra lista a la que el usuario quiera unirse
- Opciones para la frecuencia del correo electrónico:
Ejemplo de código HTML para una página de consentimiento
Puedes utilizar este código en tu cancelar la suscripción.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">
<!-- Último CSS compilado y minificado -->
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<style type="text/css">
/* Espacia un poco el contenido */
body {
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-necesarios {
text-align: right;
}
.campos obligatorios span {
color: #a94442;
font-weight: bold;
}
lista-group-item etiqueta {
font-weight: normal;
margin-top: 17px;
}
lista-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;
}
.control-form+.control-form {
margin-top: 6px;
}
.grupo-panel .panel-título .icono-cerrado,
.grupo-panel .panel-título .abrir-icono {
margin-right: 0.5em;
top: 2px;
}
.grupo-panel .panel-título a:hover,
.panel-group .panel-título a:con actividad {
text-decoration: none;
}
.panel-group .panel-título a:hover .text,
.grupo-panel .panel-título a:con actividad .text {
text-decoration: underline;
}
.grupo-panel .panel-título .icono-cerrado {
display: none;
}
.panel-grupo.cerrado .panel-título .abrir-icono {
display: none;
}
.panel-grupo.cerrado .panel-título .icono-cerrado {
display: inline;
}
/* Pie de página personalizado */ .footer {
padding-top: 18px;
border-top: 1px solid #e5e5e5;
}
/* Personalizar contenedor */ @media (min-width: 768px) { .container </style>
<!-- -->
<!-- -->
<!--[if lt IE 9]>
{
max-width: 730px;
}
}
/style !-- HTML5 shim y Respond.js para IE8 soporte de elementos HTML5 y media queries -- !-- ADVERTENCIA: Respond.js no funciona si ves la página a través de file:// -- !--[if lt IE 9] script src= https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js /script
<>
<>
<>
<>
<""><></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>correo electrónico Preferencias</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 /></div>
{% 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=<span translate ¡="no">79$updated_profile_url" value="/p/preferences_updated" /> -->
<!--<p class="required-fields">
<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"> correo electrónico Dirección<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"> primer_nombre</label>
< div class="col-sm-9">
< input type="text" class="form-control" id="primer_nombre" name="$primer_nombre" 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="apellido" class="col-sm-3 control-label"> Apellido</label>
< div class="col-sm-9">
< input type="text" class="form-control" id="apellido 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="intereses" class="col-sm-3 control-label"> Intereses</label>
< div class="col-sm-9">
< div class="checkbox>
<label>
< input type="checkbox" name="EmailInterests" value="Nuevos lanzamientos" {% 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="checkbox">
<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>
<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 %} />
Lo último del Blog
</label>
</div>
< div class="checkbox">
<label>
<input type="checkbox" name="EmailIntereses" 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>
< div class="form-group">
< label for="intereses" class="col-sm-3 control-label"> ¿Con qué frecuencia quieres 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="Todos" {% 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=" check"{% endif %} />
Una vez al mes
</label>
</div>
</div>
</div>
<div class="checkbox">
<label>
< input type="checkbox" name="$unsubscribe" value="true" />
< span class="text"> cancelar la suscripción me de todo correo electrónico.</span>
</label>
</div>
< div class="clearfix form-actions">
< div class="pull-right">
< button type="submit" class="btn btn-default btn-primary"> actualizar Preferencias</button>
</div>
</div>
</form>
< footer class="footer">
<p>
p>
© 2017 empresa Name - <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() {
$('#preferences_form').validate({
rules: {
$email: {
required: true
}
},
mensajes: {
$email: 'Please enter your email address.',
$first_name: 'Please enter your first name.',
$last_name: 'Please enter your last name.'
}
});
// Alterna la validación en función de 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 cancelar la suscripción, serán enviados a la página predeterminada de confirmación de cancelación de la suscripción de tu cuenta.
- Si han actualizado su perfil (o han hecho algo que no sea una solicitud de cancelar la suscripción), el usuario será enviado a la página de confirmación (éxito) de las preferencias predeterminadas de tu cuenta.
Si has utilizado el ejemplo de 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 tu página alojada, ajusta las líneas value="..." a tu(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 quieres utilizar tu propio archivo CSS, JS o imágenes en tu página alojada, cárgalos haciendo clic en el símbolo + junto a Activos y haz referencia a ellos en el código fuente de la página.
Utiliza la siguiente etiqueta para hacer referencia a un activo que hayas subido a tu cuenta de Klaviyo: {% asset_url 'style.css' %}
Utilizar las páginas de consentimiento personalizadas
Puedes sustituir 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 utilicen estas páginas personalizadas por defecto. Alternativamente, puedes configurar sólo 1 lista concreta para que utilice páginas con código personalizado, de modo que sólo el correo electrónico enviado a esa lista utilice páginas personalizadas.
- Si has 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.
- Cualquier lista para la que no hayas personalizado páginas de consentimiento únicas utilizará las páginas de consentimiento predeterminadas de tu cuenta. Además, cualquier correo electrónico que NO se envíe a una lista específica, incluidas las campañas de correo electrónico de flujo métrico enviadas a un segmento, o el correo electrónico personal, también utilizará tus páginas de consentimiento predeterminadas.
Cambiar las páginas de consentimiento por defecto por páginas alojadas
Si quieres sustituir 1 o más de las páginas de consentimiento predeterminadas de tu cuenta (por ejemplo, la página de preferencias, la página de suscribirse o la página de correo electrónico cancelar la suscripción) por páginas con código personalizado, sigue estos pasos:
- Haz clic en el nombre de tu empresa en la esquina inferior izquierda de Klaviyo.
- Selecciona Configuración.
- Selecciona Otros en la parte superior.
- Haz clic en el menú desplegable de los 3 puntos de la página de consentimiento que quieres sustituir en plan y selecciona Utilizar página alojada.
- En la ventana de diálogo que aparece, selecciona tu archivo de página personalizada y haz clic en Guardar.
Si quieres utilizar una página personalizada para el flujo de correo electrónico o las campañas enviadas a un segmento, tendrás que cambiar las páginas de consentimiento predeterminadas de tu cuenta para utilizar tus páginas personalizadas. Sigue el mismo proceso anterior para sustituir tus páginas de consentimiento predeterminadas por páginas codificadas a medida.
Utilizar páginas de consentimiento personalizadas para una lista
Tendrás que configurar cada lista individual para la que quieras utilizar una página personalizada en lugar de las páginas de consentimiento predeterminadas.
- Navega hasta la lista que quieras conectar a una página personalizada.
- Haz 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 quieres sustituir por una página personalizada, haz clic en el menú desplegable de los 3 puntos y selecciona Utilizar página alojada.
Ten en cuenta que, si lo deseas, puedes utilizar una página alojada para todas las páginas de consentimiento.
- En la ventana de diálogo que aparece, selecciona tu archivo de página personalizada y haz clic en Guardar.
En tu correo electrónico, debes seguir utilizando la etiqueta estándar Klaviyo cancelar la suscripción y gestionar preferencias (es decir, {% unsubscribe %} y {% manage_preferences %}). Estas etiquetas aparecerán como enlaces en tu correo electrónico en directo y llevarán automáticamente a los destinatarios a tus 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?
Como tus formularios personalizados estarán dentro de una página alojada, no tendrás 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 volver al contacto correcto.
¿Es necesario que esta página esté en HTML?
Esta página debe estar en HTML. Puedes 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 actualmente no ofrece servicios para ayudar a construir código personalizado, ni proporciona equipo de asistencia para la resolución de problemas de código personalizado. Las funciones/características de Hosted Pages están pensadas para proporcionar una pizarra en blanco a los desarrolladores o especialistas en marketing con conocimientos de código.
Obtén más información sobre las posibilidades de personalización con las Klaviyo páginas de consentimiento integradas de en Primeros pasos con las páginas de consentimiento.