JourneysWeb App

Como Configurar Um iOS e Android Smart App Banner

By setembro 11, 2017 No Comments

Já se sabe que os usuários preferem aplicativos móveis nativos a sites móveis. No entanto, fazer deep linking para e de aplicativos não é tão robusto quanto deveria comparado à web, então os sites móveis ainda são parte dominante do uso de telefones celulares, principalmente para a descoberta de novos aplicativos.

Por exemplo, imagine se um usuário existente compartilhar um artigo de seu aplicativo no Facebook e um número de novos visitantes clicarem nesse artigo. Se eles forem levados à página apropriada da App Store em vez de o artigo ser exibido, haverá muitas pessoas nervosas que simplesmente fecharão a loja e voltarão para o Facebook. É aí que pode entrar um site móvel com o Banner Inteligente de Aplicativos.

O que é um banner inteligente de aplicativos?

Um banner inteligente móvel, usa uma fração da tela em um site móvel para informar e incentivar os usuários a abrirem o aplicativo nativo ou instalá-lo, caso não o tenham. É um link inteligente que inclui toda a lógica de roteamento para abrir o aplicativo automaticamente quando estiver instalado ou ir para a página da App Store se não estiver.

Smart App Banner Example

Como você pode ver, o conteúdo ainda está disponível nessa página do site móvel sem o aplicativo, mas o banner no topo da página apresenta uma opção de baixar ou abrir o aplicativo de acordo com a escolha do usuário. Para os novos usuários, exibir um site móvel com um banner fornece um modelo claro e sem obstáculos de onboarding, onde eles podem interagir com seu site móvel e se converterem em usuários integrais do aplicativo quando estiverem prontos.

O que o banner inteligente de aplicativo do iOS da Apple faz?

No iOS 6, a Apple lançou um banner inteligente de aplicativo completamente integrado no Safari. A aparência dele evoluiu desde então para o que vemos abaixo, mas ainda funciona da mesma maneira.

Smart app banner on iOS

Esse banner tem dois resultados diferentes ao clicar nele. Se o aplicativo estiver instalado, o banner o abrirá chamando seu esquema URI com parâmetros de deep link que o acompanham. Se o aplicativo não estiver instalado, o banner levará o usuário à página de sua App Store.

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

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

Ele também vem com algumas limitações significativas:

  1. Só funciona no Safari do iOS.
  2. O layout, a cor e o conteúdo não podem ser alterados
  3. Sem rastreamento de clique e download
  4. Deep linking (levar os usuários a conteúdo específico) só funciona se o aplicativo estiver instalado.

Há um banner inteligente de aplicativo para Android?

Por conta da fragmentação do ecossistema Android e escolha de navegador, o Google nunca lançou um banner inteligente para Android. Todos os desenvolvedores de Android tiveram que implementar seu próprio banner ou adaptar uma solução pré-existente. Isso é um grande problema se você é desenvolvedor para dispositivos móveis que criou tanto para Android quando para iOS e deseja comportamento consistente e medição de atribuição.
A introdução da Apple do banner inteligente para iOS gerou o desenvolvimento de algumas opções de terceiros diferentes com compatibilidade para Android. Infelizmente, o progresso nessas alternativas está sendo lento nos últimos anos, deixando os desenvolvedores sem sorte mais uma vez. Aqui estão alguns dos exemplos mais populares:

  1. Plugin de banner inteligente de aplicativo para jQqueryhttps://github.com/jasny/jquery.smartbanner (não é mais mantido)
  2. Banner inteligente de aplicativo sem requisito de jQueryhttps://github.com/kudago/smart-app-banner

O banner inteligente de aplicativo de plataforma cruzada da Branch

Milhares de aplicativos usam a Branch diariamente para conectar seus aplicativos, usando tanto links diretamente gerados dos SDKs nativos para iOS/Android quanto links criados manualmente no dashboard da Branch. Esses links funcionam em todos os sistemas operacionais e navegadores para fornecer usuários ao seu aplicativo ou à App Store, dependendo da situação.

Tirando proveito dessa especialidade, criamos um banner inteligente de aplicativos completamente personalizável, que pode ser usado em diversas plataformas, rastreável e com deep linking. Ele funciona em todos os navegadores, incluindo Safari, Chrome, Firefox e navegadores padrão para Android.

Exemplo de banner da Branch no iOS:

smartbanner-blog3-cut_1.png

Exemplo de banner da Branch na área de trabalho:

desktop_banner1.png

Usando um banner de aplicativo inteligente da Branch, você obtém toda a funcionalidade do banner inteligente de aplicativo do iOS da Apple, além desses recursos incríveis:

  1. Roteamento inteligente ou App Store apropriada.

Quando tocarem no banner e o aplicativo estiver instalado, ele abrirá o aplicativo. Caso o aplicativo não esteja instalado, ele levará o usuário à página apropriada da App Store.

  1. Suporte em todas as plataformas

Funciona em todos os navegadores móveis e sistemas operacionais móveis. Crie facilmente um banner inteligente para iOS ou Android uma vez e utilize-o em todos os lugares.

  1. Detecção de aplicativo instalado

Caso tenha o SDK da Branch em seu aplicativo e o usuário o tenha aberto pelo menos uma vez, nós podemos atualizar automaticamente a chamada para ação de Instalar para Abrir, assim como a Apple, ou permitir que você personalize as mensagens para as respectivas chamadas para ação.

  1. Público-alvo personalizado

Personalize o banner inteligente para parecer com a chamada para ação, com base em comportamentos específicos de seus usuários tanto na web móvel quanto em seu aplicativo. Por exemplo, use um banner diferente para seus usuários mais ativos.

  1. Teste A/B

Sem alterar qualquer código em sua página, faça experimentos para identificar o público ideal do banner inteligente de maneira direcionada e criativa para incentivar a maior conversão de novas instalações do aplicativo, bem como reaberturas do aplicativo.

  1. Rastreamento de download

No dashboard da Branch, fornecemos análises ricas para rastrear quantas pessoas visualizaram e clicaram no banner e quantas instalaram ou abriram o aplicativo. Isso pode dizer o quanto a página da web está convertendo e ajudando a otimizar seus esforços de crescimento.

  1. Deep linking

Você pode especificar um dicionário de dados que deseja passar para o aplicativo, para que você possa levar o usuário a um produto específico ou parte do conteúdo dentro do aplicativo também conhecido como deep linking. A precisão de correspondência líder do setor da Branch significa que você até mesmo recebe esses parâmetros de deep link na primeira instalação da App Store para personalizar o fluxo de onboarding para todos os usuários recém adquiridos ou reintegrados.

  1. Banner inteligente de aplicativo personalizado Layout criativo, cor, conteúdo e ícones

Para oferecer suporte a uma aparência nativa ao seu site móvel ou apenas personalizar a experiência, o Branch Journeys permite que você personalize completamente todos os aspectos visuais de seu banner usando um editor gráfico ou edite diretamente o CSS. Isso inclui o título do aplicativo, descrição, botão para a chamada para 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 o banner inteligente de aplicativo universal com o Journeys

A Branch também oferece o Journeys, uma solução premium que permite criar e implementar sem código ativos de web para aplicativos, como os banners inteligentes. Com o Journeys, as marcas podem:

  1. Criar um número ilimitado de públicos potenciais com base na atividade na web e no aplicativo, site indicador, sistema operacional e mais.
  2. Escolher entre um número de modelos pré-criados e ter controle total sobre o layout e design de seus ativos.
  3. Ver o desempenho em tempo real, segmentado pelo Journey. Atribuir ações embutidas para o Journey. Implementar melhorias sem modificar o código.

Guia para configurar o banner inteligente de aplicativo universal

É muito fácil começar com o Journeys, o banner inteligente de aplicativos da Branch. Aqui está um guia passo a passo.

 

Etapa 1: Configure o roteamento de seu link

Primeiro, vá em https://start.branch.io e siga as instruções. Você definirá todos os endpoints diferentes para que a Branch saiba onde redirecionar o usuário em todos os cenários.

Etapa 2: Adicione o SDK Web ao seu site

Depois, obtenha a chave Branch do painel em https://dashboard.branch.io/#/settingsCole o trecho do código abaixo em tags de Javascript do seu site. Adicione a chave que você obteve na página de configurações na seção SUA-CHAVE-BRANCH.

<script type="text/javascript">
  (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 banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode".split(" "), 0);
 	branch.init('YOUR-BRANCH-KEY');
</script>

 

Etapa 3: Configure seu banner inteligente de aplicativos Journeys

Acesse a seção Journeys do painel da Branch e siga o tutorial para configurar o banner inteligente de aplicativos. Você também pode encontrar a documentação completa do Journey em nosso portal de desenvolvedor.

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

Por fim, você pode facilmente configurar seu aplicativo nativo para um deep linking diferido e instalar o rastreamento seguindo as instruções de integração localizadas neste site para iOS ou Android.

Tudo pronto!