Ir al contenido

Conmutadores de características

Los conmutadores de características te permiten habilitar o deshabilitar a distancia la funcionalidad para una selección específica o aleatoria de usuarios. Y lo que es más importante, te permiten activar y desactivar una característica en producción sin necesidad de desplegar código adicional ni actualizar la tienda de aplicaciones. Esto te permite desplegar nuevas características con seguridad y confianza.

Requisitos previos

Estas son las versiones mínimas del SDK necesarias para empezar a usar los conmutadores de características:

Casos de uso

Despliegues graduales

Usa conmutadores de características para habilitar características de forma gradual a una muestra de la población. Por ejemplo, puedes lanzar de forma suave una nueva característica primero a tus usuarios VIP. Esta estrategia ayuda a mitigar los riesgos asociados con enviar nuevas características a todos a la vez y ayuda a detectar errores de forma temprana.

Imagen animada del control deslizante de tráfico de despliegue que va del 0% al 100%.

Por ejemplo, supongamos que hemos decidido añadir un nuevo enlace de “Soporte por chat en vivo” a nuestra aplicación para un servicio al cliente más rápido. Podríamos lanzar esta característica a todos los clientes a la vez. Sin embargo, un lanzamiento amplio conlleva riesgos, tales como:

  • Nuestro equipo de soporte todavía está en formación, y los clientes pueden iniciar tickets de soporte después del lanzamiento. Esto no nos da margen en caso de que el equipo de soporte necesite más tiempo.
  • No estamos seguros del volumen real de nuevos casos de soporte que recibiremos, así que puede que no tengamos el personal adecuado.
  • Si nuestro equipo de soporte se ve desbordado, no tenemos una estrategia para desactivar rápidamente esta característica de nuevo.
  • Podrían introducirse errores en el widget de chat, y no queremos que los clientes tengan una experiencia negativa.

Con los conmutadores de características de Braze, podemos desplegar la característica de forma gradual y mitigar todos estos riesgos:

  • Activaremos la característica de “Soporte por chat en vivo” cuando el equipo de soporte diga que está listo.
  • Habilitaremos esta nueva característica solo para el 10% de los usuarios para determinar si tenemos el personal adecuado.
  • Si hay algún error, podemos desactivar rápidamente la característica en lugar de apresurarnos a enviar una nueva versión.

Para desplegar gradualmente esta característica, podemos crear un conmutador de características llamado “Live Chat Widget”.

Detalles del conmutador de características para un ejemplo llamado Live Chat Widget. El ID es enable_live_chat. La descripción de este conmutador de características indica que el widget de chat en vivo se mostrará en la página de soporte.

En el código de nuestra aplicación, solo mostraremos el botón Start Live Chat cuando el conmutador de características de Braze esté habilitado:

import {useState} from "react";
import * as braze from "@braze/web-sdk";

// Get the initial value from the Braze SDK
const featureFlag = braze.getFeatureFlag("enable_live_chat");
const [liveChatEnabled, setLiveChatEnabled] = useState(featureFlag.enabled);

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates(() => {
    const newValue = braze.getFeatureFlag("enable_live_chat").enabled;
    setLiveChatEnabled(newValue);
});

// Only show the Live Chat if the Braze SDK determines it is enabled
return (<>
  Need help? <button>Email Our Team</button>
  {liveChatEnabled && <button>Start Live Chat</button>}
</>)
// Get the initial value from the Braze SDK
FeatureFlag featureFlag = braze.getFeatureFlag("enable_live_chat");
Boolean liveChatEnabled = featureFlag != null && featureFlag.getEnabled();

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates(event -> {
  FeatureFlag newFeatureFlag = braze.getFeatureFlag("enable_live_chat");
  Boolean newValue = newFeatureFlag != null && newFeatureFlag.getEnabled();
  liveChatEnabled = newValue;
});

// Only show the Live Chat view if the Braze SDK determines it is enabled
if (liveChatEnabled) {
  liveChatView.setVisibility(View.VISIBLE);
} else {
  liveChatView.setVisibility(View.GONE);
}
// Get the initial value from the Braze SDK
val featureFlag = braze.getFeatureFlag("enable_live_chat")
var liveChatEnabled = featureFlag?.enabled

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates() { event ->
  val newValue = braze.getFeatureFlag("enable_live_chat")?.enabled
  liveChatEnabled = newValue
}

// Only show the Live Chat view if the Braze SDK determines it is enabled
if (liveChatEnabled) {
  liveChatView.visibility = View.VISIBLE
} else {
  liveChatView.visibility = View.GONE
}

// Get the initial value from the Braze SDK
let featureFlag = braze.featureFlags.featureFlag(id: "enable_live_chat")
var liveChatEnabled = featureFlag?.enabled ?? false

// Listen for updates from the Braze SDK
braze.featureFlags.subscribeToUpdates() { _ in
  let newValue = braze.featureFlags.featureFlag(id: "enable_live_chat")?.enabled ?? false
  liveChatEnabled = newValue
}

// Only show the Live Chat view if the Braze SDK determines it is enabled
liveChatView.isHidden = !liveChatEnabled

Controlar remotamente las variables de la aplicación

Usa conmutadores de características para modificar la funcionalidad de tu aplicación en producción. Esto puede ser particularmente importante para las aplicaciones móviles, donde las aprobaciones de la tienda de aplicaciones impiden desplegar cambios rápidamente a todos los usuarios.

Por ejemplo, supongamos que nuestro equipo de marketing quiere listar nuestras ventas y promociones actuales en la navegación de nuestra aplicación. Normalmente, nuestros ingenieros necesitan una semana de anticipación para cualquier cambio y tres días para una revisión de la tienda de aplicaciones. Pero con el Día de Acción de Gracias, Black Friday, Cyber Monday, Hanukkah, Navidad y Año Nuevo, todo dentro de dos meses, no podremos cumplir con estos plazos tan ajustados.

Con los conmutadores de características, podemos dejar que Braze gestione el contenido del enlace de navegación de nuestra aplicación, permitiendo a nuestro responsable de marketing hacer cambios en minutos en lugar de días.

Para configurar remotamente esta característica, crearemos un nuevo conmutador de características llamado navigation_promo_link y definiremos las siguientes propiedades iniciales:

Conmutador de características con propiedades de enlace y texto que dirigen a una página de ventas genérica.

En nuestra aplicación, usaremos los métodos getter de Braze para recuperar las propiedades de este conmutador de características y construir los enlaces de navegación basándonos en esos valores:

import * as braze from "@braze/web-sdk";
import {useState} from "react";

const featureFlag = braze.getFeatureFlag("navigation_promo_link");
// Check if the feature flag is enabled
const [promoEnabled, setPromoEnabled] = useState(featureFlag.enabled);
// Read the "link" property
const [promoLink, setPromoLink] = useState(featureFlag.getStringProperty("link"));
// Read the "text" property
const [promoText, setPromoText] = useState(featureFlag.getStringProperty("text"));

return (<>
  <div>
    <a href="/">Home</a>
    { promoEnabled && <a href={promoLink}>{promoText}</a> }
    <a href="/products">Products</a>
    <a href="/categories">Categories
  </div>
</>)
// liveChatView is the View container for the Live Chat UI
FeatureFlag featureFlag = braze.getFeatureFlag("navigation_promo_link");
if (featureFlag != null && featureFlag.getEnabled()) {
  liveChatView.setVisibility(View.VISIBLE);
} else {
  liveChatView.setVisibility(View.GONE);
}
liveChatView.setPromoLink(featureFlag.getStringProperty("link"));
liveChatView.setPromoText(featureFlag.getStringProperty("text"));

// liveChatView is the View container for the Live Chat UI
val featureFlag = braze.getFeatureFlag("navigation_promo_link")
if (featureFlag?.enabled == true) {
  liveChatView.visibility = View.VISIBLE
} else {
  liveChatView.visibility = View.GONE
}
liveChatView.promoLink = featureFlag?.getStringProperty("link")
liveChatView.promoText = featureFlag?.getStringProperty("text")
let featureFlag = braze.featureFlags.featureFlag(id: "navigation_promo_link")
if let featureFlag {
  liveChatView.isHidden = !featureFlag.enabled
} else {
  liveChatView.isHidden = true
}
liveChatView.promoLink = featureFlag?.stringProperty("link")
liveChatView.promoText = featureFlag?.stringProperty("text")

Ahora, el día antes de Acción de Gracias, solo tenemos que cambiar esos valores de propiedad en el panel de Braze.

Conmutador de características con propiedades de enlace y texto que dirigen a una página de ventas de Acción de Gracias.

Como resultado, la próxima vez que alguien cargue la aplicación, verá las nuevas ofertas de Acción de Gracias.

Coordinación de mensajes

Usa conmutadores de características para sincronizar el despliegue de una característica y la mensajería, y fortalecer la colaboración entre los equipos de producto y marketing. Al coordinar los lanzamientos de características y la mensajería a través de conmutadores de características, ambos equipos pueden alinear sus estrategias y crear experiencias de usuario consistentes.

Por ejemplo, supongamos que estamos lanzando un nuevo programa de fidelización con recompensas para nuestros usuarios. Puede ser difícil para los equipos de marketing y producto coordinar perfectamente el momento de los mensajes promocionales con el despliegue de una característica. Sin embargo, con los conmutadores de características en Canvas, nuestro equipo de producto puede aplicar lógica sofisticada para habilitar una característica para una audiencia específica, mientras que nuestro equipo de marketing controla la mensajería relacionada para esos mismos usuarios.

Para coordinar de forma efectiva el despliegue de la característica y la mensajería, crearemos un nuevo conmutador de características llamado show_loyalty_program. Para nuestro lanzamiento inicial por fases, dejaremos que Canvas controle cuándo y para quién se habilita el conmutador de características. Por ahora, dejaremos el porcentaje de despliegue en 0% y no seleccionaremos ningún Segment objetivo.

Un conmutador de características con el nombre Loyalty Rewards Program. El ID es show_loyalty_program, y la descripción indica que muestra el nuevo programa de fidelización con recompensas en la pantalla de inicio y la página de perfil.

Luego, en Canvas, crearemos un paso de conmutador de características que habilite el conmutador de características show_loyalty_program para nuestro Segment de “Clientes de alto valor”:

Un ejemplo de un Canvas con un paso de división de audiencia donde el Segment de clientes de alto valor activa el conmutador de características show_loyalty_program.

Ahora, los usuarios en este Segment comenzarán a ver el nuevo programa de fidelización, y después de que se habilite, se enviarán automáticamente un correo electrónico y un cuestionario para ayudar a nuestros equipos a recopilar comentarios.

Experimentación con características

Usa conmutadores de características para experimentar y confirmar tus hipótesis sobre tu nueva característica. Al dividir el tráfico en dos o más grupos, puedes comparar el impacto de un conmutador de características entre los grupos y determinar el mejor curso de acción basándote en los resultados.

Para los experimentos con conmutadores de características, puedes tener hasta nueve grupos en total: un grupo de control más hasta ocho variantes.

Una prueba A/B es una herramienta poderosa que compara las respuestas de los usuarios a múltiples versiones de una variable.

En este ejemplo, nuestro equipo ha construido un nuevo flujo de pago para nuestra aplicación de comercio electrónico. Aunque estamos seguros de que está mejorando la experiencia del usuario, queremos ejecutar una prueba A/B para medir su impacto en los ingresos de nuestra aplicación.

Para comenzar, crearemos un nuevo conmutador de características llamado enable_checkout_v2. No añadiremos una audiencia ni un porcentaje de despliegue. En su lugar, usaremos un experimento de conmutador de características para dividir el tráfico, habilitar la característica y medir el resultado.

En nuestra aplicación, verificaremos si el conmutador de características está habilitado o no y cambiaremos el flujo de pago en función de la respuesta:

import * as braze from "@braze/web-sdk";

const featureFlag = braze.getFeatureFlag("enable_checkout_v2");
braze.logFeatureFlagImpression("enable_checkout_v2");
if (featureFlag?.enabled) {
  return <NewCheckoutFlow />
} else {
  return <OldCheckoutFlow />
}
FeatureFlag featureFlag = braze.getFeatureFlag("enable_checkout_v2");
braze.logFeatureFlagImpression("enable_checkout_v2");
if (featureFlag != null && featureFlag.getEnabled()) {
  return new NewCheckoutFlow();
} else {
  return new OldCheckoutFlow();
}
val featureFlag = braze.getFeatureFlag("enable_checkout_v2")
braze.logFeatureFlagImpression("enable_checkout_v2")
if (featureFlag?.enabled == true) {
  return NewCheckoutFlow()
} else {
  return OldCheckoutFlow()
}
let featureFlag = braze.featureFlags.featureFlag(id: "enable_checkout_v2")
braze.featureFlags.logFeatureFlagImpression(id: "enable_checkout_v2")
if let featureFlag, featureFlag.enabled {
  return NewCheckoutFlow()
} else {
  return OldCheckoutFlow()
}

Configuraremos nuestra prueba A/B en un experimento de conmutador de características.

Ahora, el 50% de los usuarios verán la experiencia anterior, mientras que el otro 50% verán la nueva experiencia. Luego podemos analizar las dos variantes para determinar qué flujo de pago tuvo una tasa de conversión más alta.

La tasa de conversión es el porcentaje de veces que se ha producido un evento definido en comparación con todos los destinatarios de un mensaje. Este evento definido se determina cuando construyes la Campaign.

Un experimento de conmutador de características dividiendo el tráfico en dos grupos del 50%.

Una vez que determinemos nuestra variante ganadora, podemos detener esta Campaign y aumentar el porcentaje de despliegue del conmutador de características al 100% para todos los usuarios mientras nuestro equipo de ingeniería programa esto de forma fija en nuestra próxima versión de la aplicación.

Segmentación

Usa el filtro Conmutador de características para crear un Segment o dirigir mensajes a usuarios en función de si tienen un conmutador de características habilitado. Por ejemplo, supongamos que tienes un conmutador de características que controla el contenido premium en tu aplicación. Podrías crear un Segment que filtre por usuarios que no tienen el conmutador de características habilitado, y luego enviar a ese Segment un mensaje animándoles a actualizar su cuenta para ver el contenido premium.

  1. Abre tu Segment o la audiencia de tu mensaje.
  2. Añade el filtro Conmutador de características.
  3. Selecciona el conmutador de características.
  4. Establece el comparador en es para incluir a usuarios que tienen el conmutador de características habilitado, o no es para incluir a usuarios que no lo tienen. Constructor de Segments de Braze usando un filtro de valor habilitado de conmutador de características.

Para más información sobre cómo filtrar en Segments, consulta Crear un Segment.

Limitaciones del plan

Estas son las limitaciones de los conmutadores de características para los planes gratuito y de pago.

Característica Versión gratuita Versión de pago
Conmutadores de características activos 10 por espacio de trabajo 110 por espacio de trabajo
Experimentos de Campaign activos 1 por espacio de trabajo 100 por espacio de trabajo
Pasos de conmutador de características en Canvas Ilimitados Ilimitados

Un conmutador de características se considera activo y contará para tu límite si se cumple alguna de las siguientes condiciones:

  • El despliegue es superior al 0%
  • Se usa en un Canvas activo
  • Se usa en un experimento activo

Incluso si el mismo conmutador de características cumple varios criterios, como si se usa en un Canvas y el despliegue es del 50%, solo contará como 1 conmutador de características activo para tu límite.

New Stuff!