Visão geral: a maior parte do tráfego de sites de todo o mundo tem origem nos dispositivos mobile. Use Smart Banners em seu site mobile para converter visitantes da web em usuários de aplicativos.
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:
- Clicks: A user clicks the Smart Banners and proceeds to install.
- Impressions: When the banner loads (user sees the banner), it sends an impression count event to 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.
Observação
Não tem certeza se os Smart Banners são a solução certa para você?
Compare a outras soluções web-to-app da AppsFlyer.
Scope of work
Who's involved Profissional de marketing e desenvolvedor de sites.
|
Prerequisites
|
Time required Approximately 20 minutes. |
Outcome
|
ExemploMark é um profissional de marketing que trabalha para um serviço de entrega de alimentos bem-sucedido, o "Feed Me". To do this Mark utilizes Smart Banners using his own visuals and texts. Smart Banners are powered by OneLink. When mobile website visitors click the CTA button, it automatically directs them to the appropriate app store or landing page, where it's easy for them to install the app. When existing mobile users click the CTA button, it launches the app. AppsFlyer then attributes the click/install to Mark's defined media source and campaign. |
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, acesseEngajamento e Deep Linking> Smart Banners
- Clique em Criar Workplace do site.
- Insira um nome de Workplace do site.
-
Clique em Criar.
O Workplace do site é aberto. - Copie o trecho de código do banner.
-
Envie o trecho de código 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
Banner Groups contain one or more banners. Here you can:
- Select the OneLink template used by the Banner Group, which contains the mobile apps to redirect your website visitors to.
- Set a specific deep-linking scheme
- Define your targeting rules, scheduling, behavior, and attribution details used by all banners of the Banner Group.
- Set which pages activate the Banner Group's banners when visited.
To set up a new Banner Group:
- No dashboard da AppsFlyer, acesseEngajamento e Deep Linking> 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). - Select the OneLink template for the Banner Group.
- [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 as fontes atribuídas 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.
- Selecione quando visitantes não-orgânicos não chegam ao site a partir de cliques em ad networks ou de fontes com parâmetros UTM.
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 do banner feita por um usuário, até que o banner possa ser exibido novamente para o usuário. Selecione uma das seguintes opções:
- By time: 1 hour, 1 day, or 1 week.
- Próxima sessão: significa a sessão que ocorre em uma guia ou janela diferente, depois que o usuário fecha o banner.
- Never: the banner is not shown again.
Note: If the user clears the browser cache or views the site in private browsing mode the Dismissal Behaviour setting is lost.
- [opcional] Definir limite de frequência.
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. - [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.
- 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.
- 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. -
Show on specific pages: Specify the conditions for what the page or URL should or should not contain in order to display banners.
- You can choose either:
- Specific page: Specify the host and/or path of the page on which to display the banner. Any queries entered will be disregarded. Example: http://www.example.com/path?query
- URL: Specify the path and/or query, or the keyword in the path/query of the pages on which to display the banner. Example: http://www.example.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.
- You can choose either:
- [Padrão] Exibir em todas as páginas do site.
- 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.
Para se preparar para a campanha de SMS, Mark:
- 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=ameixas
. - Ele cria um Smart Banner (grupo de banners e banner) com fontes atribuídas configuradas para usar parâmetros de link de atribuição de entrada, que ativam usuários que visitam páginas na web mobile contendo "plums_link".
Para se preparar para a campanha usando uma ad network, Mark:
- 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
. Não são necessários parâmetros adicionais - Usa o Smart Banner já criado para a campanha SMS.
Para se preparar para a campanha usando o Google Ads, Mark:
-
Cria uma cópia da página de venda de ameixas no site mobile do Feed Me:
https://www.feedme.com/plums_utm?utm_source=google&utm_campaign=plums
. - Cria uma cópia do Smart Banner (grupo de banner e banner) com as fontes atribuídas definidos como Usar parâmetros UTM, que é ativada para usuários que visitam páginas na web mobile contendo "plums_utm".
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 chegam à página de destino do UTM, enquanto todos os outros cliques chegam à página inicial do link de entrada. 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.
- Customize all the elements in the Smart Banner creative. To do so, select elements by name or click on them on the preview image.
- Título
- Parágrafo
- Estrelas de classificação
- Botão Fechar
- Chamada para ação
- Logotipo do aplicativo
- Fundo
- 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)
- Click Review to review the banner creative and test its appearance on different devices.
Note: Banners may appear slightly different in active campaigns compared to preview images. - If changes are needed, click Back to editor..
- Clique em Concluído para voltar à página de configuração do banner.
- Clique em Criativo de design para configurar o criativo do 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] Clique em Adicionar um parâmetro para incluir parâmetros de atribuição personalizados, como, por exemplo, Nome do anúncio.
- Para converter o link de atribuição de um tipo de URL de aquisição de usuário para uma URL de retargeting, adicione o parâmetro personalizado
is_retargeting=true
.
- Para converter o link de atribuição de um tipo de URL de aquisição de usuário para uma URL de retargeting, adicione o parâmetro personalizado
- 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.
To test a Smart Banner's creative:
Prerequisite: Make sure that the Smart Banner code snippet is integrated into your website.
- 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.
Limitations
Limitation | Remarks |
---|---|
Tablets |
|
AppsFlyer provides a Smart Banner SDK that advertisers integrate into their websites. The purpose of the SDK is to pull all the required data to dynamically display the Smart Banners. The Smart Banners SDK also automatically builds the proper attribution links, so you don't need to build them manually.
Therefore, the Smart Banner SDK should be accessible from all pages displaying your mobile banners.
O SDK do Smart Banner é autenticado usando a chave da Web exclusiva, que você pode obter no Workplace do site.
Code snippet
Nota
Starting January 1st, 2020 there's a new SDK for Smart Banners.
The new AppsFlyer web SDK lets you use both Smart Banners and People-based Attribution on your website. The SDK snippets below show two examples:
Include this code snippet in the <head> tag of every page displaying your mobile banners.
AppsFlyer web SDK for Smart Banners only
- 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.
- Paste this code snippet in the head tag on your website. Make sure to paste it near the top of the head tag.
<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"}});
AF('banners', 'showBanner');
</script>
AppsFlyer web SDK for Smart Banners and 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.
- Replace the YOUR_PBA_KEY placeholder in the script with your web dev key. The web dev key is created when you create a brand bundle.
- Paste this code snippet in the head tag on your website. Make sure to paste it near the top of the head tag.
<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"}});
AF('banners', 'showBanner');
</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");
window.AF.Banner.showBanner();
</script>
Adding the SDK using tag managers
You can use tag managers to add the Smart Banners SDK to your website.
- In GTM, create a new 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 do código pela sua chave de banner real.
- 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.
- Publish your GTM container.
Step 1: Create a property in Adobe Experience Cloud
Create a property (tag) that hosts the Smart Banners SDK.
- Acesse o Adobe Experience Cloud> Inicialização.
- Em Adobe Experience Cloud Launch, clique em Ir para Inicialização.
- Clique em Nova propriedade.
- Name your property.
- Em Plataforma, selecione Web.
- Enter your website domain.
- Clique em Salvar.
Step 2: Add Smart Banners SDK to the Adobe Launch property
Add the Smart Banners SDK to the tag.
- Na página Minha propriedade da web, selecione a aba Regras.
- Name the rule. Recommended to use Load 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.
Step 3: Add the Adobe Launch tag to your website
Add the Adobe Launch tag to your website. The tag loads the Smart Banners web SDK.
- Na página de Propriedade da minha web, selecione a aba Ambientes .
- Find the row with the environment you want to publish (development or production).
- 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:
- Copy the script code snippet.
- Close the dialog box.
- Paste the code snippet into the <head> tag of your website.
Step 4: Publish the Adobe Launch environment
Publish the environment to activate the Adobe Launch tag.
- Na página Propriedade da minha web, acesse a aba Publicação .
- Na seção Desenvolvimento, clique em Adicionar nova biblioteca.
- Name the library and choose an environment.
- Em ALTERAÇÕES DE RECURSO, clique em Adicionar um recurso.
- Clique em Regras > Carregar Smart Banners > Mais Recentes > Selecionar e Criar uma Nova Revisão.
- Clique em Salvar.
- Na seção Desenvolvimento:
- Ao lado da biblioteca recém-criada, clique no menu Ação (3 pontos) e selecione Construir para Desenvolvimento.
- Clique no menu de ação novamente e selecione Enviar para aprovação.
- Na seção Submetido:
- Clique no menu de ação e selecione Construir para Preparação.
- 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.
Now, when your website loads on mobile, the banner's active creative will be displayed. To only display the banner on certain pages or according to user actions, see Adobe Launch rules.
SDK functions
Showbanner
Purpose:
Start showing the Smart Banner according to the banner key provided in the snippet.
Parameters (optional):
- 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. -
additionalParams
Se aprovados, esses parâmetros são adicionados como parâmetros de consulta à URL do banner.
Example:
AF('banners', 'showBanner', { bannerContainerQuery: "#container-id",
additionalParams: { p1: "v1", p2: "v2"...}});
showBanner({ bannerContainerQuery: "#container-id",
additionalParams: { p1: "v1", p2: "v2"...}});
hideBanner
Purpose
Programmatically remove any displayed banner from the page (e.g. after displaying for X seconds).
AF('banners', 'hideBanner')
disableBanners - deprecated
Purpose
This function is only available in the old Smart Banners SDK and is going to be deprecated.
Disable the web SDK from displaying banners and communicating with AppsFlyer servers.
disableTracking - deprecated
Purpose
This function is only available in the old Smart Banners SDK and is going to be deprecated.
Disable the web SDK and clear traces of collected info from the browser (i.e. local-storage, cookies, etc.).
setAdditionalParams - deprecated
Purpose
This function is only available in the old Smart Banners SDK and is going to be deprecated.
defina additionalParams para o OneLink antes de fazer a chamada showBanner
. Os parâmetros são anexados à URL do OneLink atrás do banner.
Parameters
-
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).
Usage example
You want to differentiate between landing pages using specific parameters. To do so, you can append additional parameters to the OneLink behind the banner. When a user installs your app after clicking the banner, the parameters on the OneLink appear in the raw data for you to analyze. The code example below makes use of the af_sub1 parameter.
// call this method before calling showBanner()
setAdditionalParameters('af_sub': 'custom_paramter_value')
The format of the final OneLink is this: subdomain.onelink.me/onelink-id?pid=af_banner&c=campaign&af_sub1=custom_paramter_value.
The subdomain and OneLink ID are taken from the OneLink template.
For example: ab12.onelink.me/xyz1?pid=af_banner&c=summer_campaign&af_sub1=uk_landing_page.
You can use any valid parameter. For more information on attribution link parameters, see here. Make sure not to override the pid and c parameters, because these already exist on the attribution link behind the banner.
getAdditionalParams- deprecated
Purpose
This function is only available in the old Smart Banners SDK and is going to be deprecated.
Obtenha o objeto additionAlParams atual.