Aprenda o que é e como fazer para implementar o Smart Install Banner no seu site mobile e aumentar a taxa de download do seu app.

 

Smart Install Banner é uma poderosa ferramenta que trará tráfego para o seu app, incentivando o usuário a instalá-lo quando ele acessar o seu site por um dispositivo mobile.

Trata-se de um banner estilo pop-up que aparece no topo ou na parte inferior da página web com um link de direcionamento. O objetivo é fazer com que o usuário acesse a loja de aplicativos de forma fácil, aumentando a sua taxa de download do app.

Esse link pode ser tanto para baixar o app do site acessado inicialmente na loja de aplicativos (Google Play ou App Store) caso a pessoa não tenha o app já instalado em seu dispositivo. Caso já o tenha instalado, a pessoa será direcionada a navegar pelo app ao clicar no banner.

Vantagens do Smart Install Banner:

  • Não obstrui o conteúdo da página por ficar apenas no topo da página
  • Fácil de fechar, contribuindo para uma boa experiência do usuário.
  • Direcionamento direto para página de download do app via deep-link
  • Implementação fácil e rápida dos banners

Veja a seguir as diferentes implementações desse tipo de banner em cada um dos sistemas operacionais mobile.

Smart App Banners (iOS) – Implementação

O banner de instalação de app nativo no sistema iOS aparece no topo da tela, mostrando o nome do aplicativo, ícone, avaliação, botão de direcionamento e botão em X para fechar o banner.

Para aplicar o banner no seu site é muito simples. Basta incluir uma meta tag no head de cada página que você deseja que apareça o banner.

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

Os componentes dessa meta tag são os seguintes:

  • app-id (Obrigatório): substituir “myAppStoreID” pelo identificador único que é atribuído ao seu app pela App Store.
  • affiliate-data (Opcional): substituir “myAffiliateData” pelo código alfanumérico do programa iTunes Affiliate, caso tenha.
  • app-argument (Opcional): substituir “myURL” pela URL que tem o contexto de navegação do seu app nativo. Caso inclua esse atributo e o usuário já tenha o app instalado, ele será direcionado para o aplicativo na mesma página que estava no navegador web. Caso contrário, será direcionado para a App Store para baixar o aplicativo.

Uma consideração: como essa implementação exige que o usuário tenha acessado a página mais de uma vez em dias diferentes, testar o Smart Banner pode ser mais difícil. Uma coisa que pode ser feita é ativar o chrome://flags/#bypass-app-banner-engagement-checks do seu navegador Chrome. Essa configuração vai permitir fazer um bypass do pré-requisito de dois dias.

Native App Install Banner (Android) – Implementação 

Com o Chrome 44, o Google disponibilizou essa opção de abrir um banner de instalação do aplicativo nativo da marca, direcionando o usuário para a Google Play. As informações desse banner são as mesmas das do iOS.

Para implementar o smart app banner no Android, basta integrar um código um arquivo de manifesto de seu aplicativo web.

Antes de mais nada, é preciso qualificar os seguintes critérios:

  • seu site deve estar hospedado em um protocolo HTTPS
  • seu site deve conter um arquivo manifesto
  • o usuário deverá acessar pela segunda vez seu site em um período de até duas semanas para o banner aparecer.

Arquivo Manifesto

Um manifesto é um arquivo JSON que permite controlar como o seu aplicativo é inicializado. Para integrar ao seu site, é necessário adicionar uma link tag na página do seu site que aponte para o arquivo manifesto, da seguinte maneira:

<link rel="manifest" href="manifest.json">

Este é um exemplo de um manifesto:

{ "name": "Android - Mobile Application",

  "short_name": "Android",

  "icons": [{

    "src": "icons/launcher-icon-144x144.png",

    "sizes": "144x144",

    "type": "image/png"

  }],

  "prefer_related_applications": true,

  "related_applications": [{

    "platform": "play",

    "id": "com.google.android.mobileapplication"

  }],

  "start_url": "./index.html",

  "display": "standalone" }
  • O manifesto define como o seu app vai aparecer no sistema do usuário e como ele será lançado. É preciso ter um “short_name” e um ícone PNG “144×144”
  • Para integrar, deve-se adicionar “related_applications” array com os atributos: “plataform” e “id”, que será a Google Play e o ID do app, respectivamente.
  • Adicionar “prefer_related_applications”: true para sempre mostrar o banner do app nativo preferencialmente ao invés do banner do web app. Como mostrado abaixo:
"prefer_related_applications": true,
"related_applications": [
  {
    "platform": "play",
    "id": "com.google.samples.apps.iosched"
  }
],
  • Lembre-se de sempre verificar se o banner está ativo e funcionando corretamente.

Vale ressaltar que esses códigos podem sofrer alterações de acordo com as novas atualizações dos navegadores e plataformas. De qualquer forma, vamos sempre buscar manter esse artigo atualizado.

Fontes:

http://bit.ly/2zxf4N5
http://apple.co/2e4SHTm
http://bit.ly/2yR0u5N
http://bit.ly/2zszjOj