Feature Flags

Os Feature Flags permitem ativar ou desativar remotamente a funcionalidade para uma seleção específica ou aleatória de usuários. É importante ressaltar que eles permitem ativar e desativar um recurso na produção sem implementação adicional de código ou atualizações na loja de aplicativos. Isso permite que você implemente novos recursos com segurança e confiança.

Pré-requisitos

Essas são as versões mínimas do SDK necessárias para começar a usar os Feature Flags:

Casos de uso

Implementações graduais

Use os Feature Flags para ativar gradualmente os recursos em uma população de amostra. Por exemplo, você pode lançar um novo recurso para seus usuários VIP primeiro. Essa estratégia ajuda a reduzir os riscos associados ao envio de novos recursos para todos ao mesmo tempo e ajuda a detectar bugs com antecedência.

Por exemplo, digamos que decidimos adicionar um novo link “Live Chat Support” ao nosso app para agilizar o atendimento ao cliente. Poderíamos liberar esse recurso para todos os clientes de uma só vez. No entanto, um lançamento amplo traz riscos, como, por exemplo:

• Nossa equipe de suporte ainda está em treinamento, e os clientes podem abrir tickets de suporte após o lançamento. Isso não nos dá nenhuma margem de manobra caso a equipe de suporte precise de mais tempo.
• Não temos certeza do volume real de novos casos de suporte que receberemos, portanto, talvez não tenhamos a equipe adequada.
• Se nossa equipe de suporte estiver sobrecarregada, não temos nenhuma estratégia para desativar rapidamente esse recurso novamente.
• Pode haver bugs introduzidos no widget de bate-papo, e não queremos que os clientes tenham uma experiência negativa.

Com os Feature Flags da Braze, podemos implementar gradualmente o recurso e mitigar todos esses riscos:

• Ativaremos o recurso “Live Chat Support” quando a equipe de suporte disser que está pronta.
• Ativaremos esse novo recurso para apenas 10% dos usuários para determinar se estamos com a equipe adequada.
• Se houver algum erro, podemos desativar rapidamente o recurso em vez de nos apressarmos em enviar uma nova versão.

Para implementar gradualmente esse recurso, podemos criar um Feature Flag chamado “Live Chat Widget”.

Em nosso código do app, mostraremos o botão Start Live Chat somente quando o Feature Flag da Braze estiver ativado:

• javascript
• java
• kotlin
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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>}
</>)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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
}

1
2
3
4
5
6
7
8
9
10
11
12
// 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

Controle remotamente as variáveis do app

Use os Feature Flags para modificar a funcionalidade do seu app na produção. Isso pode ser particularmente importante para apps mobile, em que as aprovações da loja de aplicativos impedem a implementação rápida de alterações para todos os usuários.

Por exemplo, digamos que nossa equipe de marketing queira listar nossas vendas e promoções atuais na navegação do app. Normalmente, nossos engenheiros exigem um prazo de uma semana para qualquer alteração e três dias para uma revisão da loja de aplicativos. Porém, com o Dia de Ação de Graças, a Black Friday, a Cyber Monday, o Hanukkah, o Natal e o Ano Novo em dois meses, não conseguiremos cumprir esses prazos apertados.

Com os Feature Flags, podemos permitir que a Braze controle o conteúdo do link de navegação do nosso app, permitindo que nosso profissional de marketing faça alterações em minutos, em vez de dias.

Para configurar remotamente esse recurso, criaremos um novo Feature Flag chamado navigation_promo_link e definiremos as seguintes propriedades iniciais:

Em nosso app, usaremos os métodos getter da Braze para recuperar as propriedades desse Feature Flag e criar os links de navegação com base nesses valores:

• javascript
• java
• kotlin
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
</>)

1
2
3
4
5
6
7
8
9
10
// 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"));

1
2
3
4
5
6
7
8
9
// 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")

1
2
3
4
5
6
7
8
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")

Agora, na véspera do Dia de Ação de Graças, só precisamos alterar esses valores de propriedade no dashboard da Braze.

Como resultado, na próxima vez que alguém carregar o app, verá as novas ofertas de Ação de Graças.

Coordenação de mensagens

Use os Feature Flags para sincronizar a implementação de um recurso e o envio de mensagens, fortalecendo a colaboração entre as equipes de produto e marketing. Ao coordenar lançamentos de recursos e envio de mensagens por meio de Feature Flags, ambas as equipes podem alinhar suas estratégias e criar experiências de usuário consistentes.

Por exemplo, digamos que estamos lançando um novo programa de recompensas de fidelidade para nossos usuários. Pode ser difícil para as equipes de marketing e de produto coordenarem perfeitamente o momento do envio de mensagens promocionais com o lançamento de um recurso. No entanto, com os Feature Flags no Canvas, nossa equipe de produto pode aplicar uma lógica sofisticada para ativar um recurso para um público específico, enquanto nossa equipe de marketing controla o envio de mensagens relacionadas para esses mesmos usuários.

Para coordenar efetivamente a implementação de recursos e o envio de mensagens, criaremos um novo Feature Flag chamado show_loyalty_program. Em nosso lançamento inicial em fases, deixaremos que o Canvas controle quando e para quem o Feature Flag será ativado. Por enquanto, deixaremos a porcentagem de implementação em 0% e não selecionaremos nenhum segmento de direcionamento.

Então, no Canvas, criaremos uma etapa de Feature Flag que ativa o Feature Flag show_loyalty_program para nosso segmento de “Clientes de Alto Valor”:

Agora, os usuários desse segmento começarão a ver o novo programa de fidelidade e, depois que ele for ativado, um e-mail e uma pesquisa serão enviados automaticamente para ajudar nossas equipes a obter feedback.

Experimentação de recursos

Use os Feature Flags para fazer experimentos e confirmar suas hipóteses sobre o novo recurso. Ao dividir o tráfego em dois ou mais grupos, você pode comparar o impacto de um Feature Flag entre os grupos e determinar o melhor curso de ação com base nos resultados.

Um teste A/B é uma ferramenta poderosa que compara as respostas dos usuários a várias versões de uma variável.

Neste exemplo, nossa equipe construiu um novo fluxo de checkout para nosso app de eCommerce. Embora estejamos confiantes de que ele está melhorando a experiência do usuário, queremos executar um teste A/B para medir seu impacto na receita do nosso app.

Para começar, criaremos um novo Feature Flag chamado enable_checkout_v2. Não adicionaremos um público ou porcentagem de implementação. Em vez disso, usaremos um experimento de Feature Flag para dividir o tráfego, ativar o recurso e medir o resultado.

Em nosso app, verificaremos se o Feature Flag está ativado ou não e trocaremos o fluxo de checkout com base na resposta:

• javascript
• java
• kotlin
• swift

1
2
3
4
5
6
7
8
9
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 />
}

1
2
3
4
5
6
7
FeatureFlag featureFlag = braze.getFeatureFlag("enable_checkout_v2");
braze.logFeatureFlagImpression("enable_checkout_v2");
if (featureFlag != null && featureFlag.getEnabled()) {
  return new NewCheckoutFlow();
} else {
  return new OldCheckoutFlow();
}

1
2
3
4
5
6
7
val featureFlag = braze.getFeatureFlag("enable_checkout_v2")
braze.logFeatureFlagImpression("enable_checkout_v2")
if (featureFlag?.enabled == true) {
  return NewCheckoutFlow()
} else {
  return OldCheckoutFlow()
}

1
2
3
4
5
6
7
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 nosso teste A/B em um experimento de Feature Flag.

Agora, 50% dos usuários verão a experiência antiga, enquanto os outros 50% verão a nova experiência. Podemos então analisar as duas variantes para determinar qual fluxo de checkout resultou em uma taxa de conversão mais alta.

Taxa de conversão é a porcentagem de vezes que um evento definido ocorreu em comparação com todos os destinatários de uma mensagem. Esse evento definido é determinado quando você cria a campanha.

Assim que determinarmos o vencedor, poderemos interromper essa campanha e aumentar a porcentagem de implementação do Feature Flag para 100% para todos os usuários, enquanto nossa equipe de engenharia codifica isso na próxima versão do app.

Segmentação

Use o filtro Feature Flag para criar um segmento ou direcionar o envio de mensagens aos usuários com base no fato de eles terem ou não um Feature Flag ativado. Por exemplo, digamos que temos um Feature Flag que controla o conteúdo premium em nosso app. Poderíamos criar um segmento que filtrasse os usuários que não tivessem o Feature Flag ativado e, em seguida, enviar a esse segmento uma mensagem pedindo que fizessem upgrade da conta para ver o conteúdo premium.

Para saber mais sobre filtragem em segmentos, consulte Criação de um segmento.

Limitações do plano

Essas são as limitações dos Feature Flags para planos gratuitos e pagos.

Um Feature Flag é considerado ativo e contará para o seu limite se qualquer uma das seguintes situações se aplicar:

• A implementação é superior a 0%
• Usado em um Canvas ativo
• Usado em um experimento ativo

Mesmo que o mesmo Feature Flag corresponda a vários critérios, por exemplo, se for usado em um Canvas e a implementação for de 50%, ele contará apenas como 1 Feature Flag ativo para o seu limite.