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.
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.
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:
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.
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.
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.