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 lançamento suave de um novo recurso primeiro para seus usuários VIP. Essa estratégia ajuda a reduzir os riscos de lançar novos recursos para todos de uma só vez e ajuda a detectar bugs com antecedência.

Por exemplo, digamos que decidimos adicionar um novo link “Suporte por chat ao vivo” ao nosso app para agilizar o atendimento ao cliente. 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 assim que o recurso for lançado. Isso não nos dá margem caso a equipe de suporte precise de mais tempo.
• Não sabemos ao certo o volume de novos casos de suporte que vamos receber, então talvez não tenhamos pessoal suficiente.
• Se nossa equipe de suporte ficar sobrecarregada, não temos uma estratégia para desativar esse recurso rapidamente.
• Podem surgir bugs no widget de chat, e não queremos que os clientes tenham uma experiência negativa.

Com os Feature Flags da Braze, podemos lançar o recurso gradualmente e reduzir todos esses riscos:

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

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

No código do nosso app, só vamos exibir o botão Start Live Chat 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
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 ver 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

Ler braze.featureFlags.featureFlags ou braze.featureFlags.featureFlag(id:) bloqueia a thread que fez a chamada até que o SDK conclua suas operações pós-inicialização. Em contextos na 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 significa cada motivo de atualização, estado de nova tentativa, ação de análise de dados e motivo de erro, consulte Assinaturas de eventos.

Controle remoto das variáveis do app

Use Feature Flags para modificar a funcionalidade do seu app em produção. Isso pode ser especialmente importante para apps móveis, em que as aprovações das lojas de apps impedem que as alterações cheguem rapidamente a 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 precisam de uma semana de antecedência para qualquer alteração e de três dias para a análise da loja de apps. Mas com Ação de Graças, Black Friday, Cyber Monday, Hanukkah, Natal e Ano Novo em um intervalo de dois meses, não conseguiremos cumprir esses prazos apertados.

Com os Feature Flags, a Braze pode controlar o conteúdo do link de navegação do nosso app. Assim, nosso gerente de marketing faz alterações em minutos, e não em dias.

Para configurar esse recurso remotamente, vamos criar um novo Feature Flag chamado navigation_promo_link e definir as seguintes propriedades iniciais:

No nosso app, vamos usar 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(key: "link")
liveChatView.promoText = featureFlag?.stringProperty(key: "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, 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 Feature Flags para sincronizar o lançamento de um recurso com o envio de mensagens e fortalecer a colaboração entre as equipes de produto e de marketing. Ao coordenar lançamentos de recursos e mensagens por meio de Feature Flags, as duas 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 das 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 as mensagens relacionadas para esses mesmos usuários.

Para coordenar com eficácia o lançamento do recurso e as mensagens, vamos criar um novo Feature Flag chamado show_loyalty_program. No lançamento inicial em fases, vamos deixar o Canvas controlar quando e para quem o Feature Flag será ativado. Por enquanto, vamos manter a porcentagem de lançamento em 0% e não selecionar nenhum Segment de destino.

Em seguida, no Canvas, vamos criar uma etapa Feature Flag que ativa o Feature Flag show_loyalty_program para o nosso Segment “High Value Customers”:

Agora, os usuários desse Segment começam a ver o novo programa de fidelidade. Depois que ele é ativado, 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 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 definir a melhor ação com base nos resultados.

Nos experimentos de Feature Flag, você pode ter até nove grupos no total: um grupo de controle e até oito variantes.

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 criou um novo fluxo de checkout para o nosso app de e-commerce. Embora estejamos confiantes de que ele melhora a experiência do usuário, queremos executar um teste A/B para medir o impacto na receita do app.

Para começar, vamos criar um novo Feature Flag chamado enable_checkout_v2. Não vamos adicionar um público nem uma 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 o Feature Flag está ativado 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 nova experiência. Depois, podemos analisar as duas variantes para determinar qual fluxo de checkout resultou em uma taxa de conversão maior.

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 esta Campaign e aumentar a porcentagem de lançamento do Feature Flag para 100% de todos os usuários, enquanto nossa equipe de engenharia incorpora essa mudança diretamente no código da próxima versão do app.

Segmentação

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

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

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

Nota

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

Limitações do plano

Estas são as limitações de Feature Flags nos planos gratuito e pago.

Uma Feature Flag é considerada ativa e conta para o seu limite se qualquer uma das condições a seguir se aplicar:

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

Mesmo que a mesma Feature Flag atenda a vários critérios, como ser usada em um Canvas e ter uma implementação de 50%, ela contará apenas como 1 Feature Flag ativa para o 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.