Como configurar um Smart App Banner no iOS e Android

Este post foi publicado originalmente em 2015. Ele foi atualizado para refletir as mudanças no cenário atual do iOS e a ausência de mudanças no cenário do Android.

Há anos, sabe-se que os usuários preferem aplicativos nativos a sites mobile. No entanto, usar deep links a partir dos e para os aplicativos ainda não é algo tão comum quanto deveria ser, se comparado a sites. Por causa disso, sites mobile ainda representam a maior parte dos acessos por smartphones, , especialmente quando se trata de descobrir novos aplicativos.

Por exemplo, suponha que seu usuário compartilhe um artigo do seu aplicativo no Facebook e vários novos visitantes cliquem nesse artigo. Se os seus links levarem esses visitantes para a página do seu aplicativo na App Store em vez de mostrar o artigo a eles, muitos usuários descontentes perderão interesse e retornarão ao Facebook. É aqui que um site mobile com um Smart App Banner entra em cena.

Neste post, descreveremos as várias opções de Smart App Banner disponíveis para iOS e Android, incluindo como criar banners inteligentes totalmente personalizados usando o Journeys da Branch.

O que é um Smart App Banner?

Um Smart App Banner, ou banner inteligente para aplicativos, usa uma fração da tela de um site para informar e incentivar os usuários a abrir o aplicativo nativo ou instalá-lo, caso eles ainda não o possuam. É um link inteligente que contém toda a lógica de direcionamento necessária para abrir automaticamente o aplicativo quando ele já estiver instalado ou, caso ainda não esteja, levar o usuário para uma página da App Store.

Captura de tela do telefone com banner inteligente para iOS escrito "Visualização"

Como você pode ver, o conteúdo continua disponível nesta página do site mobile em um dispositivo sem o aplicativo instalado. Contudo, o banner na parte superior da tela apresenta uma opção de baixar ou abrir o aplicativo se o usuário optar por fazê-lo. Para novos usuários, mostrar um site com um banner representa um modelo de onboarding claro e discreto, onde eles interagem com o site e se convertem em usuários do aplicativo todo quando estiverem prontos.

O que o Smart App Banner para iOS da Apple faz?

No iOS 6, a Apple lançou um Smart App Banner para Safari. Sua aparência evoluiu desde então, mas ainda funciona da mesma maneira.

Captura de tela do telefone com banner inteligente para iOS escrito "Visualização"

Quando se clica nesse banner, podem acontecer duas coisa diferentes. Se o aplicativo estiver instalado, o banner o abrirá chamando o esquema de URI do aplicativo com os parâmetros de deep link que o acompanham. Se o aplicativo não estiver instalado, o banner levará o usuário à página da App Store.

O banner da Apple tem algumas características únicas que outros banners inteligentes de terceiros não podem replicar facilmente:

  • A chamada à ação “Visualizar” sempre mudará para “Abrir” quando o iOS detectar que o aplicativo está instalado.
  • Ao baixar o aplicativo, o banner inteligente mostrará uma barra de progresso.

Porém, ele também vem com algumas limitações significativas:

  • Só funciona no iOS Safari.
  • O layout, a cor e o conteúdo não podem ser alterados.
  • Sem atribuição de clique ou download.
  • Os deep links (que levam os usuários a um conteúdo específico) só funcionam se o aplicativo já estiver instalado. Em outras palavras, não funcionam como deep links adiados.

Implementando Smart App Banners no iOS

Se você quiser usar o banner inteligente básico do Safari, basta incluir a seguinte metatag no cabeçalho HTML da página de seu site:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL">

O ID do aplicativo é o identificador exclusivo do seu aplicativo. Se você não sabe qual é o seu, pode encontrá-lo pesquisando na App Store. O ID do aplicativo será incluído na URL do seu aplicativo na App Store:

Imagem da página do aplicativo Branch Monster Factory na App Store da Apple

Seu argumento do aplicativo permite que você associe seu aplicativo e o destino pretendido no aplicativo à página correspondente em seu site. Esta associação é repassada ao destino, juntamente com outras informações (por exemplo, se o usuário está logado) para o aplicativo.

Para saber mais sobre o banner padrão do Safari, confira a página de documentação da Apple: Promoting Apps with Smart App Banners (Promoção de aplicativos com Smart App Banners).

Observação: se você tiver habilitado Universal Links para seu domínio e o aplicativo já estiver instalado no dispositivo, o Safari mostrará automaticamente uma versão menor do banner do aplicativo. Esse “banner do Universal Links” não pode ser desabilitado.

Existe um Smart App Banner para Android?

Devido à fragmentação do ecossistema Android e à escolha do navegador, o Google nunca lançou um banner inteligente para Android. O Chrome oferece algo chamado Native App Install Prompt; porém, é difícil de implementar, oferece muito pouco controle para o desenvolvedor e nunca foi amplamente adotado.

A introdução do banner inteligente para iOS pela Apple gerou inicialmente o desenvolvimento de algumas opções de código aberto compatíveis com Android. Infelizmente, essas alternativas ficaram estagnadas nos últimos anos, deixando os desenvolvedores a ver navios mais uma vez.

Esse é um grande inconveniente se você for um desenvolvedor de aplicativos que funcionem em Android e iOS e estiver buscando mensuração de atribuição e comportamento consistente.

Smart Banners personalizados: Journeys da Branch

Felizmente, existe uma solução: milhares de aplicativos usam Smart App Banners para iOS e Android com a ferramenta Journeys da Branch. Eles funcionam em todos os sistemas operacionais e navegadores para levar os usuários ao seu aplicativo ou à App Store, dependendo da situação.

Imagem mostrando diferentes configurações possíveis do Journeys da Branch de acordo com publicação, tamanho e estilo

Já se foi o tempo de se preocupar com a criação de um Smart App Banner para o site do seu aplicativo ou encontrar uma criador externo para smart banner. Com os banners inteligentes do Journeys da Branch, você obtém toda a funcionalidade do Smart App Banner para iOS da Apple, além de:

  • Direcionamento inteligente dinâmico. Se o aplicativo já estiver instalado, quando o usuário tocar no banner, o link abrirá o aplicativo. Se o aplicativo não estiver instalado, ele levará o usuário à página apropriada da App Store.
  • Suporte multiplataforma. Funciona em todos os navegadores e sistemas operacionais mobile. Crie uma única vez um smart banner para iOS ou Android e use-o em qualquer lugar.
  • Detecção de aplicativos instalados. Se o SDK da Branch já estiver instalado no seu aplicativo e o usuário já o tiver aberto pelo menos uma vez, será possível atualizar automaticamente o CTA de “Instalar” para “Abrir”, assim como na Apple – ou permitir que você personalize as respectivas mensagens de chamada à ação.
  • Segmentação de público personalizada. Personalize a aparência do Smart Banner e crie CTAs personalizados com base em comportamentos específicos dos usuários tanto no site quanto no aplicativo. Por exemplo, use um banner diferente para os usuários mais ativos.
  • Teste A/B. Sem alterar nenhum código em sua página, faça testes para otimizar sua segmentação público.
  • Localização. Entregue textos e designs personalizados de acordo com cidades, estados e países específicos.
  • Rastreamento de download. No dashboard da Branch, oferecemos ferramentas para análises avançadas para rastrear quantas pessoas visualizaram e clicaram no banner e quantas instalaram ou abriram o aplicativo. Isso ajuda a entender se uma página do site está tendo boa conversão e a otimizar seus esforços de crescimento.
  • Deep Linking. Você pode definir um dicionário de dados para o aplicativo para levar o usuário a um produto específico ou conteúdo dentro do aplicativo – esse é o conhecido direcionamento por deep link. A Branch oferece a melhor precisão de correspondência do setor, o que, na prática, significa que você recebe esses parâmetros de deep link já na primeira instalação feita na loja de aplicativos, a fim de personalizar o fluxo de onboarding para todos os usuários – recém-adquiridos ou reengajados.

Smart App Banner personalizável – layout, cor, conteúdo e ícones

Para funcionar como aparência nativa e parecer parte do seu site mobile, ou apenas para personalizar a experiência, o Journeys da Branch permite que você personalize totalmente todos os aspectos visuais do seu banner usando um editor gráfico ou editando diretamente o CSS. Isso inclui o título do aplicativo, descrição, botão de chamada à ação, estrelas de classificação e número de avaliações. Tudo é ajustável para se adequar ao design do seu site.

Captura de tela de uma interface do dashboard, onde é possível personalizar um banner do Journeys da Branch

Guia para configurar Smart App Banners do Journeys

É muito fácil começar a usar o Journeys da Branch. Você pode tanto seguir o passo a passo abaixo quanto solicitar uma demonstração da Branch para falar com um membro de nossa equipe.

Etapa 1: Crie sua conta na Branch e configure seu encaminhamento de link

Primeiro, acesse nosso dashboard e siga as instruções para criar sua conta gratuita. Você definirá todos os diferentes endpoints para que a Branch saiba para onde redirecionar o usuário em cada cenário.

Etapa 2: Adicione o Web SDK no seu site

Agora, recupere sua chave da Branch no dashboard em Configurações da conta > Perfil. Cole o trecho do código abaixo nas tags Javascript do seu site. Adicione a chave que você recuperou da página de configurações na seção ‘’key_live_YOUR_KEY_GOES_HERE’’.
<script>
// load Branch
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent logEvent disableTracking".split(" "), 0);
// init Branch
branch.init('key_live_YOUR_KEY_GOES_HERE');
</script>

Etapa 3: Configure o seu Smart App Banner do Journeys

Vá para a seção Journeys do dashboard da Branch e siga o assistente para configurar o Smart App Banner. Se você tiver menos de 10 mil usuários ativos mensais (MAUs), poderá ativar o Journeys gratuitamente. A documentação completa do Journeys encontra-se em nosso portal do desenvolvedor.

Etapa 4: Configure seu aplicativo iOS ou Android para o Deep Linking

Por fim, configure seu aplicativo nativo para direcionar por deep links adiados e instalar o rastreamento com muita facilidade, seguindo nossas instruções de integração para iOS ou Android.

Prontinho!

Veja nosso guia para obter mais ideias sobre como otimizar o Journeys para usuários de aplicativos ou leia sobre como rastrear downloads originados de banners inteligentes.

Solicite uma demonstração da Branch