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
Comentários