Smart Banners— web-to-app mobile

Visão geral: converta os visitantes do seu site em usuários de aplicativos mobile com Smart Banners.

Smart Banners

Smart Banners:

Disponibilize-os no site mobile da sua marca para aumentar as taxas de conversão para usuários de alta intenção.
Mensure a qualidade das instalações de aplicativos provenientes de visitantes do site mobile.
Permite a atribuição precisa de campanhas na web para aplicativo mobile para TODAS as fontes de mídia, incluindo SRNs.
Os Smart Banners podem atribuir através da atribuição de cliques e fazer a contagem das impressões:
- Cliques: um usuário clica nos Smart Banners e segue para a instalação.
- Impressões: quando o banner é carregado (o usuário vê o banner), ele envia um evento de contagem de impressões para a AppsFlyer.

O fluxo funciona da seguinte maneira:

Um usuário clica em um anúncio e é direcionado para o site mobile do anunciante.
Um Smart Banner é exibido no site mobile do anunciante.
O usuário clica no Smart Banner e:
- Se o aplicativo não estiver instalado, o usuário será direcionado para a app store para fazer a instalação do aplicativo.
- Se o aplicativo estiver instalado e Universal Links, App Links e/ou links de esquema URI estiverem configurados, o aplicativo será inicializado diretamente.
O usuário é levado ao conteúdo in-app, no contexto da promoção.
O usuário é atribuído à fonte de mídia que mostrou o anúncio original.

Escopo do trabalho

Quem está envolvido

Profissional de marketing e desenvolvedor de sites.

O desenvolvedor do site precisa apenas inserir um trecho de código (code snippet) ao HTML do site.
Para todas as outras ações de configuração, apenas o profissional de marketing é necessário.

Pré-requisitos

Uma conta da AppsFlyer com pelo menos um aplicativo
Template do OneLink contendo o(s) app(s) a ser(em) anunciado(s) usando Smart Banners
Isso é exigido pelos Smart Banners para o direcionamento dos seus visitantes da web mobile para as páginas corretas das app stores de acordo com os dispositivos utilizados.

Tempo necessário

Aproximadamente 20 minutos.

Resultado

Os visitantes do site que clicarem no botão CTA serão enviados para a app store ou página da web correta com base no dispositivo.
Usuários de aplicativos mobile que clicam no botão CTA podem ser vinculados por meio de deep linking ao aplicativo.
Os usuários serão atribuídos a partir do clique/instalação às suas fontes de mídia própria.

Exemplo

Mark é um profissional de marketing que trabalha para um serviço de entrega de alimentos bem-sucedido, o "Feed Me".
Ele quer converter os visitantes do site mobile do Feed Me em usuários de aplicativo.

Para fazer isso, Mark utiliza Smart Banners usando seus próprios criativos e textos.

Smart Banners são uma tecnologia do OneLink Quando os visitantes do site mobile clicam no botão CTA, ele os direciona automaticamente para a app store ou landing page apropriada, onde é fácil instalar o aplicativo. Quando usuários mobile existentes clicam no botão CTA, ele inicia o aplicativo.

Em seguida, a AppsFlyer atribui o clique/instalação à fonte de mídia definida e à campanha de Mark.

Importante!

Use os Smart Banner da AppsFlyer ou o smart app banner do iOS Safari, mas não ambos. O uso de ambos pode causar problemas de exibição em seu site mobile e resultar em discrepâncias de atribuição.

Procedimentos

Conclua os procedimentos a seguir para configurar um smart banner que:

Direcione os usuários do seu site mobile, através de um Smart Banner, para a app store ou para a página do aplicativo correta com base no dispositivo utilizado.
Atribua o clique/instalação à sua fonte de mídia própria usando o OneLink.

1. Configuração do site

Para preparar seu site mobile para a exibição de Smart Banners :

No dashboard da AppsFlyer, acesse Experiências e Deep linking > Web-to-App > Smart Banners
Clique em Criar Workplace do site.
Insira um nome de Workplace do site.
Clique em Criar.
O Workplace do site é aberto.
Copie trecho do código do banner.
Envie o trecho de código (code snippet) para seu desenvolvedor front-end para implementar em seu site.
Essa tarefa rápida precisa ser feita apenas uma vez por site pelo desenvolvedor front-end, que não precisará mais se envolver nas etapas a seguir.
[opcional] Copiar chave da web. (Essa chave já existe como parte do trecho de código.)
Clique em Continuar.

2. Configuração de Grupos de Banners

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 redirecionar os visitantes do site.
Defina um esquema específico de deep linking
Defina suas regras de segmentação, agendamento, comportamento e detalhes de atribuição usados por todos os banners do Grupo de Banners.
Defina quais páginas ativam os banners do Grupo de Banners quando visitadas.

Para configurar um novo Grupo de Banners:

No dashboard da AppsFlyer, acesse Experiências e deep linking >Web-to-App >Smart Banners
No lado esquerdo, clique em Adicionar grupo de banners.
Insira um nome exclusivo para o Grupo de Banners.
O nome deve refletir um tema comum geral entre os banners a serem definidos para o grupo do banner (por exemplo, o aplicativo anunciado).
Selecione o template do OneLink para o Grupo de Banners.
[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, por padrão, o valor é retirado do template do OneLink. Apenas faça essa configuração para o Grupo de Banners caso seja necessário um valor diferente do que está definido no template.

Defina asfontes 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 os parâmetros UTM_source ou UTM_Campaign estiverem ausentes, os nomes estáticos serão usados como fallback.
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.

[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 cohort, dashboard de visão geral, relatório de retenção e mais.
[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.
[opcional] Defina o limite de frequência.
O limite de frequência determina quantas vezes cada banner no Grupo de Banners é mostrado para um usuário único. 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 poderá ver o mesmo banner nas primeiras 3 visitas, mas não da quarta e 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.
[Opcional] Agende a ativação do Grupo de Banners: inicie imediatamente (padrão) ou defina uma campanha com tempo limitado.
[Opcional] Definir 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.
[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 as condições para o que a página ou URL deve ou não 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.exemplo.com/path?query
    - URL: especifique o caminho (path) e/ou consulta (query), ou a palavra-chave no caminho (path)/consulta (query) das páginas nas quais quer exibir o banner. Exemplo: http://www.exemplo.com/path?query
  - Até 5 condições podem ser adicionadas usando e/ou.
  - Se houver um conflito entre as condições, o banner não será exibido.
Clique em Criar Grupo de Banners.
[Opcional] Para editar novamente o Grupo de Banners, passe o mouse sobre Direcionamento e comportamento e clique em Editar.

Exemplo

Mark é o profissional de marketing de um serviço de entrega de alimentos chamado "Feed Me". Ele decide criar uma campanha para a venda de ameixas no aplicativo. Mark decide usar disparo de SMS, além de ad networks e do Google para a campanha.

Em preparação para a campanha, Mark:

Seleciona usar os parâmetros de atribuição de link de entrada e os parâmetros UTM (com parâmetros padrão como fallback para cliques que não vêm de um link de entrada ou de uma campanha UTM).
Fornece à ad network um link de atribuição exclusivo a ser usado na campanha para direcionar os usuários para a página de venda de ameixas no site mobile do Feed Me. O link inclui o parâmetro de URL de redirecionamento (af_r), com a URL para a página de venda de ameixas: http://feedme.com/plums_link.
Prepara uma campanha do Google Ads para usuários que visitam páginas na mobile web que contenham "plums_utm".
Adiciona parâmetros de atribuição exclusivos para usar no link da campanha, direcionando os usuários à página de venda de ameixas no site mobile do Feed Me. O link inclui o parâmetro PID, com a URL para a página de venda de ameixa: http://feedme.com/plums_link?pid=sms&c=plums.

As campanhas começam a ser executadas.

Os usuários:

Veem o anúncio para a venda de ameixas e clicam no site mobile do Feed Me.
Os cliques do Google Ads e todos os outros cliques chegam à página inicial do link de entrada e o Smart Banner correspondente é ativado por página.
Veem o Smart Banner no site mobile e clicam nele.
Chegam ao aplicativo do Feed Me, baixam e instalam.
São direcionados à inicialização do aplicativo para a venda de ameixas.
São atribuídos às fontes de mídia corretas que os levaram ao site mobile do Feed Me.

3. Configuração do banner

Para criar um banner em um Grupo de Banners:

Clique em Criar Banner para entrar na páginaEditar Banners.
Configure o Nome do banner.

Crie um Criativo de design:

Clique em Criativo de design para configurar o criativo do banner.
Uma janela para escolher um template de banner é aberta.
Passe o mouse sobre Template de criativo e clique em Criar para acessar a página de configuração de Montar criativo.

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.

Título
Parágrafo
Estrelas de classificação
Botão Fechar
Chamada para ação
Logotipo do aplicativo
Fundo
Preenchimento de banner (para ajustar o tamanho do banner)

Para imagens, use um dos seguintes tipos de arquivo: jpeg, jpg, png.
Atençã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	DPI	Proporção da imagem
Padrão	300 KB	72	9:4 (horizontal)
Aprimorado			9:4 (horizontal)
Promocional			1:1
Intersticial			9:16 (vertical)

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.
Se forem necessárias alterações, clique em Voltar ao editor.
Clique em Concluído para voltar à página de configuração do banner.

[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.
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 .
[Opcional] Para converter o link de atribuição de uma URL de tipo de aquisição de usuário para uma URL de retargeting, adicione o parâmetro personalizado is_retargeting=true.
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.

4. Testando

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.

Na página Testar Criativo , insira o link para a página do site onde o SDK do Smart Banner está integrado (veja a próxima aba).
Clique em Gerar.
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.
Clique em Editar criativo para retornar à configuração do criativo ou clique em Concluído para salvar o criativo.

Informações adicionais

Lógica de exibição de grupo de banner

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.

Configuração de grupos de banner	Quais banners são exibidos	Exemplo
Grupo de banner único	A AppsFlyer divide uniformemente a exibição de todos os banners ativos em todos os seus grupos de banners entre todos os usuários elegíveis.	Exemplo 1: há 1 banner ativo. Ele é exibido para todos os usuários. Exemplo 2: existem 2 banners. 50% dos usuários veem o banner 1 e os outros 50% veem o banner 2. Exemplo 3: existem 3 banners, 1/3 dos usuários elegíveis veem cada banner. Exemplo 4: não há banners ativos. Nada é exibido.
Múltiplos grupos de banners com regras idênticas	A AppsFlyer divide uniformemente a exibição de todos os banners ativos em todos os seus grupos de banners entre todos os usuários elegíveis.	Existem 2 grupos de banners (A e B), cada um com 3 banners (um total de 6 banners). 1/6 dos usuários elegíveis veem cada banner.
Múltiplos grupos de banners com múltiplas regras	A AppsFlyer divide uniformemente a exibição de todos os banners ativos do grupo de banners com regras que descrevem e correspondem mais especificamente aos usuários. Se os grupos de banners forem igualmente específicos de maneiras diferentes, os banners de todos esses grupos de banners serão exibidos.	Exemplo 1: existem 2 grupos de banner, A e B. O grupo de banner A está definido para ser exibido no mundo todo e o grupo de banner B está definido para ser exibido no Japão. O grupo de banner B é mais específico, portanto apenas os banners desse grupo são exibidos para usuários no Japão. Exemplo 2: existem 2 grupos de banners, A e B. O grupo de banner A está definido para ser exibido no mundo todo, e o grupo de banner B está definido para ser exibido em todos os lugares, exceto na Ucrânia. O grupo de banner B é mais específico, portanto apenas os banners desse grupo são exibidos para usuários no mundo todo (exceto usuários na Ucrânia). Exemplo 3: existem 2 grupos de banner, A e B. O grupo de banner A está definido para ser exibido no Japão e o grupo de banner B está definido para ser exibido em abril. Ambos os grupos de banners são igualmente específicos, mas de maneiras diferentes. Portanto, no Japão, em abril, os banners de ambos os grupos de banners são exibidos, pois nenhum grupo de banners tem prioridade sobre o outro.

Teste A/B de performance de banner

Você pode fazer o teste A/B para verificar a performance de banners individuais. Para isso, adicione parâmetros de atribuição personalizados aos seus criativos de banners (etapa 4 da configuração do banner) e use esses parâmetros para comparar a performance de cada banner.

Quaisquer parâmetros podem ser adicionados, exceto pid, ce channel, pois pertencem ao nível do grupo de banner.

Recomendado: defina o parâmetro af_adset com um valor exclusivo em cada criativo de banner. Depois, use o relatório de performance agregada no dashboard de Visão Geral da AppsFlyer para comparar facilmente a performance, segundo as indicações da imagem a seguir.

FAQ

FAQ
Por que meu banner não é exibido? 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.

Limitações

Limitação	Observações
Tablets	Os Smart Banners são projetados para dispositivos mobile e suas resoluções talvez não sejam otimizadas para tablets com telas grandes. Navegadores em tablets podem não ser reconhecidos como dispositivos mobile.
Parâmetros personalizados	Os seguintes caracteres especiais não são permitidos nos parâmetros personalizados:;, *, !, @, #, ?, $, ^, :, &, ~, `, =, +, ’, >, <, / Se você definir um parâmetro usando um desses caracteres especiais, o parâmetro não será salvo.
Divisão de exibição de banner	A AppsFlyer divide uniformemente a exibição de banners ativos para os usuários. Não é possível selecionar quais banners específicos exibir com maior ou menor frequência. Por exemplo, se houver 2 banners em um grupo, cada um será exibido para 50% dos usuários. Isso não pode ser alterado para uma divisão 70%-30%.
Página específica	Quando você configura seu grupo de banners para exibir banners em uma determinada página, a regra de banner se aplica somente ao host/caminho inserido. Se não houver uma correspondência perfeita (por exemplo, se a página do site tiver cadeias de caracteres adicionais não incluídas na configuração da regra), a regra não se aplica.

A AppsFlyer fornece um Smart Banner SDK que os anunciantes integram em seus sites. O objetivo do SDK é extrair todos os dados necessários para exibir dinamicamente os Smart Banners. O Smart Banners SDK também cria automaticamente os links de atribuição adequados, para que você não precise desenvolvê-los manualmente.

Portanto, o Smart Banner SDK deve estar acessível em todas as páginas que exibem seus banners mobile.

O SDK do Smart Banner é autenticado usando a chave da Web exclusiva, que você pode obter no Workplace do site.

Trecho de código

Nota

Desde 1º de janeiro de 2020, o SDK para Smart Banners permite que você use Smart Banners e Atribuição baseada em pessoas em seu site. Os trechos do SDK abaixo contêm dois exemplos:

Se você já tiver o SDK web PBA autônomo, remova-o e substitua-o pelo SDK web para Smart Banners e Atribuição baseada em Pessoas. Não basta adicionar o SDK web autônomo para Smart Banners.

Inclua esse trecho de código na tag <head> de cada página que exibe seus banners mobile.

Web SDK da AppsFlyer apenas para Smart Banners

Substitua o placeholder YOUR_WEB_KEY no script pela sua chave da web. A chave da web é gerada quando você cria um novo Workplace do site.
Cole esse trecho de código na tag principal em seu site. Certifique-se de colá-lo perto da parte superior da tag principal.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","banners",{banners: {key: "YOUR_WEB_KEY"}});

// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.

AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});

</script>

Web SDK da AppsFlyer para Smart Banners e People-Based Attribution

Substitua o placeholder YOUR_WEB_KEY no script pela sua chave da web. A chave da web é gerada quando você cria um novo Workplace do site.
Substitua o placeholder YOUR_PBA_KEY no script pela sua chave de desenvolvedor web. A chave de desenvolvedor web é criada quando você cria um pacote da marca (brand bundle).
Cole esse trecho de código na tag principal em seu site. Certifique-se de colá-lo perto da parte superior da tag principal.

<script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF", "pba,banners",{pba: {webAppId: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});

// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.

AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});

</script>

        <script>
          !function(e,n,t){!function(e,n,t,r,a){
          var s=(e[n]=e[n]||{})[t]=function(){(s._q=s._q||[]).push(Array.prototype.slice.call(arguments))};
          s.webkey=a;
          for(var i=0;i<r.length;i++)
          s[r[i]]=function(n)
          {return function()
          {var e=Array.prototype.slice.call(arguments);
          return e.unshift(n),(s._q=s._q||[]).push(e),s}}
          (r[i])}(e,"AF","Banner",["showBanner","hideBanner","disableBanners","disableTracking","setAdditionalParams"],t),
          function(e,n,t){var r=e.createElement("script");
          r.type="text/javascript",r.async=!0,r.src=n+(t?"?webkey="+t:"");
          var a=e.getElementsByTagName("script")[0];
          a.parentNode.insertBefore(r,a)}(n,"https://cdn.appsflyer.com/web-sdk/banner/latest/sdk.min.js",t)}(window,document,"YOUR-BANNER-KEY");
          // Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. This can be changed if you want some website components to be on top of the banner.
          
          showBanner({ bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"...}});

          </script>

Adicionando o SDK usando gerenciadores de tags

Você pode usar gerenciadores de tags para adicionar o Smart Banner SDK ao seu site.

No GTM, crie uma nova tag.
Nomeie a tag, clique em Configuração de tags e selecione HTML personalizado.
Na caixa de HTML, cole o trecho de código do SDK. Substitua YOUR-BANNER-KEY no trecho de código pela sua chave de banner real. Observação: veja também como integrar o web SDK do PBA com Smart Banners.
Clique em Gatilho e crie um novo gatilho clicando no ícone de + no canto superior direito da tela.
Nomeie o gatilho, clique em Configuração de gatilho, e escolha a Visualização da página .
Se quiser que o banner apareça em todas as páginas, selecione Visualizar em todas as páginas. Se quiser que o banner apareça nas páginas selecionadas, escolha Visualizar em algumas páginas e defina a condição para disparar a tag. Para saber mais sobre gatilhos, leia a documentação do GTM.
Clique em Salvar no canto superior direito.
Retorne à tela de configuração da tag. Verifique se tudo está corretamente configurado e clique em Salvar no canto superior direito.
Publique seu contêiner GTM.

Etapa 1: criar uma propriedade na Adobe Experience Cloud

Crie uma propriedade (tag) que hospede o Smart Banner SDK.

Acesse o Adobe Experience Cloud> Inicialização.
Em Adobe Experience Cloud Launch, clique em Ir para Inicialização.
Clique em Nova propriedade.
Nomeie sua propriedade.
Em Plataforma, selecione Web.
Insira o domínio do seu site.
Clique em Salvar.

Etapa 2: adicione o Smart Banner SDK à propriedade Adobe Launch

Adicione o Smart Banner SDK à tag.

Na página Minha propriedade da web, selecione a aba Regras.
Nomeie a regra. Recomendamos usar Carregar Smart Banners.
Na seção IF, em EVENTOS, clique em +Adicionar.
- Em Tipo de evento, selecione Core - DOM Ready.
- Clique em Manter alterações.
Na seção THEN, em Ações, clique em +Adicionar .
- Em Tipo de ação > Código personalizado.
- Selecione JavaScript > Abrir Editor e cole o trecho do código do SDK dos Smart Banners sem as tags de <script>.
- Clique em Manter alterações para fechar o editor de código.
Clique em Salvar.

Etapa 3: adicione a tag Adobe Launch ao seu site

Adicione a tag Adobe Launch ao seu site. A tag carrega o Smart Banners web SDK.

Na página de Propriedade da minha web, selecione a aba Ambientes .
Encontre a linha com o ambiente no qual você deseja publicar (desenvolvimento ou produção).
- No título INSTALAÇÃO, clique no ícone de caixa na linha relevante; geralmente, esse é um ambiente de produção.
- Consulte a seção sobre como publicar o ambiente do Adobe Launch.
Na caixa de diálogo Instruções de instalação na web:
- Copie o trecho de código de script.
- Feche a caixa de diálogo.
Cole o trecho de código na tag <head> do seu site.

Etapa 4: publique o ambiente Adobe Launch

Publique o ambiente para ativar a tag Adobe Launch.

Na página Propriedade da minha web, acesse a aba Publicação .
Na seção Desenvolvimento, clique em Adicionar nova biblioteca.
1. Nomeie a biblioteca e escolha um ambiente.
2. Em ALTERAÇÕES DE RECURSO, clique em Adicionar um recurso.
3. Clique em Regras > Carregar Smart Banners > Mais Recentes > Selecionar e Criar uma Nova Revisão.
4. Clique em Salvar.
Na seção Desenvolvimento:
1. Ao lado da biblioteca recém-criada, clique no menu Ação (3 pontos) e selecione Construir para Desenvolvimento.
2. Clique no menu de ação novamente e selecione Enviar para aprovação.
Na seção Submetido:
1. Clique no menu de ação e selecione Construir para Preparação.
2. Clique novamente no menu de ação e selecione Aprovar para publicação.
Na seção Aprovado, clique no menu de ação e selecione Criar e Publicar para Produção.
O processo está concluído.

Agora, quando seu site for carregado em dispositivos mobile, o criativo ativo do banner será exibido. Para exibir somente o banner em determinadas páginas ou de acordo com as ações do usuário, consulte as Regras do Adobe Launch.

Funções do SDK

showBanner

Objetivo:

Comece a exibir o Smart Banner de acordo com a chave do banner fornecida no trecho de código.

Parâmetros (opcional):

bannerContainerQuery
Se aprovado, o SDK tenta localizar um elemento na página com essa consulta e o trata como o ponto de entrada para o posicionamento do banner. Caso contrário, document.body é usado.
bannerzIndex
Smart Banners são, por padrão, definidos como o valor máximo z-index, para que eles não sejam ocultos por elementos do site. Isso pode ser alterado se você quiser que alguns componentes do site estejam no topo do banner.
additionalParams
se aprovados, esses parâmetros são adicionados como parâmetros query à URL do OneLink.

Exemplo:

AF('banners', 'showBanner', { bannerContainerQuery: "#container-id",
              bannerZIndex: 1000,              
              additionalParams: { p1: "v1", p2: "v2"...}});

showBanner({ bannerContainerQuery: "#container-id",
              bannerZIndex: 1000,
              additionalParams: { p1: "v1", p2: "v2"...}});

updateParams

Propósito

Adicione programaticamente até 10 parâmetros à URL do OneLink atribuída ao botão call-to-action (CTA), após a exibição do banner.

A entrada é um objeto com chaves de parâmetro e valores.

Uma chave não pode ter um valor vazio.
Uma chave não pode ser nomeada: indefinida, nula, NaN ou arg
Caracteres inválidos:
- Chave: /, \, *, !, @, #, ?, $, %, ^, &, ~, `, =, +, ', ", ;, :, >, <
- Valor = \, ;, $, >, <, ^, #, `

Exemplo

AF ("banners", "updateParams", {p1: "v1", p2: "v2"...})

considerações

Os parâmetros são adicionados como parâmetros query à URL do OneLink.
Quando você usa updateParams para adicionar parâmetros,a URL da impressão é diferente da URL de clique.
Os parâmetros adicionados não substituem aqueles na URL original do OneLink. Se o parâmetro que você adicionar já estiver na URL do OneLink, ele não será alterado.
Se updateParams for chamado mais de uma vez, somente os parâmetros da última chamada serão adicionados à URL.
Esse método não funciona com o SDK da web do Smart Banner descontinuado.

hideBanner

Propósito

Remova programaticamente qualquer banner exibido na página (por exemplo, depois de exibir por X segundos).

AF('banners', 'hideBanner')

disableBanners - descontinuado

Propósito

Esta função só está disponível no antigo Smart Banner SDK e será descontinuada.

Desative o web SDK e pare de exibir banners e se comunicar com os servidores da AppsFlyer.

disableTracking - obsoleto

Propósito

Esta função só está disponível no antigo Smart Banner SDK e será descontinuada.

Desative o web SDK e limpe os traços das informações coletadas do navegador (ex.: local-storage, cookies etc.).

setAdditionalParams - descontinuado

Propósito

Esta função só está disponível no antigo Smart Banner SDK e será descontinuada.

defina additionalParams para o OneLink antes de fazer a chamada showBanner. Os parâmetros são anexados à URL do OneLink atrás do banner.

Parâmetros

Params
Mapa de parâmetros de chave/valor que podem substituir quaisquer parâmetros de link de atribuição pré-existentes (além do valor pid).

Exemplo de uso

Busque diferenciar as landing pages usando parâmetros específicos. Para isso, você pode anexar parâmetros adicionais ao OneLink atrás do banner. Quando um usuário instala seu aplicativo depois de clicar no banner, os parâmetros no OneLink aparecem nos dados brutos para análise. O exemplo de código abaixo faz uso do parâmetro af_sub1.

// chame esse método antes de chamar showBanner ()
setAdditionalParameters ('af_sub': 'custom_paramter_value')

O formato final do OneLink é este: subdomain.onelink.me/onelink- id?pid=af_banner& c=campaign& af_sub1=custom_paramter_value.

O subdomínio e o ID do OneLink são retirados do template do OneLink.

Por exemplo: ab12.onelink.me/ xyz1?pid=af_banner& c=summer_campaign& af_sub1=uk_landing_page.

Você pode usar qualquer parâmetro válido. Para obter mais informações sobre os parâmetros do link de atribuição, consulte aqui. Certifique-se de não substituir os parâmetros pid e c, porque eles já existem no link de atribuição por trás do banner.

getAdditionalParams- descontinuado

Propósito

Esta função só está disponível no antigo Smart Banner SDK e será descontinuada.

Obtenha o objeto additionAlParams atual.

Smart Banners

Escopo do trabalho

Exemplo

Importante!

Procedimentos

1. Configuração do site

2. Configuração de Grupos de Banners

Exemplo

3. Configuração do banner

4. Testando

Informações adicionais

Lógica de exibição de grupo de banner

Teste A/B de performance de banner

FAQ

Limitações

Trecho de código

Nota

Web SDK da AppsFlyer apenas para Smart Banners

Web SDK da AppsFlyer para Smart Banners e People-Based Attribution

Adicionando o SDK usando gerenciadores de tags

Etapa 1: criar uma propriedade na Adobe Experience Cloud

Etapa 2: adicione o Smart Banner SDK à propriedade Adobe Launch

Etapa 4: publique o ambiente Adobe Launch

Funções do SDK

showBanner

Objetivo:

Parâmetros (opcional):

Exemplo:

updateParams

Propósito

Exemplo

considerações

hideBanner

Propósito

disableBanners - descontinuado

Propósito

disableTracking - obsoleto

Propósito

setAdditionalParams - descontinuado

Propósito

Parâmetros

Exemplo de uso

getAdditionalParams- descontinuado

Propósito

Artigos nessa seção

Artigos relacionados

Conteúdo da Página: