Smart Banners—web-to-app mobile (para profissionais de marketing)

Prepare seu site mobile para a exibição de Smart Banners pela primeira vez

1. No painel da AppsFlyer, acesse Experiências e deep linking > Web-to-App >Smart Banners> Acesse Smart Banners.
2. Clique em Começar. O assistente de configuração guiará você pelas etapas necessárias (a seguir). Para configurar outros locais de trabalho do site, veja abaixo
3. Insira um nome de workplace do site.
4. Clique em Criar.
   O workplace do site vai abrir. 
5. Copie trecho do código do banner. 
6. Implemente o trecho de código em seu site. Essa tarefa é feita apenas uma vez por site.
   • Para adicionar o código ao seu site via Google Tag Manager, Adobe Tag Manager, Shopify, Wix, Squarespace ou WordPress, consulte Implementação do código do site aos Smart Banners para profissionais de marketing.
   • Para adicionar o código por meio de outras plataformas ou fazer alterações no código de acordo com as suas necessidades (incluindo a adição de parâmetros, deep linking, ocultação do banner ou integração do PBA com Smart Banners), consulte Implementação do código do site aos Smart Banners para desenvolvedores.
7. [opcional] Copiar chave da Web. (Essa chave já existe como parte do trecho de código.)
8. Clique em Continuar.

Para criar workplaces do site após a primeira vez

1. No painel da AppsFlyer, acesse Experiências e deep linking > Web-to-App > Smart Banners > Studio.
2. Clique no menu de opções 
3. selecione Novo workplace do site
4. Insira um nome de workplace do site.
5. Clique em Criar.
   O workplace do site vai abrir. 
6. Copie trecho do código do banner. 
7. Implemente o trecho de código em seu site. Essa tarefa é feita apenas uma vez por site.
   • Para adicionar o código ao seu site via Google Tag Manager, Adobe Tag Manager, Shopify, Wix, Squarespace ou WordPress, consulte Implementação do código do site aos Smart Banners para profissionais de marketing.
   • Para adicionar o código por meio de outras plataformas ou fazer alterações no código de acordo com as suas necessidades (incluindo a adição de parâmetros, deep linking, ocultação do banner ou integração do PBA com Smart Banners), consulte Implementação do código do site aos Smart Banners para desenvolvedores.
8. [opcional] Copiar chave da Web. (Essa chave já existe como parte do trecho de código.)
9. Clique em Continuar.

Os grupos de banners contêm um ou mais banners. Aqui você pode:

• Selecionar o template do OneLink usado pelo grupo de banners, que contém os aplicativos mobile para os quais os visitantes do site serão redirecionados.
• Defina um esquema específico de deep linking
• Definir suas regras de segmentação, cronograma, comportamento e detalhes de atribuição usados por todos os banners do grupo de banners.
• Definir quais páginas ativam os banners do grupo de banners quando visitadas.

Para configurar ou duplicar um grupo de banners:

1. No dashboard da AppsFlyer, acesse Experiências e deep linking> Web-to-app >Smart Banners.
2. Para configurar um grupo de banners pela primeira vez
   1. No lado esquerdo, clique em adicionar grupo de banners.
   2. Siga o 5º passo e os passos seguintes.
3. Para configurar grupos de banners adicionais
   1. Acesse a aba Studio.
   2. Clique em + Novo.
   3. Siga o 5º passo e os passos seguintes.
4. Para duplicar um grupo de banners
   1. Clique no ícone Duplicar localizado ao lado do ícone de deletar.
5. Insira um nome exclusivo para o grupo de banners. O nome deve representar um tema comum geral entre os banners a serem definidos para o grupo do banner (por exemplo, o aplicativo anunciado).
6. Selecione o template do OneLink para o grupo de banners.
7. [opcional] Defina um esquema URI para o grupo de banners como um fallback para usuários de Universal Links e de Android App Links. Isso raramente é necessário, pois o valor é obtido do template do OneLink por padrão. Apenas faça essa configuração para o grupo de banners caso seja necessário um valor diferente do que está definido no template.
8. Defina as fontes atribuídas primárias e de fallback a serem atribuídas com novas instalações provenientes desse grupo de banners. Use a tabela a seguir para escolher a melhor opção para o link personalizado.
   
   

   Opção	Quando selecionar	Comentários
   Usar parâmetros UTM	Selecione quando a maioria dos visitantes não-orgânicos chegam ao site mobile a partir de fontes com parâmetros UTM.	◦ Nome da fonte de mídia (pid) = UTM_Source ◦ Campanha (c) = UTM_campaign ◦ Se UTM_source ou UTM_campaign estiverem faltando, os nomes estáticos serão usados como substituto.
   Usar parâmetros do link de atribuição recebido	Selecione quando a maioria dos visitantes não-orgânicos chegam ao site mobile a partir de cliques em ad networks que usam links de atribuição da AppsFlyer.	◦ Todos os parâmetros disponíveis do link de atribuição de entrada da AppsFlyer são adicionados ao link do Smart Banner.  ◦ Se existir um parâmetro no link de atribuição de entrada da AppsFlyer e no Smart Banner, o parâmetro de entrada terá precedência no link personalizado final.
   Adicionar outro parâmetro de atribuição	Se desejar, adicione dados adicionais de atribuição relacionados ao site. Isso permite a análise granular de cada instalação.	Por exemplo, para sites de eCommerce, crie links personalizados idênticos para cada tipo de categoria de produto, que diferem por valores af_adset (por exemplo: "af_adset=fruit")
   Usar parâmetros de atribuição padrão	◦ Selecione quando a maioria dos visitantes do site mobile é orgânica. ▪ Visitantes não-orgânicos não chegam ao site a partir de cliques em ad networks ou de fontes com parâmetros UTM. ◦ Você pode personalizar os valores dos parâmetros.	Importante: a prática recomendada é selecionar a UTM ou parâmetros de link de atribuição de entrada, uma vez que os parâmetros de atribuição padrão do Smart Banner são usados de qualquer maneira no link personalizado como um fallback, caso a fonte de mídia, a campanha ou os nomes dos canais não estiverem disponíveis.

9. [Recomendado] Defina o parâmetro de atribuição padrão Nome do canal para atribuir todas as instalações provenientes do Smart Banner para o canal especificado. Isso permite que você agregue informações de várias fontes de mídia no mesmo canal no relatório de coorte, painel de visão geral, relatório de retenção e mais. 
10. [Opcional] Ative Retargeting se você planeja usar o grupo de banners para registrar reengajamentos realizados por usuários que clicam no banner. Para saber mais sobre Retargeting, consulte o guia de atribuição de Retargeting.

    Importante

    Para que o retargeting funcione, você também precisa:

    • Ativar o retargeting para o aplicativo 

    Os usuários existentes que clicam em links sem redirecionamento (UA) com tecnologia do OneLink também iniciam o aplicativo e têm a mesma experiência de usuário. No entanto, seus reengajamentos são registrados como sessões regulares, o que significa que é impossível medir o sucesso da campanha de mídia própria.

11.  [Opcional] Ative Ignorar usuários ativos para retargeting e selecione a janela de inatividade. Isto adiciona o parâmetro af_inactivity_window=[número de dias] ao seu link, e todos os usuários ativos durante o período são ignorados para retargeting.
12. Defina a janela de reengajamento para determinar o período após o reengajamento, onde os eventos in-app do usuário são atribuídos à fonte de mídia de retargeting.
    • Você pode definir o valor em dias (1 a 90), horas (até 23) ou até mesmo por tempo vitalício.
    • A janela de reengajamento é adicionada ao link no parâmetro af_reengagement_window.
13. [Opcional] Defina o comportamento de rejeição, ou seja, o tempo mínimo permitido entre a rejeição de um banner no grupo feita por um usuário, até que o mesmo banner possa ser exibido novamente para o usuário. Selecione uma das seguintes opções:
    • Por hora: 1 hora, 1 dia ou 1 semana.
    • Próxima sessão: significa a sessão que ocorre em uma guia ou janela diferente, depois que o usuário fecha o banner.
    • Nunca: o banner não é mostrado novamente. Observação:
      • Se o usuário limpar o cache do navegador ou visualizar o site no modo de navegação privada, a configuração do Comportamento de Rejeição será perdida.
      • O comportamento de rejeição é aplicado ao banner que o usuário descarta. Outros banners no grupo de banners ainda podem ser exibidos.
14. [Opcional] Defina o limite de frequência. 
    O limite de frequência determina o número de vezes que cada banner em um grupo de banners é exibido para um único usuário. Você pode escolher Sem limite (em que os banners sempre são exibidos) ou Limitar a exibição dos banners.
    

    Por exemplo, se um grupo de banners consistir em três banners e o limite de frequência for definido como um, cada banner no grupo aparecerá uma vez por usuário. Nesse cenário, após três visitas, o usuário terá visualizado os três banners do grupo. No entanto, a partir da quarta visita, o usuário não encontrará mais nenhum banner do grupo. Quando o limite de frequência é definido como dois, cada banner do grupo será exibido duas vezes por usuário, exigindo um total de seis visitas para atingir o limite do grupo.

15. [Opcional] Defina em qual sistema operacional você deseja mostrar os banners:
    • Todos os sistemas operacionais mobile.
    • Apenas Android ou apenas iOS.
16. [Opcional] Agende a ativação do grupo de banners: inicie imediatamente (padrão) ou defina uma campanha com tempo limitado.
17. [Opcional] Defina Locais para os quais o grupo de banners ficará ativado.
    1. Selecione Global para exibir esse grupo de banners a todos os usuários. Se necessário, exclua visitantes provenientes de diferentes regiões, países ou estados.
    2. Selecione a opção escolher localização específica para exibir esse grupo de banners para usuários de um ou mais locais específicos.
18. [Opcional] Defina Exibir nas páginas, ou seja, em quais páginas o grupo de banners pode ser exibido aos visitantes:
    • [Padrão] Exibir em todas as páginas do site. Observação: recomendamos que você defina pelo menos um grupo de banners para todas as páginas como um fallback.
    • Mostrar em páginas específicas: especifique o que a página ou URL deve conter para exibir banners.
      • Você pode escolher:
        • Página específica: especifique o host e/ou caminho da página na qual quer exibir o banner. Quaisquer consultas (query) inseridas serão ignoradas. Exemplo: http://www.example.com/path?query
        • Path e query do URL: insira o caminho (path) e/ou o query que determina se o banner éa exibido ou não. Exemplo: path?query. Observação: não insira um URL inteiro, como http://www.example.com/path?query. Insira apenas o caminho e/ou a consulta.
      • Até 15 condições podem ser adicionadas usando e/ou.
      • Se houver um conflito entre as condições, o banner não será exibido.
19. Clique em criar grupo de banners.
20. [Opcional] Para editar novamente o grupo de banners, passe o mouse sobre  direcionamento e comportamento e clique em editar.

Direcionamento e comportamento

O painel de targeting e comportamento mostra as configurações definidas para esse grupo de banners. Para editar essas configurações, clique no ícone de edição.

Para criar um banner em um grupo de banners:

1. Clique em Novo banner para entrar  na página Editar banners.
2. Configure o Nome do banner.
3. Crie um Criativo de design:
   1. Clique em Criativo de design para configurar o criativo do banner.
      

      Uma janela para escolher um template de banner é aberta.
      

      
   2. Passe o mouse sobre Template de criativo e clique em Criar para acessar a página de configuração de Montar criativo.
   3. Personalize todos os elementos do criativo do Smart Banner. Para fazer isso, selecione os elementos por nome ou clique em cada um na imagem de pré-visualização.Observação: nem todos os elementos estão disponíveis em todos os templates.
      • Título
      • Descrição
      • Estrelas de classificação
      • Botão Fechar
      • Chamada para ação
      • Logotipo do aplicativo
      • Fundo
      • Posição do banner
      • Preenchimento de banner (para ajustar o tamanho do banner)
      • Transparência do dispositivo
      • Para imagens, use um dos seguintes tipos de arquivo: jpeg, jpg, png. Observação: o formato webp não é compatível.  As recomendações para as imagens são:
        
        

        Tipo de template	Tamanho máximo do arquivo de imagem	Proporção da imagem	Altura da imagem	Largura da imagem
        Mínimo	300 KB	3:1 (largura x altura)	70 px	Ajustado para se adequar ao dispositivo
        Padrão	300 KB	3:1 (largura x altura)	70 px	Ajustado para se adequar ao dispositivo
        Aprimorado	300 KB	9:4 (largura x altura)	110 px	Ajustado para se adequar ao dispositivo
        Múltipla escolha	300 KB	9:4 (largura x altura)	110 px	Ajustado para se adequar ao dispositivo
        Promocional	300 KB	4:5 (largura x altura)	300 px	Ajustado para se adequar ao dispositivo
        Sobreposição de múltipla escolha	300 KB	9:4 (largura x altura)	110 px	Ajustado para se adequar ao dispositivo
        Intersticial	700 KB	9:16 (largura x altura)	Ajustado para se adequar ao dispositivo	Ajustado para se adequar ao dispositivo

   4. Clique em Revisar para revisar o criativo do banner e testar sua aparência em diferentes dispositivos.
      Observação: os banners podem aparecer um pouco diferentes nas campanhas ativas em comparação com as imagens de visualização.
   5. Se forem necessárias alterações, clique em Voltar ao editor.
   6. Clique em Concluído para voltar à página de configuração do banner.
4. [Opcional] Adicione parâmetros de atribuição personalizados. Por exemplo, ad_adset e af_ad.
   Observação: os parâmetros pid, c, e canal não podem ser adicionados no nível do banner, pois pertencem ao nível do grupo de banner.
5. Depois de terminar e salvar o novo criativo, o status do banner se torna ativo. Use o botão Status para alternar entre os status Ativo e Pausado. 
6. Clique em Salvar para salvar seu trabalho ou Salvar e fechar para salvar seu trabalho e fechar a página de configuração do banner.

Quando o criativo estiver pronto, é hora de testá-lo  antes de publicá-lo e ativá-lo para seus usuários.

Para testar um criativo do Smart Banner:

Pré-requisito: certifique-se de que o trecho de código do Smart Banner esteja integrado ao seu site.

1. Na página Testar criativo, insira o link para sua página web em que o SDK do Smart Banner está integrado (consulte Smart Banners para desenvolvedores).
2. Clique em Gerar.
3. Copie o link gerado e envie-o para o dispositivo de teste ou digitalize o código QR com o dispositivo de teste. O link ou QR deve redirecionar você para o site e exibir um banner com o criativo.
4. Clique em Editar criativo para retornar à configuração do criativo ou clique em Concluído para salvar o criativo.

A página de desempenho permite que você pode visualize e compare os dados de desempenho de todos os seus Smart Banners, até os 90 dias anteriores.

Para ver a página de desempenho:

1. No painel da AppsFlyer, acesse Experiências e deep linking > Web-to-App > Smart Banners > Desempenho.
2. Selecione o intervalo de datas para o qual você deseja visualizar o desempenho. O intervalo de data padrão são os últimos 7 dias.
3. [Opcional] Ative Mostrar apenas os banners ativos no momento. Se ativado, os dados dos banners pausados ou não ativos no momento não são exibidos, mesmo que estivessem ativos durante o intervalo de datas selecionado. Os dados de desempenho são exibidos para o intervalo de datas selecionado.

Você pode visualizar os dados de performance dos últimos 7 dias para qualquer banner.

Para visualizar a performance do banner:

1. No painel da AppsFlyer, acesse Experiências e deep linking > Web-to-App > Smart Banners > Studio.
2. Selecione o workplace do site e o grupo de banners para o qual você deseja visualizar a performance.
3. Passe o mouse sobre qualquer um dos banners no grupo de banners.
   Os dados de performance são exibidos para a semana anterior.

A AppsFlyer leva em consideração o seguinte ao determinar se/qual Smart Banner exibir:

• Existem regras (comportamento de rejeição, limite de frequência, localização, mostrar nas páginas etc.) definidas para os grupos de banner?
• O usuário final atende às condições da regra e se qualifica para ver um banner?

Se a resposta para ambas as perguntas for sim, ou seja, existem regras, e o usuário se qualificar para ver um banner, a AppsFlyer escolherá um banner a ser exibido conforme explicado na tabela a seguir.

Você pode fazer testes A/B com banners comparando seu desempenho no painel de desempenho. Para obter dados adicionais relacionados à atribuição, é recomendável adicionar os parâmetros af_adset, af_ad ou outros parâmetros de atribuição (exceto pid, c, e canal) com um valor exclusivo para cada criativo de banner ou grupo de banners. Use esses parâmetros para comparar o desempenho de cada grupo de banners ao visualizar dados nos painéis e relatórios da AppsFlyer.

Devido ao limite de frequência definido no grupo do seu banner.
O limite de frequência determina quantas vezes o banner é mostrado a um único usuário. Por exemplo, se o limite de frequência estiver definido como três, e um usuário visitar o site quatro vezes, o usuário verá o banner nas primeiras 3 visitas, mas não da quarta em diante. O limite de frequência pode ser desativado. Selecione um valor de limite de frequência ou desative o limite de frequência.

Sim. você pode definir sua própria fonte usada em seu site para seu banner usando as instruções no hub do desenvolvedor.

• Requer um desenvolvedor de site para implementar.
• A fonte será aplicada a todos os banners no site e a todos os elementos de texto dentro do banner.
• A fonte não pode ser visualizada no editor criativo.
• Após a implementação, teste seu banner criativo.
• Se a fonte não for exibida corretamente, salve novamente seu banner no editor criativo.

showBanner

updateParams

Sim. Para isso, adicione o parâmetro deep_link_value de uma das seguintes maneiras:

• Na interface do usuário da AppsFlyer, adicione um parâmetro de atribuição personalizado estático durante a configuração do banner.
• Use additionalParams na função ShowBanner para adicionar o parâmetro à URL antes de exibir o banner.
• Use a função updateParams para adicionar o parâmetro à URL após a exibição do banner.

Certifique-se de que seu desenvolvedor implemente o comportamento desejado do deep_link_value.

Não. Se você não sabe se os usuários têm o aplicativo instalado, recomendamos que você faça seu call to action de forma que ele se aplique a ambos. Por exemplo: "Vá para o aplicativo" ou "Abra o aplicativo."

Sim. Se a URL de entrada original contiver um parâmetro utm_source ou pid, a URL original será salva durante a sessão de navegação e os parâmetros serão aplicados à URL do banner de saída.

Sim. Para fazer isso, ao implementar Smart Banners em um aplicativo embalagem/híbrido e carregar a página do banner do aplicativo (e não de um navegador da web), não use a função showBanner, pois isso exibe o banner no aplicativo. Como alternativa, use a função hideBanner.

Estamos empenhados para garantir que todos os seus usuários, incluindo aqueles com deficiências, possam acessar e se engajar totalmente com os Smart Banners.

Por isso, tentamos tornar a acessibilidade web de nossos Smart Banners compatível e seguir as melhores práticas padrão WCAG 2.1, fornecendo os atributos HTML relevantes nos elementos do Smart Banner.

No entanto, determinar os requisitos de acessibilidade relevantes para seus próprios usos pretendidos de tais Smart Banners é de sua exclusiva responsabilidade. Você é o único responsável por garantir que os Smart Banners que você usa permaneçam acessíveis a todos os usuários de acordo com os requisitos relevantes de acessibilidade web.

Observe que muitas alterações nos Smart Banners podem afetar sua compatibilidade com os requisitos de acessibilidade relevantes, incluindo, por exemplo, a edição de cores e tamanho dos elementos do banner interno.