Feature Flags

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

Dica

Quando estiver pronto para criar suas próprias Feature Flags, consulte Criar Feature Flags.

Pré-requisitos

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

Casos de uso

Lançamentos graduais

Use Feature Flags para ativar recursos gradualmente para uma amostra da população. Por exemplo, você pode fazer um soft launch de um novo recurso primeiro para seus usuários VIP. Essa estratégia ajuda a mitigar riscos associados ao envio de novos recursos para todos de uma vez e ajuda a identificar bugs cedo.

Por exemplo, digamos que decidimos adicionar um novo link de “Suporte via Chat ao Vivo” ao nosso app para um atendimento ao cliente mais rápido. Poderíamos lançar esse recurso para todos os clientes de uma vez. No entanto, um lançamento amplo traz riscos, como:

• 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 caso a equipe de suporte precise de mais tempo.
• Não temos certeza do volume real de novos casos de suporte que receberemos, então talvez não tenhamos pessoal suficiente.
• Se nossa equipe de suporte ficar sobrecarregada, não temos uma estratégia para desativar rapidamente esse recurso.
• Pode haver bugs no widget de chat, e não queremos que os clientes tenham uma experiência negativa.

Com Feature Flags da Braze, podemos fazer o lançamento gradual do recurso e mitigar todos esses riscos:

• Vamos ativar o recurso “Suporte via Chat ao Vivo” quando a equipe de suporte disser que está pronta.
• Vamos ativar esse novo recurso para apenas 10% dos usuários para determinar se temos pessoal suficiente.
• Se houver bugs, podemos desativar o recurso rapidamente em vez de correr para lançar uma nova versão.

Para fazer o lançamento gradual desse recurso, podemos criar uma Feature Flag chamada “Live Chat Widget.”

No código do nosso app, vamos mostrar o botão Start Live Chat somente quando a Feature Flag da Braze estiver ativada:

• javascript
• java
• kotlin
• swift

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
28
29
30
31
32
33
34
35
36
37

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);

// - Available in version 7.0.0+
// Listen for events from the Braze SDK
braze.subscribeToFeatureFlagsEvents((event) => {
  switch (event.type) {
    case braze.ChannelEventType.CACHE_REPLAY:
    case braze.ChannelEventType.CACHE_LOAD:
    case braze.ChannelEventType.DATA_UPDATED: {
      const flag = event.cacheSnapshot.featureFlags.find((f) => f.id === "enable_live_chat");
      setLiveChatEnabled(flag ? flag.enabled : false);
      break;
    }
    case braze.ChannelEventType.ERROR:
      if (event.reason === braze.ChannelErrorReason.FEATURE_DISABLED) {
        setLiveChatEnabled(false);
      }
      break;
  }
});

// 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>}
</>)

Use subscribeToFeatureFlagsEvents no Web SDK 7.0.0 e posterior. subscribeToFeatureFlagsUpdates é o padrão anterior, descontinuado a partir da versão 7.0.0.

Para a lista completa de eventos que você pode receber, consulte Criar Feature Flags.

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
28
29
30
31
32

// Get the initial value from the Braze SDK
FeatureFlag featureFlag = braze.getFeatureFlag("enable_live_chat");
Boolean liveChatEnabled = featureFlag != null && featureFlag.getEnabled();

// - Available in version 44.0.0+
// Listen for events from the Braze SDK
braze.subscribeToFeatureFlagsEvents(event -> {
  if (event instanceof FeatureFlagsEvent.CacheReplay || event instanceof FeatureFlagsEvent.CacheLoad || event instanceof FeatureFlagsEvent.DataUpdated) {
    FeatureFlag newFeatureFlag = braze.getFeatureFlag("enable_live_chat");
    Boolean newValue = newFeatureFlag != null && newFeatureFlag.getEnabled();
    liveChatEnabled = newValue;
  } else if (event instanceof FeatureFlagsEvent.ErrorEvent) {
    FeatureFlagsEvent.ErrorEvent errorEvent = (FeatureFlagsEvent.ErrorEvent) event;
    if (errorEvent.getReason() instanceof ChannelErrorReason.FeatureDisabled) {
      liveChatEnabled = false;
    }
  }
});

// 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);
}

Use subscribeToFeatureFlagsEvents no Android SDK 44.0.0 e posterior. subscribeToFeatureFlagsUpdates é o padrão anterior, descontinuado a partir da versão 44.0.0.

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
28
29
30
31
32
33
34

// Get the initial value from the Braze SDK
val featureFlag = braze.getFeatureFlag("enable_live_chat")
var liveChatEnabled = featureFlag?.enabled

// - Available in version 44.0.0+
// Listen for events from the Braze SDK
braze.subscribeToFeatureFlagsEvents { event ->
  when (event) {
    is FeatureFlagsEvent.CacheReplay, is FeatureFlagsEvent.CacheLoad, is FeatureFlagsEvent.DataUpdated -> {
      val newValue = braze.getFeatureFlag("enable_live_chat")?.enabled
      liveChatEnabled = newValue
    }
    is FeatureFlagsEvent.ErrorEvent -> {
      if (event.reason is ChannelErrorReason.FeatureDisabled) {
        liveChatEnabled = false
      }
    }
    else -> {}
  }
}

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates {
  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
}

Use subscribeToFeatureFlagsEvents no Android SDK 44.0.0 e posterior. subscribeToFeatureFlagsUpdates é o padrão anterior, descontinuado a partir da versão 44.0.0.

Nota

A leitura de braze.featureFlags.featureFlags ou braze.featureFlags.featureFlag(id:) bloqueia a thread de chamada até que o SDK tenha concluído suas operações pós-inicialização. Para contextos da thread principal ou sensíveis à latência, use getAllFeatureFlags(_:).

1
2
3
4
5

// Non-blocking — completion handler always delivers on the main thread.
braze.featureFlags.getAllFeatureFlags { flags in
  let liveChatEnabled = flags.first(where: { $0.id == "enable_live_chat" })?.enabled ?? false
  liveChatView.isHidden = !liveChatEnabled
}

Em Objective-C:

1
2
3

[braze.featureFlags getAllFeatureFlagsWithCompletion:^(NSArray<BRZFeatureFlag *> *flags) {
  // Use `flags` here.
}];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

// - Available in version 19.0.0+
// Listen for events from the Braze SDK
let cancellable = braze.featureFlags.subscribeToEvents { event in
  switch event {
  case .cacheReplay, .cacheLoad, .dataUpdated:
    let newValue = braze.featureFlags.featureFlag(id: "enable_live_chat")?.enabled ?? false
    liveChatEnabled = newValue
  default:
    break
  }
}

// Listen for updates from the Braze SDK
let cancellable = 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

Use subscribeToEvents(_:) no Swift SDK 19.0.0 e posterior. subscribeToUpdates(_:) é o padrão anterior, descontinuado a partir da versão 19.0.0.

Para saber quando cada evento é disparado e o que cada motivo de atualização, estado de nova tentativa, ação de análise de dados e motivo de erro significa, consulte Inscrições em eventos.

Controlar variáveis do app remotamente

Use Feature Flags para modificar a funcionalidade do seu app em produção. Isso pode ser particularmente importante para apps mobile, onde as aprovações da app store impedem o lançamento rápido de mudanças para todos os usuários.

Por exemplo, digamos que nossa equipe de marketing quer listar nossas vendas e promoções atuais na navegação do nosso app. Normalmente, nossos engenheiros precisam de uma semana de antecedência para quaisquer alterações e três dias para a revisão da app store. Mas com o Dia de Ação de Graças, Black Friday, Cyber Monday, Hanukkah, Natal e Ano Novo, tudo em dois meses, não conseguiremos cumprir esses prazos apertados.

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

Para configurar esse recurso remotamente, vamos criar uma nova Feature Flag chamada navigation_promo_link e definir as seguintes propriedades iniciais:

No nosso app, vamos usar métodos getter da Braze para recuperar as propriedades dessa Feature Flag e construir 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 os valores dessas propriedades no dashboard da Braze.

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

Coordenação de mensagens

Use Feature Flags para sincronizar o lançamento 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 produto coordenar perfeitamente o timing do envio de mensagens promocionais com o lançamento de um recurso. No entanto, com 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 o lançamento do recurso e o envio de mensagens, vamos criar uma nova Feature Flag chamada show_loyalty_program. Para nosso lançamento inicial em fases, vamos deixar o Canvas controlar quando e para quem a Feature Flag é ativada. Por enquanto, vamos deixar a porcentagem de lançamento em 0% e não selecionar nenhum Segment de destino.

Em seguida, no Canvas, vamos criar uma etapa de Feature Flag que ativa a Feature Flag show_loyalty_program para nosso Segment “Clientes de Alto Valor”:

Agora, os usuários nesse Segment começam a ver o novo programa de fidelidade. Após a ativação, um e-mail e uma pesquisa são enviados automaticamente para ajudar nossas equipes a coletar feedback.

Experimentação de recursos

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

Para experimentos com Feature Flags, você pode ter até nove grupos no total: um grupo de controle mais até oito variantes.

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

Neste exemplo, nossa equipe construiu um novo fluxo de checkout para nosso app de eCommerce. Mesmo estando confiantes de que 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, vamos criar uma nova Feature Flag chamada enable_checkout_v2. Não vamos adicionar um público ou porcentagem de lançamento. Em vez disso, vamos usar um experimento de Feature Flag para dividir o tráfego, ativar o recurso e medir o resultado.

No nosso app, vamos verificar se a Feature Flag está ativada ou não e trocar 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()
}

Vamos configurar 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 experiência nova. 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 Campaign.

Depois de determinar a variante vencedora, podemos interromper essa Campaign e aumentar a porcentagem de lançamento na Feature Flag para 100% para todos os usuários, enquanto nossa equipe de engenharia faz o hard-code disso na próxima versão do app.

Segmentação

Use o filtro Feature Flag para criar um Segment ou direcionar o envio de mensagens a usuários com base em se eles têm uma Feature Flag ativada. Por exemplo, digamos que você tenha uma Feature Flag que controla conteúdo premium no seu app. Você poderia criar um Segment que filtra usuários que não têm a Feature Flag ativada e, em seguida, enviar a esse Segment uma mensagem incentivando-os a fazer upgrade da conta para visualizar o conteúdo premium.

1. Abra seu Segment ou público da mensagem.
2. Adicione o filtro Feature Flag.
3. Selecione a Feature Flag.
4. Defina o comparador como is para incluir usuários que têm a Feature Flag ativada, ou is not para incluir usuários que não têm.

Para saber mais sobre filtragem em Segments, consulte Criar um Segment.

Nota

Para evitar Segments recursivos, não é possível criar um Segment que faça referência a outras Feature Flags.

Limitações do plano

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

Uma Feature Flag é considerada ativa e será contabilizada no seu limite se qualquer uma das seguintes condições se aplicar:

• O rollout é superior a 0%
• Está em uso em um Canvas ativo
• Está em uso em um experimento ativo

Mesmo que a mesma Feature Flag atenda a vários critérios, como se estiver sendo usada em um Canvas e o rollout for de 50%, ela será contabilizada apenas como 1 Feature Flag ativa no seu limite.

Nota

Para adquirir a versão paga das Feature Flags, entre em contato com o gerente da sua conta Braze ou solicite um upgrade no dashboard da Braze.