Como Adicionar Facilmente Smart App Banners no WordPress

Muitos desenvolvedores de aplicativos nos perguntam: existe uma maneira de promover nossos aplicativos móveis diretamente do nosso 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 elegantes aparecem perfeitamente no topo do seu site quando visualizados em iPhones e iPads.

Eles não são irritantes como pop-ups – em vez disso, eles se misturam naturalmente ao seu site e dão aos visitantes um leve incentivo 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. Se você prefere um plugin ou quer adicionar um código simples, vamos guiá-lo por ambas as opções passo a passo.

Por que adicionar banners de aplicativos inteligentes no WordPress?

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 melhor experiência ao usuário. Você também pode mostrar 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 na parte superior 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 WordPress ocultará o banner automaticamente.

Por exemplo, a imagem a seguir mostra o mesmo site no navegador móvel Chrome.

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)
• Método 2: Usando Smart App Banner (Adicionar Banners a Páginas e Posts Específicos)
• Perguntas Frequentes Sobre a Adição de Banners de Aplicativos Inteligentes no WordPress

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

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

Com isso em mente, o WPCode é a escolha perfeita se você deseja promover um único aplicativo iOS. No entanto, se você quiser mostrar banners diferentes em páginas diferentes, recomendamos usar o método 2 em vez disso.

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 um equívoco 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, por favor, veja 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 esta informação, 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 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 ‘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 de aplicativos aparecerá em seu site WordPress.

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

A melhor maneira de testar o banner inteligente de aplicativos é visitando seu site em um dispositivo iOS usando o aplicativo móvel Safari. Na verdade, o banner inteligente de aplicativos 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 Ferramenta de Inspeção 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, acesse qualquer página ou postagem no 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 Smart App Banner (Adicionar Banners a Páginas e Posts Específicos)

Às vezes, você pode querer promover aplicativos apenas em páginas e postagens específicas.

Nesse caso, recomendamos o uso do plugin Smart App Banner. Este plugin permite que você exiba diferentes banners em diferentes páginas da web e inclua dados de afiliados nesses banners. Esses recursos o tornam um ótimo plugin para afiliados de marketing.

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

Após a ativação, você pode adicionar um banner de aplicativo a páginas ou posts específicos, à página inicial do WordPress ou a todo o seu site.

Para começar, vamos analisar as configurações do aplicativo. Aqui, você pode adicionar um banner a todas as páginas e posts ou adicionar um banner de aplicativo inteligente apenas a páginas de destino de alta conversão.

Para começar, vá para Configurações » Smart App Banner e digite o valor do aplicativo no campo 'ID do Aplicativo'.

Você pode obter essas informações seguindo o mesmo processo descrito no Método 1.

Se você está usando marketing de afiliados para ganhar dinheiro online com blogs, então você pode digitar seu token de afiliado no campo 'Dados do Afiliado'. As informações variarão, então você pode precisar fazer login no seu portal de afiliados ou falar com seus parceiros para obter o token correto.

Depois disso, você pode marcar a caixa ‘Mostrar em todas as páginas’ ou deixá-la desmarcada. Se você deixar a caixa desmarcada, o banner do aplicativo aparecerá apenas na sua página inicial.

Quando você estiver satisfeito com a configuração do banner, basta clicar no botão ‘Salvar Alterações’ para ativá-lo.

Você quer adicionar um banner de aplicativo inteligente a páginas e posts específicos em vez disso? Isso permite que você controle exatamente onde o banner aparece em seu site.

Por exemplo, se você é um profissional de marketing de afiliados, pode promover diferentes aplicativos em diferentes páginas e, em seguida, usar Google Analytics para ver quais banners geram mais conversões.

Para fazer isso, basta abrir a página ou post onde você deseja adicionar o banner. Agora, encontre a nova seção ‘Smart App Banner’ no editor de conteúdo do WordPress.

Aqui, basta adicionar o ID do aplicativo e informações opcionais de afiliado seguindo o mesmo processo descrito acima.

Quando você estiver satisfeito com as informações que inseriu, basta clicar em ‘Atualizar’ ou ‘Publicar’ para ativar suas alterações.

Em seguida, você pode simplesmente repetir essas etapas para adicionar um banner de aplicativo inteligente às suas outras landing pages.

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.

Esperamos que este tutorial tenha ajudado você a aprender como adicionar banners inteligentes de aplicativos no WordPress. Você também pode querer ver nosso guia sobre melhores práticas 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.