mailinapp
Documentation menu

Bloco Funil

Um gráfico de estágios progressivos para uma sequência como visitas → cadastros → compras, em que cada estágio é medido em relação ao estágio que iniciou a sequência. Ele existe para responder a uma pergunta que um gráfico de barras simples não consegue: não apenas o tamanho de cada estágio, mas quanto do público original chegou até ali.

Como funciona

O gráfico desenha cada estágio autoral como uma barra horizontal, estreitando-se da esquerda para a direita conforme o valor cai — a mesma linguagem visual usada em outras partes do produto para funis de engajamento. Ele é colorido por uma rampa ordinal (um único matiz, sombreado pela posição do estágio), não pela paleta categórica que outros gráficos usam. Essa distinção importa: um estágio de funil não é uma identidade independente como uma fatia de pizza ou uma série de gráfico de barras — é uma posição em uma sequência ordenada, e a cor reflete isso.

Abaixo da imagem fica a tabela de dados sempre visível — nunca opcional, já que é o que torna o bloco utilizável em clientes somente texto, caixas de entrada que bloqueiam imagens e leitores de tela. A tabela do funil traz dois números que a imagem sozinha não mostra:

  • % do primeiro — o valor deste estágio como porcentagem do primeiro estágio, a leitura de "quanto do público original resta".
  • % do anterior — o valor deste estágio como porcentagem do estágio imediatamente anterior, a queda passo a passo que um funil existe para revelar.

A ordem dos estágios é o próprio dado. Como o significado de um funil depende inteiramente da ordem em que você digitou os estágios, não há como agrupar um estágio em excesso em um bucket "Outros" como fazem o gráfico de pizza ou o treemap quando ficam sem espaço. Mesclar dois estágios representaria mal a forma da sequência. Em vez disso, além de 8 estágios, tudo o que ultrapassar o limite simplesmente não é desenhado (nem tabelado). Um rótulo em branco, um valor não interpretável ou um valor negativo são ignorados de imediato — um estágio de funil não pode ser negativo, então um valor abaixo de zero é tratado como não preenchido, e não como um estágio real de valor zero.

Campos configuráveis:

  • Título do gráfico — texto de cabeçalho opcional acima do gráfico.
  • Estágios (em ordem) — a própria lista de linhas: um rótulo de Estágio e um Valor numérico por linha, autorados na ordem em que os estágios progridem. Não há campo de cor por linha — a cor de um estágio sempre deriva da sua posição, nunca é escolhida linha a linha.
  • Cor da rampa — sobrepõe o matiz base da rampa ordinal; deixe em branco para usar a cor de marca do projeto.
  • Cor de fundo, espaçamento interno, borda e raio da borda no cartão.
  • Cor/tamanho do título e cor/tamanho da legenda — estilo de texto para o cabeçalho e para o texto da legenda/tabela abaixo da imagem.

Se ainda não houver estágios autorados, o bloco renderiza seu título e o revestimento do cartão com um aviso simples "Adicione pelo menos uma linha de dados para renderizar este gráfico" no lugar da imagem. Assim, nunca há um gráfico quebrado ou vazio no meio da edição.

Exemplos

Um relatório de cadastro até compra (Visitou, Cadastrou-se, Adicionou ao carrinho, Comprou) dá à equipe uma leitura de queda de conversão. Um e-mail de suporte ou onboarding pode acompanhar um fluxo de configuração em várias etapas (Conta criada → Perfil completado → Primeiro projeto → Convidou um colega) para ver exatamente onde novos usuários travam. Uma equipe de conteúdo que promove um webinar pode traçar Registrado → Participou → Fez uma pergunta → Solicitou acompanhamento para ver quanto da lista de registro realmente se engajou ao vivo.

Como é o fallback estático

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup funnel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Funnel: Visited 1,000 (100%) → Signed up 420 (42%) → Added to cart 180 (18%) → Purchased 95 (9.5%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Stage</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of first</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of previous</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">420</td>
      <td style="padding:4px 8px">42%</td>
      <td style="padding:4px 8px">42%</td>
    </tr>
  </table>
</div>

A <img> carrega uma descrição textual completa de cada estágio em seu texto alt, e a tabela abaixo repete os mesmos números como HTML selecionável — incluindo a coluna de queda que a imagem em si não desenha.

Veja também