Centro de preferencias de correo electrónico con API

Configurar un centro de preferencias proporciona un lugar centralizado para que tus usuarios editen y administren sus preferencias de notificación para tu mensajería de correo electrónico. Este artículo incluye los pasos para crear un centro de preferencias generado por API, pero también puedes crear un centro de preferencias usando el editor de arrastrar y soltar.

Consejo

También puedes gestionar suscripciones en una página de destino de Braze. Añade un bloque Gestionar suscripciones para que los consumidores puedan revisar y actualizar sus suscripciones existentes o suscribirse a nuevas, mientras tú capturas sus datos de participación en la misma página. Para más información, consulta Bloque Gestionar suscripciones.

En el panel de Braze, ve a Audiencia > Centros de preferencias de correo electrónico.

Aquí es donde puedes administrar y ver cada grupo de suscripción. Cada grupo de suscripción que crees se añade a esta lista del centro de preferencias. Puedes crear múltiples centros de preferencias.

Importante

El centro de preferencias está diseñado para usarse dentro del canal de correo electrónico de Braze. Los enlaces del centro de preferencias son dinámicos y se basan en cada usuario, por lo que no pueden alojarse externamente.

Crear un centro de preferencias con API

Al usar los endpoints de centro de preferencias de Braze, puedes crear un centro de preferencias, un sitio web alojado por Braze, que puede mostrar el estado de suscripción y los estados del grupo de suscripción de tu usuario. Usando HTML y CSS, tu equipo de desarrolladores puede crear el centro de preferencias para que el estilo de la página coincida con las directrices de tu marca.

Usar Liquid te permite recuperar los nombres de tus grupos de suscripción y el estado de cada usuario. De esta manera, Braze almacena y recupera estos datos cuando se carga la página.

Requisitos previos

Paso 1: Usa el endpoint Crear centro de preferencias

Comencemos a crear un centro de preferencias usando el endpoint Crear centro de preferencias. Para personalizar tu centro de preferencias, puedes incluir HTML que se alinee con tu marca en el campo preference_center_page_html y el campo confirmation_page_html.

El endpoint Generar URL de centro de preferencias te permite obtener la URL del centro de preferencias para un usuario específico fuera de un correo electrónico enviado a través de Braze.

Nota

Braze renderiza confirmation_page_html en un iframe que usa una URL data:. Los navegadores tratan las URL data: como orígenes opacos. Como resultado, los scripts en ese iframe no pueden cargar recursos externos adicionales, y la navegación de la ventana principal o la comunicación entre marcos desde esa página falla.

En su lugar, puedes enlazar a contenido externo, como una URL de cuestionario alojada, en lugar de incrustar scripts. Si debes incrustar una herramienta de terceros y el proveedor lo permite, usa un <iframe title="Descripción del contenido incrustado" src="https://example.com/..."> que apunte a la URL HTTPS alojada de la herramienta.

Paso 2: Incluir en tu Campaign de correo electrónico

Importante

Hay ciertos navegadores, como las aplicaciones Naver para Android e iOS, que no son compatibles con el centro de preferencias de Braze. Si prevés que algunos de tus usuarios utilizan estos navegadores, considera proporcionarles métodos alternativos para gestionar sus preferencias de correo electrónico.

Para colocar un enlace al centro de preferencias en tus correos electrónicos, usa la siguiente etiqueta de Liquid en el lugar deseado de tu correo electrónico, de manera similar a como insertarías las URL de cancelación de suscripción.

1
{{preference_center.${kitchenerie_preference_center_example}}}

También puedes usar una combinación de HTML que incluya Liquid. Por ejemplo, puedes pegar lo siguiente como la URL en el editor HTML o en el editor de arrastrar y soltar. Esto muestra el diseño básico del centro de preferencias que lista todos los grupos de suscripción de correo electrónico automáticamente. Si usas aliasing de enlaces, agrega un signo de interrogación final (?) después de la etiqueta de Liquid para que Braze pueda añadir parámetros de seguimiento.

1
<a href="{{preference_center.${kitchenerie_preference_center_example}}}?">Edit your preferences</a>

El centro de preferencias tiene una casilla de verificación que permite a tus usuarios cancelar la suscripción de todos los correos electrónicos.

Prueba de centros de preferencias

Los enlaces del centro de preferencias se generan para cada usuario en el momento del envío y están vinculados a un envío en vivo de una Campaign o Canvas. Los envíos de prueba y las vistas previas del editor no admiten guardar cambios de suscripción. Este es el comportamiento esperado.

Lo que verás

• Envíos de prueba: Es posible que las etiquetas de Liquid del centro de preferencias no se resuelvan en un enlace válido. Si la página se carga, el botón Save Preferences está deshabilitado y los cambios de suscripción no se guardan.
• Pestaña Vista previa del editor de arrastrar y soltar: Puedes previsualizar el diseño y el estilo, pero no puedes probar el guardado de preferencias desde el editor.

Cómo probar de extremo a extremo

Para verificar que los enlaces y botones del centro de preferencias funcionan antes de un lanzamiento completo:

1. Crea una Campaign o un paso de correo electrónico en Canvas que incluya tu etiqueta de Liquid del centro de preferencias.
2. Dirige el mensaje solo a tus usuarios de prueba o a un Segment interno pequeño.
3. Lanza el mensaje y abre el correo electrónico desde un buzón de entrada real (no con Send Test).
4. Selecciona el enlace del centro de preferencias, actualiza los grupos de suscripción y selecciona Save Preferences.
5. Confirma los cambios en el perfil del usuario en el panel de Braze.

Como alternativa para los centros de preferencias creados mediante API, usa el endpoint Generar URL del centro de preferencias para obtener una URL funcional para un usuario específico fuera de un envío de prueba.

Para otras limitaciones de los envíos de prueba, consulta Enviar mensajes de prueba.

Vista previa, envío de prueba y envío en vivo

Editar un centro de preferencias

Puedes editar y actualizar tu centro de preferencias usando el endpoint Actualizar centro de preferencias.

Identificar centros de preferencias y detalles

Para identificar tus centros de preferencias, usa el endpoint Ver detalles del centro de preferencias para devolver información relacionada, como la marca de tiempo de la última actualización, el ID del centro de preferencias y más.

Personalizar un centro de preferencias

Braze gestiona las actualizaciones del estado de suscripción desde el centro de preferencias, lo que mantiene el centro de preferencias sincronizado. Sin embargo, también puedes crear y alojar tu propio centro de preferencias utilizando las API de grupos de suscripción con las siguientes opciones.

Opción 1: Enlace con parámetros de cadena de consulta

Usa pares de campo-valor de cadena de consulta en el cuerpo de la URL para pasar el ID de usuario y la categoría de correo electrónico a la página, de modo que los usuarios solo necesiten confirmar su elección para cancelar la suscripción. Esta opción es adecuada para quienes almacenan un identificador de usuario en un formato hash y aún no tienen un centro de suscripción.

Para esta opción, cada categoría de correo electrónico requiere su propio enlace de cancelación de suscripción específico:
http://mycompany.com/query-string-form-fill?field_id=Alex&field_category=offers

Consejo

También es posible aplicar un hash al ID externo del usuario en el momento del envío utilizando un filtro de Liquid. Esto convertirá el user_id en un valor hash MD5, por ejemplo:

1
2
{% assign my_string = ${user_id} | md5 %}
My encoded string is: {{my_string}}

Opción 2: Autenticar con JSON web token

Usa un JSON web token para autenticar a los usuarios en una parte de tu servidor web (por ejemplo, preferencias de cuenta) que normalmente está detrás de una capa de autenticación, como nombre de usuario e inicio de sesión con contraseña.

Este enfoque no requiere pares de valor de cadena de consulta incrustados en la URL, ya que estos se pueden pasar en la carga útil del JSON web token, por ejemplo:

1
2
3
4
5
{
    "user_id": "1234567890",
    "name": "Alex Smith",
    "category": "offers"
}

Preguntas frecuentes

¿Por qué mi centro de preferencias no funciona en un envío de prueba?

Los enlaces del centro de preferencias requieren un contexto de envío en vivo. Los envíos de prueba no generan URL válidas del centro de preferencias, y el botón Guardar preferencias está deshabilitado si la página se carga. Este es el comportamiento esperado. Para probar de extremo a extremo, lanza una Campaign o un paso en Canvas a un usuario de prueba o a un Segment interno pequeño, o usa el endpoint Generar URL del centro de preferencias. Para más detalles, consulta Probar centros de preferencias.

No he creado un centro de preferencias. ¿Por qué veo “PreferenceCenterBrazeDefault” en mi panel?

Se usa para renderizar el centro de preferencias cuando se utiliza el Liquid heredado ${preference_center_url}, lo que significa que los pasos en Canvas o las plantillas que hacen referencia a ${preference_center_url} o preference_center.${PreferenceCenterBrazeDefault} no funcionarán. Esto también aplica a mensajes enviados anteriormente que incluían el Liquid heredado o “PreferenceCenterBrazeDefault” como parte del mensaje.

Si haces referencia a ${preference_center_url} en un nuevo mensaje otra vez, se creará de nuevo un centro de preferencias llamado “PreferenceCenterBrazeDefault”.

¿Los centros de preferencias admiten varios idiomas?

No. Sin embargo, puedes aprovechar Liquid al escribir el HTML para páginas personalizadas de adhesión voluntaria y cancelación de suscripción. Si usas enlaces dinámicos para gestionar las cancelaciones de suscripción, se trata de un único enlace.

Por ejemplo, si estás haciendo seguimiento de la tasa de cancelaciones para usuarios hispanohablantes, necesitarías usar Campaigns separadas o aprovechar los análisis de Currents (como verificar cuándo un usuario cancela su suscripción y comprobar el idioma preferido de ese usuario).

Como otro ejemplo, para hacer seguimiento de las tasas de cancelación de suscripción de usuarios hispanohablantes, podrías agregar una cadena de parámetro de consulta como ?Spanish=true a la URL de cancelación de suscripción si el idioma del usuario es español, y usar un enlace de cancelación de suscripción normal en caso contrario:

1
2
3
4
{% if ${language} == 'spanish' %} "${unsubscribe_url}?spanish=true"
{% else %}
${unsubscribe_url}
{% endif %}

Luego, a través de Currents, podrías identificar qué usuarios hablan español y cuántos eventos de clic hubo para ese enlace de cancelación de suscripción.

¿Se requieren tanto los enlaces de cancelación de suscripción como los centros de preferencias de correo electrónico para enviar?

No. Si ves el mensaje “Your Email Body does not include an unsubscribe link” al redactar una Campaign de correo electrónico, esta advertencia es esperada si tu enlace de cancelación de suscripción está en un bloque de contenido.

¿Cómo actualizo el icono predeterminado del navegador?

De forma predeterminada, el icono junto al nombre de la pestaña del navegador (favicon) usa el logotipo de Braze. Para agregar un favicon personalizado, configúralo a través del atributo links-tags en tu llamada a la API de centro de preferencias de creación o actualización. Braze entonces inyecta la etiqueta <link rel="icon" ...> en la página alojada por ti.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  "name": "MyPreferenceCenter",
  "preference_center_title": "Email Preferences",
  "preference_center_page_html": "<!doctype html> ...",
  "confirmation_page_html": "<!doctype html> ...",
  "state": "active",
  "options": {
    "links-tags": [
      {
        "rel": "icon",
        "type": "image/png",
        "sizes": "32x32",
        "href": "https://yourcdn.com/path/to/favicon-32x32.png"
      },
      {
        "rel": "shortcut icon",
        "type": "image/x-icon",
        "href": "https://yourcdn.com/path/to/favicon.ico"
      },
      {
        "rel": "apple-touch-icon",
        "sizes": "180x180",
        "href": "https://yourcdn.com/path/to/apple-touch-icon.png"
      }
    ]
  }
}