Como Adicionar Facilmente Smart App Banners no WordPress

Recebemos muitas perguntas de desenvolvedores de aplicativos: existe uma maneira de promover aplicativos móveis diretamente do seu site WordPress? A resposta é sim, e é mais fácil do que você imagina.

Uma das maneiras mais simples de fazer isso é com banners de aplicativos inteligentes. Esses banners aparecem no topo do seu site quando visualizados em iPhones e iPads, incentivando os visitantes a baixar ou abrir seu aplicativo. Você pode até mostrar banners para usuários Android usando o plugin certo.

Banners de aplicativos inteligentes não são irritantes como pop-ups. Em vez disso, eles se integram naturalmente ao seu site e dão um leve incentivo aos visitantes para baixar ou abrir seu aplicativo. O resultado? Mais downloads, melhor engajamento do usuário e uma experiência móvel mais profissional.

Testamos vários métodos para adicionar esses banners ao WordPress e encontramos duas abordagens que funcionam perfeitamente para qualquer nível de habilidade.

O primeiro usa um trecho de código simples para adicionar o banner nativo do iOS da Apple, enquanto o segundo usa um plugin que suporta dispositivos iOS e Android com personalização completa do design. Vamos guiá-lo por ambas as opções passo a passo.

Resumo Rápido TLDR: Banners de aplicativos inteligentes são banners nativos do iOS que aparecem no Safari, incentivando os visitantes a baixar ou abrir seu aplicativo. A maneira mais fácil de adicioná-los no WordPress é com um plugin gratuito chamado WPCode.

Se você também quiser mostrar banners para usuários Android, pode usar o plugin Mobile Smart App Banner, que suporta ambas as plataformas e permite personalizar totalmente o design do banner.

Por que adicionar banners de aplicativos inteligentes no WordPress?

Usar um banner de aplicativo inteligente em seu site WordPress pode ajudá-lo a obter mais downloads e compras do seu aplicativo móvel.

Muitos proprietários de sites criam um aplicativo móvel complementar onde os visitantes podem navegar em seu conteúdo de uma maneira otimizada para dispositivos móveis.

Como esses aplicativos são projetados para dispositivos móveis, eles geralmente oferecem uma experiência de usuário melhor. Você também pode exibir lembretes, conteúdo personalizado, ofertas, atualizações e muito mais usando notificações push móveis. Tudo isso significa mais engajamento, conversões e vendas.

Você pode incentivar usuários de iPhone e iPad a baixar seu aplicativo móvel usando um banner de aplicativo inteligente.

Este é um banner que aparece no topo da tela quando um usuário iOS visita seu site usando o navegador Safari.

Os visitantes podem clicar no banner para baixar seu aplicativo da App Store. Se o visitante já tiver seu aplicativo, o banner pedirá que ele abra o aplicativo em vez disso. Dessa forma, você pode obter mais downloads e engajamento do aplicativo.

Se o visitante estiver usando um dispositivo não Apple ou um navegador da web diferente, o banner nativo de aplicativo inteligente da Apple não aparecerá.

No entanto, como mostraremos no Método 2, você pode usar um plugin para exibir banners de download de aplicativos para usuários Android e visitantes que usam outros navegadores também.

Dito isso, vamos ver como você pode adicionar banners de aplicativos inteligentes no WordPress. Simplesmente use os links rápidos abaixo para pular direto para o método que você deseja usar:

Método 1: Usando WPCode (Mostrar um Banner de Aplicativo Inteligente em Todo o WordPress)

A maneira mais fácil de adicionar banners inteligentes de aplicativos ao seu site WordPress é usando o WPCode. Este plugin gratuito permite que você exiba o mesmo banner em todas as páginas e posts usando uma linha de código.

Ao adicionar código personalizado ao WordPress, alguns guias pedirão que você edite o arquivo functions.php do seu site. Não recomendamos isso, pois até mesmo um pequeno erro de digitação ou falha pode causar erros comuns do WordPress ou até mesmo tornar seu site inacessível.

Usando o WPCode, você pode adicionar código personalizado aos arquivos do seu tema WordPress sem nenhum risco. Você também pode ativar e desativar trechos de código com o clique de um botão.

Primeiro, você precisa instalar e ativar o plugin gratuito WPCode. Para mais instruções, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.

Após a ativação, vá para Trechos de Código » Adicionar Trecho. Em seguida, clique no botão ‘+ Adicionar Trecho Personalizado’ sob a opção ‘Adicionar Seu Código Personalizado (Novo Trecho)’.

Em seguida, você precisa selecionar ‘Trecho de HTML’ como o tipo de código na lista de opções que aparecem na tela.

Isso o levará para a página ‘Criar Snippet Personalizado’, onde você pode digitar um nome para o snippet de código.

Isso é apenas para sua referência, então você pode usar o que quiser.

Para a próxima etapa, você precisará saber o ID do seu aplicativo.

Para obter essas informações, abra uma nova aba no navegador e acesse a página Ferramentas de Marketing de Serviços da Apple. Aqui, digite o nome do aplicativo que você deseja promover e clique no ícone 'Pesquisar'.

Para ver todos os aplicativos iOS que correspondem ao seu termo de pesquisa, basta rolar até a seção ‘Apps’.

Aqui, encontre o aplicativo que você deseja promover e clique nele.

Na parte inferior da tela, você verá um ‘Link de Conteúdo’.

O ID do aplicativo é o valor entre id e ?. Você precisará desta informação na próxima etapa, portanto, deixe esta aba aberta ou anote o ID do aplicativo.

Agora que você tem o ID do aplicativo, volte para o painel do WordPress.

Você pode agora adicionar o seguinte trecho ao editor de código, substituindo o ID do aplicativo pelas informações que você obteve na etapa anterior:

<meta name="apple-itunes-app" content="app-id=12345678">

Com isso feito, role até a caixa de ‘Inserção’.

Se ainda não estiver selecionado, clique em ‘Inserção Automática’ e, em seguida, selecione ‘Cabeçalho do Site Inteiro’ no menu suspenso.

Quando estiver pronto, role até o topo da página e alterne o interruptor ‘Inativo’ para ‘Ativo’.

Finalmente, basta clicar no botão ‘Salvar Trecho’ para armazenar suas alterações.

Agora, o banner inteligente do aplicativo aparecerá no seu site WordPress.

Como Mostrar Banners Diferentes em Páginas e Posts Específicos

Como você viu, é fácil adicionar um banner inteligente ao WordPress usando o WPCode.

Mas e se você quiser promover aplicativos diferentes em páginas diferentes?

Por exemplo, talvez você tenha um blog de estilo de vida e um aplicativo de receitas que deseja promover em seus posts relacionados a comida. Ao mesmo tempo, você pode ter um aplicativo de fitness que deseja promover em suas páginas de treino.

Nesse caso, recomendamos a atualização para o WPCode Premium (a partir de US$ 49/ano). Este plugin possui lógica condicional inteligente que permite controlar exatamente onde cada trecho de código é executado. Isso significa que você pode criar vários banners de aplicativos inteligentes e exibi-los em qualquer página ou postagem. 

Primeiro, acesse o site do WPCode e compre uma assinatura. Você pode então instalá-lo, como qualquer outro plugin do WordPress.

Depois disso, vá para WPCode » Configurações no seu painel do WordPress e insira sua chave de licença.

Você pode encontrar essas informações fazendo login na sua conta no site do WPCode, ou verificando o e-mail de confirmação de compra que recebeu ao adquirir o WPCode. 

Com isso feito, vá para Trechos de Código » Adicionar Trecho no seu painel do WordPress. Aqui, passe o mouse sobre a seção ‘Adicionar seu código personalizado’.

Quando aparecer, selecione ‘Adicionar Trecho Personalizado’.

No painel seguinte, clique em ‘Trecho de HTML’.

Em seguida, dê um nome descritivo ao seu trecho para que você possa identificar facilmente qual aplicativo ele promove.

Por exemplo, você pode nomeá-lo como ‘Banner de Aplicativo Inteligente – Aplicativo de Receitas’.

No Editor de Código, adicione a meta tag para seu primeiro aplicativo.

Certifique-se de substituir o ID do aplicativo pelo correto para sua aplicação:

<meta name="apple-itunes-app" content="app-id=YOUR_FIRST_APP_ID">

Em seguida, role até a seção ‘Inserção’ e selecione ‘Inserir Automaticamente’, se ainda não estiver selecionado.

Depois disso, abra o menu suspenso ‘Localização’ e selecione ‘Cabeçalho do Site Inteiro’.

Em seguida, role um pouco mais para baixo até a seção ‘Lógica Condicional Inteligente’. 

Aqui, clique para ativar a configuração ‘Habilitar Lógica’.

Agora é hora de criar sua regra de lógica condicional inteligente.

Para começar, abra o menu suspenso ‘Condições’ e selecione ‘Mostrar’. Em seguida, clique em ‘Adicionar novo grupo’.

Depois disso, clique no primeiro menu suspenso (que mostra ‘Logado’ por padrão).

Isso adiciona uma seção totalmente nova.

No menu do lado esquerdo, selecione ‘Onde’.

Em seguida, escolha ‘Postagem/Página’.

Com isso feito, clique no segundo menu suspenso e escolha ‘É um de’, se ainda não estiver selecionado.

Finalmente, clique no terceiro campo e pesquise a página ou postagem específica onde você deseja exibir este banner do aplicativo.

Você deseja mostrar este banner em várias páginas ou postagens? Então, simplesmente clique em ‘Adicionar novo grupo’.

Agora você pode repetir essas etapas para selecionar postagens ou páginas adicionais.

Quando estiver satisfeito com a configuração deste trecho, role até o topo da página e mude o interruptor ‘Inativo’ para ‘Ativo’. Finalmente, clique no botão ‘Salvar Trecho’ para armazenar suas alterações.

Agora, repita este processo para cada aplicativo adicional que você deseja promover. 

O WPCode agora mostrará o banner de aplicativo inteligente correto com base na página ou postagem que o visitante está visualizando no momento.

Como Testar o Código do Banner Inteligente de Aplicativos no WordPress

A melhor maneira de testar o banner inteligente do aplicativo é visitando seu site em um dispositivo iOS usando o aplicativo móvel Safari. Na verdade, o banner inteligente do aplicativo nem aparecerá se você tentar visualizar a versão móvel do seu site WordPress a partir do desktop.

Se você precisar verificar rapidamente se o trecho de código está funcionando, uma solução alternativa é usar a ferramenta Inspetor do seu navegador. Ela permite que você veja se o código <meta name> foi inserido na seção <head> do seu site, o que sugere que está funcionando como esperado.

Para fazer isso, vá para qualquer página ou postagem em seu blog WordPress. Em seguida, clique com o botão direito em qualquer lugar da página e selecione 'Inspecionar'.

Um novo painel será aberto, mostrando todo o código do site.

Simplesmente encontre a seção <head> e clique em sua seta para expandir.

Agora, procure o código <meta name="apple-itunes-app"> que você adicionou na etapa anterior.

Se você vir este código, o banner do aplicativo inteligente deverá aparecer em dispositivos iOS.

Método 2: Usando o Mobile Smart App Banner (Adicionar Banners para iOS e Android)

Se você deseja um plugin que suporte usuários de iOS e Android, recomendamos o uso do plugin Mobile Smart App Banner.

É um plugin gratuito que detecta automaticamente o dispositivo do visitante e mostra o link apropriado da loja de aplicativos. 

O banner inclui um botão 'Fechar' integrado para que os visitantes possam dispensá-lo, e usa cookies para lembrar essa decisão.

Lembre-se de que o banner não aparecerá por 7 dias após ser dispensado.

Primeiro, você precisará instalar e ativar o plugin Mobile Smart App Banner. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, vá para Configurações » Mobile Smart App Banner no seu painel do WordPress.

Aqui, marque a caixa ao lado da opção 'Ativar App Banner' para ativar o banner em seu site. 

Com isso feito, clique no botão 'Upload'.

Em seguida, selecione a imagem que deseja usar como ícone do seu aplicativo (recomendamos usar uma imagem de 512x512px).

Você também pode escolher onde o banner aparece na tela abrindo o menu suspenso 'Posição do Banner' e escolhendo uma opção na lista.

Descobrimos que colocar o banner na parte inferior da tela é menos intrusivo e pode levar a um maior engajamento.

Depois disso, você pode digitar o nome do seu aplicativo no campo 'Nome do App' e inserir uma breve descrição na caixa 'Subtítulo do App'. 

Em seguida, adicione seu Link da App Store e Link da Play Store nos campos corretos.

Se você quiser mudar a aparência do banner, basta rolar até a seção 'Configurações de Cor'. 

Aqui, você pode alterar a cor de fundo, a cor do botão, a cor do texto do botão e muito mais, usando as várias configurações.

Há também uma pré-visualização em tempo real, para que você possa experimentar facilmente várias configurações para ver o que fica melhor. 

Alternativamente, você pode usar o banner nativo de aplicativo inteligente da Apple no Safari, desmarcando a caixa ao lado de 'Ativar Banner de Aplicativo Inteligente do iOS'.

Você precisará inserir seu ID da App Store, que pode ser encontrado usando o mesmo processo descrito no Método 1. 

Quando isso estiver ativado, os usuários do Safari verão o banner nativo da Apple, enquanto os usuários do Chrome, Firefox e outros navegadores iOS verão seu banner personalizado.

Com isso feito, role até o final da tela e clique em 'Salvar Alterações' para tornar seu banner ativo.

Perguntas Frequentes Sobre a Adição de Banners de Aplicativos Inteligentes no WordPress

Se você ainda tiver dúvidas, aqui estão nossas principais FAQs sobre como adicionar banners inteligentes ao seu site WordPress.

O que é um banner de aplicativo inteligente?

Banners de aplicativos inteligentes aparecem no topo do navegador Safari e oferecem aos usuários do aplicativo a opção de abrir um aplicativo ou baixá-lo da Apple App Store.

Como foram criados pela Apple, os banners de aplicativos inteligentes têm um design consistente que muitos usuários de iOS reconhecem. Eles aparecem apenas para pessoas que usam iPhones e iPads com iOS 6 ou superior.

Por que não consigo ver meu banner de aplicativo inteligente no desktop?

O banner inteligente de aplicativos não aparecerá em computadores desktop, mesmo que você visualize a versão móvel do seu site.

Para ver o banner em ação, você precisará visitar seu site em um iPhone ou iPad usando o aplicativo móvel Safari.

Por que não consigo ver o banner inteligente de aplicativos no meu iPhone ou iPad?

Os banners inteligentes de aplicativos só aparecem em dispositivos com iOS 6 ou superior quando você está usando o aplicativo móvel Safari. Se você não vir o banner inteligente de aplicativos, comece verificando se você tem as versões mais recentes do iOS e do aplicativo móvel Safari.

O banner inteligente de aplicativos também detecta se o dispositivo pode suportar o aplicativo e se o aplicativo está disponível em sua localização. Se você não vir o banner inteligente de aplicativos, é possível que seu dispositivo não tenha passado em uma dessas verificações.

Por que o banner inteligente de aplicativos desapareceu no Safari?

Se você dispensar o banner clicando no botão 'x', ele não aparecerá novamente por padrão.

Dependendo do seu dispositivo móvel, você pode precisar abrir uma aba de navegador privada, limpar seu cache ou cookies, ou realizar alguma outra ação para redefinir suas configurações.

Banners de aplicativos inteligentes funcionam em dispositivos Android?

Não, os banners nativos de aplicativos inteligentes da Apple são exclusivos para dispositivos iOS que usam o navegador Safari. O Android não possui um equivalente integrado.

No entanto, você pode usar um plugin do WordPress como o Mobile Smart App Banner para exibir banners personalizados de download de aplicativos para visitantes do Android.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar banners de aplicativos inteligentes no WordPress. Você também pode consultar nosso guia sobre práticas recomendadas de call-to-action ou nossas escolhas especializadas para as melhores ferramentas de lead magnet do WordPress para impulsionar conversões.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.