Aumente as Conversões na Black Friday: Estratégia ASO & Ícone Dinâmico no React Native

Foto de CardMapr.nl na Unsplash

Bem-vindo ao mundo da Black Friday, a época do ano em que consumidores estão ávidos por ofertas incríveis, e as empresas estão ansiosas para maximizar suas vendas. Para ter sucesso nesse cenário altamente competitivo, cada detalhe do seu aplicativo móvel desempenha um papel crucial. E uma maneira eficaz de se destacar é personalizar a experiência do usuário, até mesmo os detalhes aparentemente pequenos, como o ícone do seu aplicativo.

O sucesso de um aplicativo móvel vai além da sua funcionalidade e design. É preciso garantir que ele seja facilmente descoberto por seu público-alvo, e a Estratégia ASO (App Store Optimization) é a chave para isso. O ASO envolve um conjunto de técnicas voltadas para a otimização da presença de um aplicativo nas lojas de aplicativos, como a App Store e o Google Play. Desde a escolha de palavras-chave estratégicas até a criação de títulos cativantes e imagens atraentes, o ASO é uma parte essencial do marketing de aplicativos que pode impulsionar o número de downloads, melhorar a classificação nas listas de resultados e aumentar a visibilidade do seu aplicativo.

Neste post, vamos explorar uma estratégia de diferenciação que pode impulsionar suas conversões na Black Friday: a capacidade de alterar dinamicamente os ícones do seu aplicativo React Native. Vamos mergulhar fundo nesse processo, fornecendo a você as ferramentas e conhecimentos necessários para atrair a atenção dos consumidores, destacar-se da concorrência e aumentar as conversões durante a Black Friday. Prepare-se para uma jornada de personalização e sucesso nesta temporada de compras intensas.

ASO

Sabendo que ASO é um "SEO para mobile" vamos então entender alguns pontos que podemos e devemos olhar nesse período de Black Friday para atrair ainda mais usuários para o nosso funil de conversão.

• Palavras-chave: sempre inclua palavras-chave na descrição, títulos e metadados da sua aplicação. Isso faz com que os mecanismos de busca incorporem essas informações e ajude seu aplicativo aparecer entre os primeiros resultados.

• Título e descrição: você já percebeu como aplicativos como Shopee e Aliexpress mudam constantemente o título deles nas lojas acompanhando os eventos do mercado? Isso também é uma técnica ASO.

• Ícones e imagens: use imagens e ícones que acompanhe as ações comerciais e principalmente com qualidade alta e no formato certo, nada de reciclar imagens de outros formatos ou utilizar capturas de tela quaisquer.

Ícones no React Native, mude sem atualizar

Você já deve ter percebido que um app simplesmente mudou de ícone no seu smartphone e você não o percebeu atualizando, aplicativos super famosos fazem isso o tempo todo, não apenas para BF, mas para eventos até exclusivos como Prime Day, 11.11, e outros.

Isso é uma técnica super simples, mas muito eficaz, onde você pode trocar o ícone do aplicativo sem precisar de um deploy para isso, você pode ter vários ícones lá dentro e utilizar a técnica de Feature Toggle para controlar qual o ícone será exibido no período que você desejar.

Configurar um ícone no React Native é algo muito simples, conta com passos nativos apenas, logo tudo que você tem que fazer é ter uma imagem para ser utilizada como ícone e adapta-la a diversos formatos para cada plataforma, felizmente existem várias ferramentas para isso hoje em dia, Appicon talvez seja a mais famosa.
Eu utilizei o Icon Kitchen para gerar um ícone do zero e configurei, ficando assim:

Então como eu quero um novo icone para Black Friday eu utilizei novamente o Icon Kitchen para criar um icone seguindo os padrões recomendados (sim, existe normatização para ícones em mobile) e cheguei nesse resultado:

Eu quis trazer uma mensagem bem simples; estamos participando da BF (e por isso o fundo preto) e temos descontos de 70%.

Agora vamos à implementação, podemos fazer isso de forma nativa e criando uma ponte entre o código nativo e o RN, não é algo tão difícil, mas para economizar nosso tempo e não reinventar a roda vamos utilizar uma biblioteca pronta e já madura no mercado: react-change-icon.

Adicione a nova dependência ao seu projeto:

yarn add react-native-change-icon
# ou
npm i react-native-change-icon

Para iOS rode o pod install na pasta ios.

E agora é só seguir os passos da própria documentação para implementar, lembre-se de mudar o nome do ícone antes de copiar os arquivos para as pastas nativas de cada plataforma (Android e iOS).

Após toda configuração podemos controlar o ícone da aplicação usando a função changeIcon(), ela aceita um parâmetro que é o nome do ícone da forma que configuramos nativamente, logo, para mudar para o ícone da BF eu chamaria:

changeIcon("BlackFriday");

Porém, isso ainda deixa nosso codigo um pouco estatico, e para resolver isso temos varias formas, uma delas seria criar ifs para datas específicas, algo como 15 dias antes da BF eu chamar a função passando o novo ícone, mas isso também não é legal, vamos utilizar o conhecimento do post de Feature Toggle para buscar essa regra remotamente, permitindo que a gente mude isso sem grandes problemas.

Um exemplo bem simples de codigo para isso acontecer:

async function checkIcon() {
    // Busca remotamente o icone que deve ser utilizado
    const toggleResponse = await fetch(
      'https://minhaapi.com.br/features/app-icon',
    );

    // Um object literal para armazenar os possiveis icones
    // já existentes no app
    const icons = {
      blackFriday: 'BlackFriday',
      christmas: 'Christmas',
      default: 'Default',
    };

    const iconToggle = await toggleResponse.json();
    // Busca qual o icone esta sendo usado
    const actualIcon = await getIcon();

    // Verifica retorna o nome do icone, caso não exista retorna default
    const newIcon = icons[iconToggle.iconTheme] || 'Default';

    // Se o icone do servidor for igual o atual, não fazemos nada
    if (actualIcon === newIcon) {
      return;
    }

    // Troca o icone
    changeIcon(newIcon);
  }

  useEffect(() => {
    checkIcon();
  }, []);

Lembre-se de que para mandar um icone, ele precisa existir previamente no aplicativo, então você ainda precisa se planejar pois precisará de um deploy, porém pode fazer com muita antecedência.

Dessa forma buscamos assim que o app iniciar a informação de qual ícone devemos exibir, caso seja diferente do exibido atualmente nós trocamos. É possível também ouvir o retorno da função de troca, para caso venha um ícone que não exista seja feito um reset para o ícone padrão.
O resultado disso tudo:

Confira o GIF do fluxo simulando uma situação real:

Na esquerda o backend, no meio o codigo e o terminal e na direita o simulador de iOS.

Conclusão

Todo o conceito desse post pode ser aplicado em qualquer outro framework ou linguagem, não se prenda apenas ao exemplo em código do React Native aqui.

Gostou desse conteúdo e quer que eu traga mais técnicas de ASO e assuntos de React Native? Comenta aqui embaixo!

Compartilhe esse contéudo com amigos e nas suas redes, você ajuda muito!